Tips membuat spoiler di blogspot

Lagi sibuk banget nih akhir-akhir ini, jadinya blog saya deh yang kena dampak sindrom lama ga ada postingan. Akhirnya daripada nanti ketunda-tunda lagi, mendingan saya posting sesuatu aja deh, yang simpel-simpel aja lah. Soalnya tau enggak sekarang jam berapa? jam 01.05 dini hari lho! hehe Kayaknya saya udah kena penyakit insomnia nih. >.< Yaudahlah langsung aja sesuai judulnya. Terkadang kita pingin banget nampilin gambar-gambar di blog kita biar pengunjung menjadi jelas tentang kemana arah tutorial kita. Tapi penampilan gambar ini tampaknya bagai pedang bermata dua bagi para pengunjung(aseek bahasanya :D). Soalnya selain manfaatnya yang membuat petunjuknya jadi lebih jelas, mereka juga bisa membuat tampilan halaman blog kita jadi lama alias lemot alias lelet bin i hate slow :D. Nah akhirnya saya menyiasatinya dengan menyelipkan gambar tersebut didalam spoiler. Tau enggak apa itu spoiler? Yah elah masa ga tau sih, cari sendiri lah artinya hehe pelit mode on.

Nah untuk menampilkan spoiler ini cukup dengan memasukkan skrip berikut :

<div id="spoiler">
<div><input type="button" value="Tampilkan" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
Teks yang disembunyikan/yang berada di dalam spoiler
</div>
</div>
</div>

Nanti jadinya kayak gini nih :

Teks yang disembunyikan/yang berada di dalam spoiler

Kalo mau gambar yang di selipin ya tinggal ganti teks nya dengan url gambar. misalnya nih skripnya begini :

<div id="spoiler">
<div><input type="button" value="Tampilkan" style="margin:0px;padding:0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://mylovefood.files.wordpress.com/2011/02/soto.jpg" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="353" width="500" src="http://mylovefood.files.wordpress.com/2011/02/soto.jpg" /></a></div>
</div>
</div>
</div>

Sedangkan hasilnya akan menjadi seperti ini nanti

Gimana? Mudah bukan? Semoga bermanfaat :)

Monetize your website traffic with US
Monetize your website traffic with Me

Tweet