Cara membuat Tombol Klik Show / Hidden di Postingan Blog

Apa itu tombol Klik Show / Hidden Pada postingan?? Sobat penasaran, atau memang sedang mencari artikel yang membahas tentang hal ini... Berikut ini akan saya coba berbagi tips mengenai cara-caranya beserta keterangan gambar. Bagi teman-teman yang ingin memasang tombol show hidden di blog / postingan, caranya gampang. Sobat hanya perlu mengcopy paste kode HTML di bawah ini ke dalam postingan sobat blogger:
pertama masuk di akun Blogger
==> lalu klik post
==> dan klik html (bukan compose)
==> lalu copy paste html berikut ini:

Klik: :

<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</small></b>
<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;">
Masukkan tulisanmu di sini
</div></div></div>

Maka Akan seperti ini:

Klik show untuk melihat

Seperti inilah tampilan yang akan mengisi postingan sobat blogger. sobat blogger bisa memasukkan sedikit atau banyak kata ke dalam postingan ini...

nah kalau yang satu ini bisa sobat masukan gambar sesuai keinginan sobat

Klik: :

</div>
<div style="text-align: center;">
<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 1px;">
<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 = 'HATI-HATI !!!'; }" style="font-size: 14px; margin: 0px; padding: 0px; width: 250px;" type="button" value="HATI-HATI !!!" /></div>
<div class="alt2" style="border: 0px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<img border="0" height="320" src="Masukan Link photo yang anda inginkan" width="300" /></div>
</div>
</div>
</div>
</div>

Maka akan seperti ini:

Ada satu lagi sob yang agak unik

Klik: :

<!---Start code show hide by;"afa aprilion-amigos.net"--->
<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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin-top: 5px; width: 60px;" type="button" value="Buka" /> </div>
<div style="background-color: black; border-bottom: 2px solid #ff0000; border-left: 20px solid #ff6600; border-right: 2px solid #ff0000; border-top: 2px solid #ff0000; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="color: white; font-style: italic;">
... Isi Teks Sobat...
</span></div>
</div>
</div>
<!---End code show hide by;"afa aprilion-amigos.net"--->

Maka akan seperti ini:

... Isi Teks Sobat...

Keterangan ;
Code; <div style="margin-top: 5px; text-align: left;"> ; merupakan code untuk penempatan tombol Buka Tutupnya.. Mau sobat taruh di sisi kiri dengan code left. Untuk ditengah dengan code center. Untuk di sisi kanan dengan code right. ingat, hanya ubah yang berwarna merah aja ya soob.
Code; Tulisan Tutup Buka Buka yang berwarna merah, silakan sobat ganti debgan sesuka sobat.
Code; width: 60px ; Yang berwarna merah tersebut Merupakan nilai ukuran lebar dari tombol Buka Tutup tersebut.. Silakan juga sobat rubah sesuai keinginan sobat.Tapi hanya sobat rubah nilainya saja yaa.
Code; ... Isi Teks ... ; Ganti dengan Isi artikel sobat sendiri, atau terserah sobat lah... hehehehehee.

TERIMAKASIH ATAS KUNJUNGANNYA YA......

Ditulis Oleh : Unknown ~ Tips dan Trik Blogspot

Sobat sedang membaca artikel tentang Cara membuat Tombol Klik Show / Hidden di Postingan Blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya <a href="http://yuliabloggerindonesia.blogspot.com/2013/06/cara-membuat-tombol-klik-show-hidden-di.html" target="_blank">Cara membuat Tombol Klik Show / Hidden di Postingan Blog</a>