Cara membuat tombol "klik show" di postingan Blog

Demo
Klik show untuk melihat

Masukkan tulisanmu di sini

Dahulu saya tidak terlalu mengerti tentang tutorial blog dan cara pembuatan nya, namun setelah cukup lama menggeluti dunia blog. saya paham beberapa tutorial yg ada dan pada postingan kali ini saya akan memberitahukan cara membuat tombol "klik show" pada postingan.

Beberapa diantara kamu mgkn sudah menegetahui bagaimana cara pembuatan nya dan bagi yg belum tau, Berikut ini akan saya sampaikan cara-caranya beserta keterangan gambar. Tutorial ini saya dapatkan dari blog yg pernah saya singgahi.

nah silakan kamu ikuti cara-cara berikut ini.

Bagi teman-teman yang ingin memasang tombol show hide di blog / postingan, caranya gampang banget nih. Teman-teman hanya perlu mengcopy paste kode HTML di bawah ini :

<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>

Lalu paste code di atas dan jangan lupa mengganti kata yang digaris tengah yang berwarna merah dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna biru dengan kata yang diinginkan.

Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.