Script membuat Tombol Klik Show hide di posting Blog

Cra membuat Tombol show/hide pada artikel blog, tentunya sangat berguna bagi anda para pemblogger, karna hal ini akan mempersingkat isi dari posting anda, untuk membuat yombol show /hide ini hampir sama dengan menempatkan sebuah gambar atau text anda di bawah bingkai yang sering anda liat di web atau blog yang anda kunjungi dan pada artikelnya disebunyikan dan kalu kita ingin melihatnya kita harus klik pada suatu tombol show/hide untuk menampilkan isi posting atau gambar di posting tersebut.

Mungkin sobat lebih paham apa yang dimaksud dengan Spoiler, untuk memperjelas anda bisa langsung liat atau klik show/ hide tombol dibawah ini :

Klik show untuk melihat

Oky Untuk membuat Tombol klik show/hide.
Berikut ini akan saya sampaikan langkah-langkah pembuatan tombol klik show/hide Sebelum kita mulai silahkan liat tutorial dan ikuti langkah di bawah ini :

1. Login ke blogger anda.
2. Setelah itu Buatlah posting baru terlebih dahulu.
3. klik edit HTML yang ada di sebelah Compose

4. Letakan kode di bawah ini sesuai keinginan anda

<div>
<div style="margin-bottom: 2px;">
<b><small>Klik show untuk melihat</small></b>
<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: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
MASUKAN TULISAN/GAMBAR ANDA DI SINI
</div>
</div>
</div>

NB : huruf yang berwarna (hijau) bisa anda ganti sesuka anda SILAHKAN BUKA / SILAHKAN TUTUP atau yang lainya sesuka anda, Untuk huruf yang berwarna (merah) adalah isi dari tulisan/gambar anda yang disembunyikan

Sekian dulu tutorial tentang membuata tombol klik show/hide di posting blog, selanjutnya bisa anda kembangkan sendiri sekian moga bermanfaat.

Anda baru saja membaca artikel tentang - Script membuat Tombol Klik Show hide di posting Blog. Silahkan baca artikel berikutnya Tentang - - Jangan lupa g+1 / fb / twit :)