Cara Memasang Spoiler di dalam Postingan Blog Sangat Keren

Cara Memasang Spoiler Keren pada Postingan Blog - Menambahkan spoiler pada blog sobat juga dapat menambahkan keistemaan pada blog sobat, spoiler ini tentunya sangat responsive dan mobile friendly enak dipandang.

Apa sih fungsinya dari spoiler ini? spoiler ini tombol yang digunakan untuk memunculkan misalkan daftar isi dan isi text yang biasanya menurut si penulis itu penting atau bisa yang lainnya seperti gambar maupun video.



---INILAH HASIL NYA---

Cara Memasang Spoiler Keren pada Postingan Blog
Pertama sobat masuk terlebih dahulu ke Blogger > Tema > Edit HTML copy kode CSS dibawah ini dan patekan tepat diatas kode]]><b:skin>atau </style>

/* Spoiler */
#flippy{text-align:center;margin:auto;display:inline}
#flippy button{background:#fff;background-image:linear-gradient(to right,#34ea78 0%,#2da7e3 51%,#34ea78 100%);background-size:200% auto;color:#fff;display:block;width:100%;padding:15px;font-weight:500;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:10px auto;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,0.05);transition:all .3s}
#flippy button:hover,#flippy button:focus{background-position:right center;outline:none;opacity:1;color:#fff}
#flippanel{display:none;padding:10px 0;text-align:left;background:#fff;margin:10px 0 0 0}
#flippanel img{background:#f5f5f5;margin:10px auto}


Kemudian memasang kode JQuery copy kode dibawah ini dan pastekan tepat diatas kode</body>atau&lt;/body&gt;

<script type='text/javascript'>
//<![CDATA[
//Spoiler
$(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})});
//]]>
</script>


Simpan tema sobat kemudian memasang pada postingan sobat., copy kode dibawah ini dan pastekan didalam postingan artikel sobat.

<div id="flippy"><button>Klik untuk melihat semua</button>
<div id="flippanel">
---ISI DARI SPOILER DISINI---
</div>
</div>


Jika sudah klik pulikasikan coba lihat hasilnya sobat.

Oke sekian yang bisa saya sampaikan tentang Cara Memasang Spoiler di dalam Postingan Blog Sangat Keren Terima Kasih yang sudah berkunjung semoga bermanfaat bagi kalian semua.

Related Post

Comments

Silahkan Memberikan Komentar Jika Ada Hal Yang Kurang Dipahami Dengan Topik Yang Telah Sobat Baca. Biasakan Berkomentar Dengan:

♥ Sopan dan Bahasa Yang Mudah Dipahami.
♥ Tidak Memasukkan Link Aktif Dalam Form Komentar.
♥ Berkomentar Sesuai Artikel Atau Postingan.
♥ Berilah Informasi, Jika Script Atau Link Yang Tidak Berfungsi Dan Mati.
♥ komentar Jorok / Kasar / SARA / PORNO Anggap Sebagai SPAM.
EmoticonEmoticon