Cara Menciptakan 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 sanggup kita gunakan spoiler konten. Karena konten spoiler membantu menyembunyikan dan mengatakan ayat-ayat tertentu. Terkadang hal-hal opsional yang sanggup kami tunjukkan dengan spoiler konten dan juga dipakai dalam kasus arahan widget presentasi blok dengan menampilkan dan menyembunyikan pilihan. Efek ini juga dikenal sebagai spoiler atau mengintip. Meskipun aku harus membuatkan gambar widget spoiler dan dalam tutorial ini aku akan mengatakan cara ihwal spoiler konten.

Cara Membuat Tombol Spoiler Show dan Hide Keren Pada Blog

Berikut langkah langkahnya semoga 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 arahan 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 menyerupai 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 memakai tombol khusus ini Anda harus menambahkan arahan dalam tampilan HTML ketika menulis Postingan Blog. Hanya menulis posting dan dari modus Posting Editor Pilih HTML. Sekarang tambahkan arahan 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 alhasil dibawah ini

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