Cara Menciptakan Spoiler Tombol Show/Hide Di Blog

Cara Membuat tombol show/hide spoiler keren di Blog - Menerangkan bagaimana menciptakan spoiler, fungsi spoiler sanggup menyembunyikan sebagian isi artikel (konten/widget) cara ini sangat menghemat daerah juga mengoptimalkan loading biar responsive, spoiler sangat familiar di lembaga kaskus, sanggup dibentuk pada template AMP dengan HTML JavaScript atau suplemen instruksi CSS.

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

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

Contoh Spoiler

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

Inilah cara-cara menciptakan spoiler sederhana di dalam postingan blog

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

1. Spoiler Box Show/hide button tanpa edit template

Tampilannya :

Contoh Spoiler

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:

instruksi 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="Cara Membuat Spoiler Tombol show/hide di Blog" type="button">BUKA👆TUTUP</button>

#3 Cara Membuat Spoiler dengan suplemen CSS

Spoiler ini dibentuk dengan edit Template dan menciptakan tombol spoiler per postingan sanggup 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 instruksi dibawah ini dan pasang sempurna diatas kode ]]></b:skin>

kodenya:

.spoiler{background:#AEC7D6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBJm6mwMQO1Q8pBl5ZxZKSqZ30f4tw47ZrXLswE_yZ6541M0ltFIKsn6SqL4D2w6fptehLyhGGAGVLsmvdbPDW8yPfONoBbYq2hyphenhyphenqZmIwnvu5Cwo1zZ5DQBUHazCfo5EdL8BDvydInK34/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 gres untuk menciptakan postingan yang akan dipasang spoiler,
Masuk ke mode HTML
Pasang instruksi berikut pada HTML postingan

instruksi 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 sanggup rubah tampilan "TUTUP / BUKA" sesuai selera.
Merah: Masukan KONTEN Anda ibarat gambar, video, teks, dll.

Kesimpulan dalam membat Spoiler pada blog

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

Tips:

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

Baca juga: Cara Membuat Tabel di Blog dengan MS Word