6 Cara Menciptakan Tombol Tutup Buka (Spoiler) Di Postingan Blog

komputerdia.com - Tombol spoiler atau sering dikenal juga dengan tombol tutup dan buka (show & hide) merupakan suatu fitur yang dapat kalian buat didalam suatu postingan blog.

Fungsi utama dari tombol ini yakni untuk menyembunyikan isi konten artikel yang kalian buat kedalam suatu box dan kalau pengunjung blog kalian menekan tombol spoiler tersebut, maka secara otomatis konten didalam box tersebut akan terbuka.

Selain klarifikasi diatas, ada juga yang mendefinisikan, bahwa pengertian Spoiler yakni salah satu fitur yang dipakai untuk menyimpan posting konten (teks, foto atau video) tersembunyi yang dapat dilihat kalau pembaca meng-klik tombol.

Pembaca juga dapat menyembunyikan kembali posting dengan menekan ulang tombol tersebut. Sementara fungsi spoiler itu sendiri yakni untuk menghemat space (tinggi) posting, mempercepat loading halaman, dan menghemat kuota pembaca.

Dibawah ini aku akan menjelasakan 10 cara bagaimana menciptakan tombol spoiler yang dapat kalian gunakan didalam postingan artikel kalian.

Baca Juga Artikel Lainnya:

• Cara Praktis Membuat Halaman Statis (Static Pages) di Blogger .
• Cara Membuat Menu Bar Responsive dan Keren Tanpa Edit Html Di Blog .

10 Variasi Membuat Tombol Spoiler Di Blog

1. Spoiler Default

<div id="spoiler"> <div><input style="font-size: 11px; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan Konten'; }" name="button" type="button" value="Tampilkan Konten" /></div> <div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">  ini yakni referensi dari spoiler pertama   </div><div id="hide"></div></div> 

2. Spoiler Style Text

<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"><b>[Tampilkan Konten]</b></a><span id="spoiler_id" style="display: none;"><a class="link" onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';"><b>[Sembunyikan Konten]</b></a><br /> <br/>  Letakkan isi konten kalian disini  </span>

3. Spoiler With Border Color

<div style="text-align: left;"> <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="-moz-border-radius: 2px; -webkit-border-radius: 2px; background-color:  #FFF8DC; border-radius: 2px; border: 3px solid #00008B; color: black; width: 250px;" type="button" value="Tampikan Konten" /></div> <div style="padding:10px; text-align: justify;"> <div style="display: none;">   Masukkan konten kalian disini  </div> </div>

4. Spoiler With Full Border Color

<div style="margin-bottom: 2px;"><div style="margin-top: 5px; text-align: left;"><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 Konten'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan Konten'; }" style="font-size: 15px; margin-top: 5px; width: 150px;" type="button" value="Tampilkan Konten" /> </div><div style="background-color: no; border-bottom: 2px solid #00008B; border-left: 20px solid  #00008B; border-right: 2px solid #00008B; border-top: 2px solid #00008B; margin: 0px; padding: 6px;"><div style="display: none;"> <span style="color: black; font-style: regular;"><span style="color: black; font-family: Verdana, sans-serif;">  <b>Simpan Konten Artikel Kalian Disini</b>  </span></span></div></div></div>

5. Spoiler With Title

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>SimBale</b>: <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;">   KODE KONTEN DISINI OK   </div> </div>

6. Spoler Dengan Gambar

<div style="margin: 5px 20px 20px;"> <div class="smallfont" style="margin-bottom: 2px;"> <b>Judul Spoiler</b>: <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;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJRFRQjQAAFKZXqtJyS2oN-revxLfbxhrPHAsxiye3NM9F-u7JSWDg_P48gQq00yFTFS5n1WyhjI3OXnYLbvdTCSO2ndPOD5YyvsMoDvKbyGyyciZSiIWQ9zqEBUCLXfLDmLWuI06bDNG/s640/65442%2523%2521%2540%2523%2521%2523%2540%2521%2523+copy.png" imageanchor="1"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieJRFRQjQAAFKZXqtJyS2oN-revxLfbxhrPHAsxiye3NM9F-u7JSWDg_P48gQq00yFTFS5n1WyhjI3OXnYLbvdTCSO2ndPOD5YyvsMoDvKbyGyyciZSiIWQ9zqEBUCLXfLDmLWuI06bDNG/s640/65442%2523%2521%2540%2523%2521%2523%2540%2521%2523+copy.png" /></a> <img border="0" /></div> </div> </div>

Kelebihan Spoiler di Blog

• Menghemat space (tinggi) posting
• Mempercepat loading halaman blog, dan 
• Menghemat kuota pembaca.
• Bisa untuk menyembunyikan keyword tertentu untuk optimalisasi posting (tidak dianjurkan)
• dan lainnya (bisa teman tambahkan dengan menulis di kolom komentar)

Kekurangan Spoiler di Blog

• Blog akan ditinggalkan pengunjung. Tidak semua pengunjung mengerti cara membuka spoiler, ataupun ada pengunjung yang malas membuka spoiler
• Permasalahan ini, aku belum tahu pasti, apakah mesin pencari juga mengindeks isi spoiler atau tidak. Bagi teman yang tahu, silakan komen dibawah.
• dan lainnya (bisa teman tambahkan dengan menulis di kolom komentar)

Sumber https://www.komputerdia.com/