CARA MEMBUAT SPOILER UNTUK BLOG

Kali ini saya akan berbagi bagaimana saya dapat membuat “Spoiler untuk Blog” saya , mungkin bagi sobat-sobat blogger sudah banyak yang ahli, namun saya hanya mencoba mengarsipkan apa yang saya pelajari sehingga setiap kali lupa saya dapat membukanya kembali catatn saya. Ketika semua sudah tau dan dipelajari serta diperaktekan “cara mengoptimalkan blog” ternyata semua menjadi mudah. Trik ini saya dapatkan
dari Blog Triks disana lumayan banyak panduan-panduan tentang blog. Seperti apa ya spoiler itu, mari kita simak langsung saja

Contoh Spoiler:

Seperti ini yang dimaksud spoiler
Dikotak ini sobat bisa isi gambar , Link, atau teks apa saja
Ini contoh Gambar :

Fungsi dari Spoiler tersebut salah satunya mengurangi beban loading page , misalnya kita pasang image di artikel yang resolusinya besar maka dengan adanya spoiler image tersebut tidak akan di load langsung jika pembaca nya tidak membuka spoilernya. Fungsi lainnya tentu kita dapat menghemat space artikel. Di bawah ini saya sertakan kode HTML untuk membuat spoiler , silahkan di coba bagi yang ingin memasang spoiler.

Kode HTML untuk membuat Spoiler:

<*div style="margin: 5px 20px 20px;"> <*div class="smallfont" style="margin-bottom: 2px;"> <*b>Contoh Spoiler< /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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" />< /div> <*div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"> <*div style="display: none;">
Masukkan isi spoiler disini, baik gambar , link, atau teks dan lain lain
Catatan : Hapus tanda * (bintang)
<*/div>
<*/div>
<*/div>

Demikian “Cara membuat Spoiuler untuk Blog”
Semoga bermanfaat.... :)