Membuat Tombol Show dan Hide di Blog

Membuat Tombol Show dan Hide di Blog

Berikut ini saya akan belajar tentang gimana membuat tombol show agar menampilkan tulisan seperti ini
Klik show untuk melihat
Masukkan tulisanmu di sini


sekian lama saya mencari tutoriallnya di internet ketemu juga akhirnya caranya gini ikuti saya ya gampang kok 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>



Entri melalui HTML Jangan melalui Compose seperti tanda panah pada gambar di bawah:






 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 atas dana .

0 komentar:

Posting Komentar

YOUNG'S BLACK TAMPLATE © 2008. Design by :Yanku Templates Sponsored by: Tutorial87 Commentcute