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.
Title : Cara Mudah Membuat Tombol Hide Show di Blog
Description : Saat pertama kali melihat tombol spoiler hide show saya di suatu forum. Terlihat gambar yang disembunyikan dengan hanya nampak tombol show...
Related Posts :
