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 perhiasan arahan CSS.
Spoiler ialah format bingkai untuk menyembunyikan sebagian teks, gambar atau kode, Awalnya saya ingin menciptakan sunting sub judul menyerupai Wikipedia pada tampilan seluler tapi tidak menemukan caranya hasilnya ada cara ini tidak beda jauh berbeda.
Walau tidak menyerupai Wikipedia tapi tidak apa-apa hampir sama namanya spoiler jikalau di lihat macamnya box buka tutup (show/hide) boks button banyak teladan stiyle menyerupai ini:
Spoiler ialah format bingkai untuk menyembunyikan sebagian teks, gambar atau kode, Awalnya saya ingin menciptakan sunting sub judul menyerupai Wikipedia pada tampilan seluler tapi tidak menemukan caranya hasilnya ada cara ini tidak beda jauh berbeda.
Walau tidak menyerupai Wikipedia tapi tidak apa-apa hampir sama namanya spoiler jikalau di lihat macamnya box buka tutup (show/hide) boks button banyak teladan stiyle menyerupai 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 arahan 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>
<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:
arahan 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 Tombol Spoiler show/hide di Blog" type="button">BUKA👆TUTUP</button>
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 Tombol Spoiler show/hide di Blog" type="button">BUKA👆TUTUP</button>
#3 Cara Membuat Spoiler dengan perhiasan 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 arahan 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 arahan berikut pada HTML postingan
arahan 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>
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>
<div style="display: none;">
<br />
Masukan Kode/foto/file video/Widget Anda</div>
</div>
</div>
- 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 menyerupai 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 jikalau 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 hasilnya ada yang tahu.
Baca juga: Cara Membuat Tabel di Blog dengan MS Word
