Cara Mudah Membuat Tombol Hide Show di Blog

Artikel

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.

Info-Gamepc.tk adalah situs penjual game pc online. Menjual beberapa koleksi game pc bajakan yang diburn dalam bentuk kepingan DVD dan dikirim ke alamat tujuan dengan tepat waktu. Berbagai dvd game yang saya jual disitus ini 100% bekerja dan sudah saya tes terlebih dahulu sebelum dijual kepada anda.

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

Info-Gamepc.tk adalah situs penjual game pc online. Menjual beberapa koleksi game pc bajakan yang diburn dalam bentuk kepingan DVD dan dikirim ke alamat tujuan dengan tepat waktu. Berbagai dvd game yang saya jual disitus ini 100% bekerja dan sudah saya tes terlebih dahulu sebelum dijual kepada anda.

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>