6 Cara Membuat 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 bisa kalian buat didalam suatu postingan blog, dimana fungsi utama dari tombol ini adalah untuk menyembunyikan isi konten artikel yang kalian buat kedalam suatu box dan jika pengunjung blog kalian menekan tombol spoiler tersebut, maka secara otomatis konten didalam box tersebut akan terbuka.

Dibawah ini saya akan menjelasakan 10 cara bagaimana membuat tombol spoiler yang bisa kalian gunakan didalam postingan artikel kalian.

Baca Juga :

10 Cara Membuat Tombol Tutup Buka (spoiler) Di Postingan Blog

10 Variasi Membuat Tombol Spoiler Di Blog


1. Spoiler Default

10 Cara Membuat Tombol Tutup Buka (spoiler) Di Postingan Blog

<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 adalah contoh dari spoiler pertama 

</div><div id="hide"></div></div>

2. Spoiler Style Text

10 Cara Membuat Tombol Tutup Buka (spoiler) Di Postingan Blog
<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

10 Cara Membuat Tombol Tutup Buka (spoiler) Di Postingan Blog
<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

10 Cara Membuat Tombol Tutup Buka (spoiler) Di Postingan Blog
<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

10 Cara Membuat Tombol Tutup Buka (spoiler) Di Postingan Blog
<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

10 Cara Membuat Tombol Tutup Buka (spoiler) Di Postingan Blog
<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://3.bp.blogspot.com/-IvHKhcaJ4R8/WbRyCBA5EnI/AAAAAAAAE38/_YLWDlIvo5IdjkgenExEkH-wokPSSXKEACLcBGAs/s640/65442%2523%2521%2540%2523%2521%2523%2540%2521%2523%2Bcopy.png" imageanchor="1">
<img border="0" src="https://3.bp.blogspot.com/-IvHKhcaJ4R8/WbRyCBA5EnI/AAAAAAAAE38/_YLWDlIvo5IdjkgenExEkH-wokPSSXKEACLcBGAs/s640/65442%2523%2521%2540%2523%2521%2523%2540%2521%2523%2Bcopy.png" /></a>
<img border="0" /></div>
</div>
</div>


.
.

Berlangganan Artikel terbaru (free):

Post a Comment