Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog

Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog - Banyak posting Blog yang kami gunakan sumber paragraf atau tepatnya kutipan apa yang diterbitkan. Ini bisa kita gunakan spoiler konten. Karena konten spoiler membantu menyembunyikan dan menunjukkan ayat-ayat tertentu. Terkadang hal-hal opsional yang dapat kami tunjukkan dengan spoiler konten dan juga digunakan dalam kasus kode widget presentasi blok dengan menampilkan dan menyembunyikan pilihan. Efek ini juga dikenal sebagai spoiler atau mengintip. Meskipun saya harus berbagi gambar widget spoiler dan dalam tutorial ini saya akan menunjukkan cara tentang spoiler konten.

Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog

Berikut langkah langkahnya agar tampilan tombol spoiler lebih menarik :

1. Pada blogger anda pergi ke Blogger Dashboard
2. klik Template - Edit HTML
3. Temukan ]]></b:skin> temukan dengan cara CTRL + F
4. Copy kode dibawah ini dan paste sebelum ]]></b:skin>

#content-spoiler {text-align:center;}
#content-spoiler button{margin:10px auto;cursor:pointer;background-color:#5a6269;color:#fff;padding:10px 14px!important;text-transform:uppercase;border:none;font-size:14px;transition:all .3s ease-out}
#content-spoiler button:hover, #content-spoiler button:focus {outline:none;opacity:1;color:#fff;}
#spoilerpanel {padding:1px;text-align:left;background:#fafafa;border:1px solid #e6e6e6;}
#spoilerpanel {padding:24px;display:none;}
#spoilerpanel img {background:#f5f5f5;margin:10px auto;}

5. Temukan </head> dengan CTRL + F
6. Copy script dibawah ini dan Paste sebelum </head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//Spoiler
$(document).ready(function(){$("#content-spoiler").click(function(){$("#spoilerpanel").slideToggle("normal")})});
</script>

7. Jika template anda sudah berisi Jquery terbaru maka Anda tidak perlu menambahkan File jquery seperti dibawah in. Hapus saja Jquery pada langkah 06... !!

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

8. Save Template
9. Sekarang cara kerjanya menggunakan tombol khusus ini Anda harus menambahkan kode dalam tampilan HTML saat menulis Postingan Blog. Hanya menulis posting dan dari modus Posting Editor Pilih HTML. Sekarang tambahkan kode di bawah :

<div id="content-spoiler">
<button>Content Spoiler</button></div>
<div id="spoilerpanel">
ADD TEXT HERE
<div class="separator" style="clear: both; text-align: center;"><a href="IMAGE URL HERE" style="margin-left: 1em; margin-right: 1em;"><img src="IMAGE URL HERE" style="border: none;" /></a></div>
ADD TEXT HERE
</div>
</div>

10. Lihat hasilnya dibawah ini

Keterangan :

1. Untuk menambahkan teks pada Spoiler hanya mengganti ADD TEXT HERE
2. Untuk menambahkan Gambar di Spoiler hanya mengganti URL IMAGE HERE

Demikian informasi tentang Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog. Maaf jika ada kekurangan, silahkan tambahkan beberapa kekurangan pada artikel di kolom komentar. Saya harap informasi ini bermanfaat.