Membuat Tombol Show Hidden pada postingan

Hai Para Sobat...

Kali ini saya akan share mengenai cara membuat tombol show hidden, yang kita tempat disela-sela postingan
Kegunaan show hidden pada postingan, salah satunya untuk penghematan tempat postingan, kegunaan lainya bisa digunakan untuk mengkelompokan code-code html, supaya tidak tercampur dengan kata dan kalimat lainya dalam postingan kita, bisa juga untuk buka-tutup gambar.

Contoh penggunaan pada kata-kata  :

Postingan ini hanya untuk berbagi, dari kita untuk kita dan demi kita.
Salam kompak para blogger Indonesia

Penggunaan dengan gambar :

Penggunaan untuk COde HTML

Belajar...
Belajar..
Belajar..
dan belajar....>>>

Cara pembuatanya sebagai berikut :

Buat Postingan Baru.

Buka halaman untuk menulis artikel dalam keadaan HTML bukan compose. Setelah halaman yang html dibuka copy pastekan kan script untuk hide show nya di bawah ini.

 

<div id="spoiler">   

<div style="margin: 5px 20px 20px;">   

<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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Show" /></div>  <div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(225, 228, 242) none repeat scroll 0% 0%; border: 1px inset; margin: 0px; padding: 6px;">  <div style="display: none;">   

Tulis artikel di sini

</div>   

</div>
</div>   

Artikel Terkait :