Cara Membuat Tombol Spoiler show/hide di Blog

Cara Membuat tombol show/hide spoiler keren di Blog - Menerangkan bagaimana membuat spoiler, fungsi spoiler dapat menyembunyikan sebagian isi artikel (konten/widget) cara ini sangat menghemat tempat juga mengoptimalkan loading agar responsive, spoiler sangat familiar di forum kaskus, dapat dibuat pada template AMP dengan HTML JavaScript atau tambahan kode CSS.

Spoiler adalah format bingkai untuk menyembunyikan sebagian teks, gambar atau kode, Awalnya saya ingin membuat sunting sub judul seperti Wikipedia pada tampilan seluler tapi tidak menemukan caranya akhirnya ada cara ini tidak beda jauh berbeda.

Walau tidak seperti Wikipedia tapi tidak apa-apa hampir sama namanya spoiler jika di lihat macamnya box buka tutup (show/hide) boks button banyak contoh stiyle seperti ini:

Contoh Spoiler

DI SINI YANG DI ISI TULISAN DLL

Bagaimana cara membuat tombol showpostthumbnails yang menampilkan bentuk atau gambar kecil bilamana di klik akan terbuka jendela selanjutnya menampilkan semua yang tersembunyi.

Inilah cara-cara membuat spoiler sederhana di dalam postingan blog

Buka blog -> Dashboard blog anda-> Entri baru/edit -> Masukan kode JavaScript pada HTML

1. Spoiler Box Show/hide button tanpa edit template

Tampilannya :

Contoh Spoiler

ISINYA TU DI SINI

kodenya:

<br /></div>
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<span style="font-size: x-small;">Contoh  Spoiler</span><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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div dir="ltr" style="text-align: left;" trbidi="on">
ISI APA? AJA DI SINI </div>
</div>
</div>
</div>

2. Spoiler model Knob Down Button dipostingan

Tampilannya:

kode BUKA/TUTUP:

<div id="spoiler" style="display: none;">
KONTEN DISINI</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" style="background: royalblue; border: 1px solid blue; color: white; padding: 5px 50px 5px 50px;" title="Klik untuk membuka spoiler" type="button">BUKA👆TUTUP</button>

#3 Cara Membuat  Spoiler dengan tambahan CSS

Spoiler ini dibuat dengan edit Template dan membuat tombol spoiler per postingan bisa kita lihat pada demo dibawah ini:

Cara Membuat Spoiler dengan CSS di Blog

1. Silahkan login ke blog anda -> masuk Template -> Edit HTML -> Cari kode: ]]></b:skin>
2. Pasang kode dibawah ini dan pasang tepat diatas kode  ]]></b:skin>

kodenya:

.spoiler{background:#AEC7D6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSMhBfiOTnoBXsqwApTZ_PVXH9Uko7vCYrOy0gTwXglhzkVzEte1_G24Dcl27WX-rENxF18va3BcO3DcYQFXLN4xxxmxtVor3zncR4YFYDPkjXSXaA7g4or6ZGCKQYWcySvmbqWKazeGY/s1600/line_back.png) repeat-x;border:1px solid #ddd;padding:3px}.spoirel{font-family:Roboto Slab;font-size:12px;color:#555;margin-bottom:0;font-weight:bold;text-align:left;margin:1px;}

Jika sudah Simpan

3. Membuat pada postingan

• Buat post baru untuk membuat postingan yang akan dipasang spoiler,
• Masuk ke mode HTML
• Pasang kode berikut pada HTML postingan

kode pada artikel:

<div class="spoirel">
Titel/judul <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 = 'TUTUP'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="color: saddlebrown; float: right; font-family: arial; font-size: 10px; font-weight: bold; margin: 2px; text-transform: uppercase;" type="button" value="LIHAT" /></div>

<div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; padding: 0px; text-align: center;">
<div style="display: none;">
<br />
Masukan Kode/foto/file video/Widget Anda</div>
</div>
</div>

Pedoman:

• Biru: Bisa memasukkan judul pada title diatas, kaku tidak cukup hapus saja.
• Hujau: Anda bisa rubah tampilan "TUTUP / BUKA" sesuai selera.
• Merah: Masukan KONTEN Anda seperti gambar, video, teks, dll.

Kesimpulan dalam membat Spoiler pada blog

Memasang spoiler memang sangat menyenangkan apalagi anda yang suka desain blog sebagai bahan kreasi tapi ada beberapa kekurangan dan kelebihan ketika memasang diantaranya:
Kelebihan: dapat menghemat ruang penataan Artikel juga fast loading, kekurangannya: spoiler sering dilewatkan oleh pengunjung jika tidak penting penting amat.

Tips:

Untuk konten yang sangat penting dan mengandung unsur keyword yang dapat terdeteksi Mesin Pencari saya sarankan agar tidak dimasukan dalam Spoiler, untuk apa disembunyikan toh kalau akhirnya ada yang tahu.

Baca juga: Cara Membuat Tabel di Blog dengan MS Word