Cara Membuat Tombol Buka Tutup atau Spoiler Pada Postingan Blog

Salam hangat.kita jumpa lagi masih bersama hansjlkcommunity,pada kesempatan ini saya akan sedikit mengulas tentang Cara Membuat Tombol Spoiler Pada Postingan Blog,tombol spoiler cukup penting di gunakan selain untuk sedikit bergaya juga bisa di gunakan untuk pembuatan artikel panjang karena dengan menggunakan tombol spoiler akan menghemat halaman posting,dalam artian lain spoiler berfungsi untuk menyembunyikan suatu artikel dengan sistem buka tutup,jadi pada intinya dengan kita membuak tombol spoiler maka secara otomatis halaman dari spoiler itu terbuka begitupun sebaliknya gimana sobat mau mencobanya gak....?

Baiklah buat sobat yang ingin mencoba Cara Membuat Tombol Spoiler Pada Postingan Blog bisa kalian gunakan script di bawah ini.


Catatan : Dalam penggunaan tombol spoiler ini kalian copy scriptnya dan pastekan pada HTML bukan Compase ya...awas jangan sampai salah.

<div align="left" style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<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="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Buka" /></div>
<div class="alt2">
<div style="display: none;">
<div style="border: medium none; padding: 10px; text-align: left;">
Silahkan letakan kalimat atau HTML disini
</div>
</div>
</div>

Silahkan letakan kalimat atau HTML disini

Versi 2

<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'; }" name="button" type="button" value="rezdown7 spoiler" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">

KONTEN ANDA DISINI...

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

KONTEN ANDA DISINI...

versi 3

<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';">[Show]</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='';">[Hide]</a><br /> ---REPLACE KONTEN DISINI GAN--- </span>

[Show][Hide]
---REPLACE KONTEN DISINI GAN---

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: