Membuat Spoiler Pada Blog
Mungkin anda pada sering lihat Spoiler seperti berikut di forum-forum
seperti KASKUS dan lain lain...
Judul Isi Spoiler
Apa Anda Bingung Bagai Mana Cara Membuatnya..??
baiklah kalau begitu... kita mulai saja belajar bagai mana sebenarnya cara membuat Spoiler di Blog..
Pertama-tama kita harus mengerti dahulu apa maksud dari Spoiler tersebut..
Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten Blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain Spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca Blog untuk membuka atau tidak isi Spoiler.
Ok.. kita langsung saja merakitnya jika anda sudah paham maksud dari Spoiler..
Berikut kode yang bisa digunakan dalam membuat Spoiler di Blog :
<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul atau isi konten </span></i><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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi dari spoiler atau Konten anda<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Judul atau isi konten </span></i><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 class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
</div></div></div></div>
Semoga Berhasil dan Bisa Bermanfaat bagi anda pecinta Blogger..
RSS feed for comments on this post.
Leave a comment