 |
| Contoh membuat tombol buka tutup (spoiler) keren di blog. |
Kiaiblogger.com - Ibarat helm, spoiler itu semacam kaca penutup wajah yang bisa dibuka dan ditutup dengan mudah. Selain Kaskus dan Wordpress, Blogger juga didukung tombol spoiler agar postingan nampak efektif dan keren.
Antum bisa modifikasi sendiri spoiler code blogger yang ada di bawah ini. Caranya:
1. Login akun blogger Anda.
2. Pilih Tata Letak ---> Tambah Gadget ---> HTML/JavaScript.
3. Kemudian copy kode berikut ini pada postingan yang ingin ada spoiler nya, tapi di mode manhaj "HTML" bukan "Compose" yah.
<div style="margin-bottom: 2px;">
<span style="color: rgb(102 , 102 , 204);"> </span>
<br />
<div style="margin-top: 5px; text-align: left;">
<div>
<input onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'SEMBUNYIKAN'; } else{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'KLIK GAMBAR'; }" style="font-size: 10px; margin-top: 5px; padding: 0px; width: 80px;" type="button" value="KLIK GAMBAR" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background: #000000; color: white; padding: 10px; text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj31-jE_6odMknMxIcp_X9E4aNtMDYA95yjnW_FgpewSnGRTry5uEPk2r1Y-_xtAfeNdTiKx6FQLbuVJmjdVmCoazgKV5InXQDhyphenhyphenoyPDlOdr0Rlv8PV7QZWVZcOpsCk-agRaB2JQPuYp2JV/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="717" data-original-width="1149" height="398" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj31-jE_6odMknMxIcp_X9E4aNtMDYA95yjnW_FgpewSnGRTry5uEPk2r1Y-_xtAfeNdTiKx6FQLbuVJmjdVmCoazgKV5InXQDhyphenhyphenoyPDlOdr0Rlv8PV7QZWVZcOpsCk-agRaB2JQPuYp2JV/s640/5.jpg" width="640" /></a></div>
</div>
</div>
</div>
<span style="color: rgb(102 , 102 , 204);"> </span>
<br />
<div style="margin-top: 5px; text-align: left;">
<div>
<input onclick="if(this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'SEMBUNYIKAN'; } else{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'KLIK GAMBAR'; }" style="font-size: 10px; margin-top: 5px; padding: 0px; width: 80px;" type="button" value="KLIK GAMBAR" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background: #000000; color: white; padding: 10px; text-align: left;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj31-jE_6odMknMxIcp_X9E4aNtMDYA95yjnW_FgpewSnGRTry5uEPk2r1Y-_xtAfeNdTiKx6FQLbuVJmjdVmCoazgKV5InXQDhyphenhyphenoyPDlOdr0Rlv8PV7QZWVZcOpsCk-agRaB2JQPuYp2JV/s1600/5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="717" data-original-width="1149" height="398" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj31-jE_6odMknMxIcp_X9E4aNtMDYA95yjnW_FgpewSnGRTry5uEPk2r1Y-_xtAfeNdTiKx6FQLbuVJmjdVmCoazgKV5InXQDhyphenhyphenoyPDlOdr0Rlv8PV7QZWVZcOpsCk-agRaB2JQPuYp2JV/s640/5.jpg" width="640" /></a></div>
</div>
</div>
</div>
4. Selesai. Publikasikan.
Keterangan:
- Yang diwarnai merah bisa diubah semua sesuai keinginan. Kode 80px itu adalah lebar kotak tombol kliknya. Jika tulisan KLIK GAMBAR antum ganti lebih panjang menjadi misalnya "KLIK TIMBOL SPOILER BAROKAH INI", ya harus ditambah lebarnya, misal jadi 200px atau 300px.
- Selain foto, spoiler juga bisa diisi koding, teks murni, atau bahkan video. Jadi spoiler blog bukan cuma keren, tapi barokah untuk efektifitas tampilan blog.
- Yang berwarna biru adalah kode HTML gambar yang disembunyikan dalam tombol spoiler blog. Jika masih bingung cara mendapatkan kode HTML gambar untuk blog, silakan baca "Cara Mendapatkan Kode HTML Foto di Blog".
- Spoiler juga bisa dipasang sebagai tombol buka tutup blog di sidebar. Bukan cuma di postingan saja.
Hasil demo spoiler code di atas akan tampil seperti di bawah ini. Kode ini dipakai Kiaiblogger.com ketika memposting "Cara Membuat Video Youtube Autoplay (Otomatis Putar) di Blogger". Jangan kaget penampakannnya yah. Foto sudah diganti. [kiaiblogger.com]
Advertisement
