Membuat spoiler ( hide & show gambar di blogspot )

By HP Yitno

Dear Sahabat,Lama berkecimpung di dunia maya tidak menjamin tahu segalanya contohnya ane. Ane sudah lama mengenal blog, tapi banyak yang saya tidak tahu. Lama atau tidak bagiku bukan masalah yang berarti. Yang penting adalah kreatifitas kamu. Nggak ada kok blogger yang langsung profesional. Semua butuh proses dan pembelajaran. Dan menurutku, sudah berani terjun itu sudah cukup. Satu kata motivasi yang selalu kupegang. Hidup adalah belajar - dari yang tidak bisa menjadi bisa, dari yang tidak berani menjadi berani. Semoga kata-kata itu juga bisa menjadi motivasi kawan-kawan semua.

Hari ini mau berbagi sedikit ilmu tentang cara membuat spoiler atau hide and show picture on blogspot. Sebenarnya sudah banyak tutorial yang membahas masalah ini. Tapi yang menurutku cocok dan pas di hati adalah script yang digunakan cangkir kupi. Silahkan dilihat sendiri di Blog Cangkir Kupi bentuk kreatifitas penggunaannya. Maaf ya kang, script-nya saya share buat pembelajaran.

Script-nya seperti ini sobat:

<div style="text-align: center;">
<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<span style="font-weight: bold;">it's me </span><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: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show"></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<div class="separator" style="clear: both; text-align: center;">
<a href="http://hp-yitno.blogspot.com" alt="hp yitno blog" imageanchor="1" style=""><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2B2FlomviYG1kYK-86NVZ8i5w6hsfbpZbWeIvwIHX7BpHyD35A1nddOYEAKjLjEFkWxcOVQIeA94H6kGEBOknzRHzVeMpvzdAS3Cb4jH_1K1HOLQuEJ9_5quhPerLUKM8RPObKfZoxusP/s560/It%252527s%252520me.jpg" width="240"></a></div>
</div>
</div>
</div>
</div>
</div>

Silahkan yang berwarna biru sobat ganti url gambar sobat, sedang yang warna merah sesuaikan dengan ukuran gambar sobat. Bisa dalam pixel atau persen (%)

Hasilnya seperti ini sobat:

It's me

SHARE :