Cara Buat Tombol Hide & Show di blog

Ingin posting banyak? tapi takut terlalu panjang sekarang ada caranya dengan Hide & Show. 

Berikut penjelasannya:

Tombol Hide & Show adalah tombol untuk menyembunyikan dan menampilkan konten atau postingane dewek ini biasanya disebut spoiler. Sangat berfungsi untuk menghemat panjangnya suatu posting akibat gambar atau konten lainnya  .

berikut ini ada kode htmlnya dan ikuti caranya  lihat dibawah ini :

klik nangkene

<div><div style="margin-bottom: 2px;"><i><b><small>JUDUL SPOILER</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">



postingan



</div></div></div>

• caranya ko hanya perlu mengkopy code di atas
• ganti kalimat postingan dengan postingane ko
• selesai.. mudahhhhh kann... 

EEEE ntar dulu bila ko kepingin didalam menu hide&show halaman atau postingan berwarna bisa tambahkan kode htmlnya:

• klik disini [untuk halaman postingan]
< div style=”overflow:auto;width:700px;height:500px;border:0 solid #eee;padding:10px;”>isi artikel/postingan
• klik disini [untuk huruf postingan]

Caranya mudah:

copy paste code di atas di dalam kode Hide & Shownya

Bila belum maksud some akan berikan contohnya sekalian:

1. Untuk teks atau postingan

klik nangkene

 <div><div style="margin-bottom: 2px;"><i><b><small>klik nangkene</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">
<span style="color:#3300cc;">
postingane ko nangkene
</span>
</div></div></div>

2. untuk halaman postingan

klik nangkene

<div><div style="margin-bottom: 2px;"><i><b><small>JUDUL SPOILER</small></b></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; }" type="button"></div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">
<div style="background-color: #addfff; padding: 15px;">
<span style="color: #15317e;">


postingane ko nangkene


</span>
</div>
</div></div></div>

selesay dech bila ko pengin warna lain silahkan klik di kumpulan kode warna
Moga bermanfaat ...amiiiien
Trima kasih