Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog

Banyak posting Blog kita menggunakan sumber paragraf atau kutipan persis apa yang diterbitkan. Hal ini kita dapat menggunakan spoiler konten. Karena konten spoiler bantuan untuk menyembunyikan dan menunjukkan ayat tertentu. Kadang-kadang hal-hal opsional kita dapat menunjukkan dengan spoiler konten dan juga digunakan dalam kasus kode widget blok presentasi dengan menunjukkan dan menyembunyikan pilihan. Efek ini juga dikenal sebagai spoiler atau mengintip. Meskipun saya harus sudah berbagi Gambar spoiler widget dan dalam tutorial ini saya akan menunjukkan jalan tentang spoiler konten.

Berikut langkah langkahnya agar tampilan tombol spoiler lebih menarik :
01. Pada blogger anda pergi ke Blogger Dashboard
02. klik Template - Edit HTML
03. Temukan ]]></b:skin> temukan dengan cara CTRL + F
04. 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;}

05. Temukan </head> dengan CTRL + F
06. 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>

07. 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>

08. Save Template
09. 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 :
a. Untuk menambahkan teks pada Spoiler hanya mengganti ADD TEXT HERE
b. Untuk menambahkan Gambar di Spoiler hanya mengganti URL IMAGE HERE

Aku apalah daya. Beginilah Tombol Spoiler Show dan Hide pada blog..

Aku apalah daya. Beginilah Tombol Spoiler Show dan Hide pada blog..

Begitulah Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog. Sekian dan terima kasih telah berkunjung dan sama sama kita belajar. Sampai jumpa di artikel berikutnya...