Cara Mudah Membuat Tombol Hide Show di Blog

Saat pertama kali melihat tombol spoiler hide show saya di suatu forum. Terlihat gambar yang disembunyikan dengan hanya nampak tombol show. Jika kita mengklik tombol tersebut (atau show) maka gambar atau tulisan dalam kotak tersebut akan muncul.

Memang belajar blog tak akan pernah habisnya selalu muncul pertanyaan-pertanyaan baru saat kita memulai membuat blog, termasuk saya yang masih banyak yang belum saya ketahui tentang membuat blog agar tampil dengan sempurna.

Kali ini saya akan membagi tips dan cara membuat tombol hide show di blog kita. Saya akan mencoba memberi contoh dan penampakan nya langsung tombol hide show di postingan kali ini. Berikut ini kata contoh yang akan dijadikan hide show.

Download Template Ringan SEO. Hai para sahabat blogger, kali ini kami akan memberikan download template yang ringan dan SEO. Template ini berdesain simple dan pastinya sangat ringan untuk blog kamu. Kami beberapa waktu lalu juga memberikan template blogger yang ringan dan super SEO lainnya disini.

Setelah memakai script hide show maka akan tampak seperti dibawah ini :

Oke kita pelajari bersama sama cara membuat tombol hide show secara detail pada postingan :

Buka halaman untuk menulis artikel dalam keadaan HTML bukan compose. Setelah halaman yang html dibuka copy pastekan kan script untuk hide show nya di bawah ini.

<div id="spoiler">   

<div style="margin: 5px 20px 20px;">   

<div class="smallfont" style="margin-bottom: 2px;">  <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: 11px; margin: 0px; padding: 0px; width: 75px;" type="button" value="Show" /></div>  <div class="alt2" style="-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; background: rgb(225, 228, 242) none repeat scroll 0% 0%; border: 1px inset; margin: 0px; padding: 6px;">  <div style="display: none;">   

Tulis artikel di sini

</div>   

</div>
</div>   

Silahkan isi kata merah diatas dengan artikel kamu atau gambar ..... maka akan menjadi tulisan ataupun gambar yang di hide show.

Selamat mencoba tips diatas membuat tulisan kita ataupun gambar kita ter hide show. Cara hide show ini dapat mempercepat loading blog kita ataupun dapat menjadikan tulisan kita lebih rapi.