Membuat spoiler ( hide & show gambar di blogspot )

Salam hangat kawan-kawanku :)

Lama ya nggak ketemu kalian semua. Gimana nggak lama, ane aja orang baru di blogger he..he.. :)
Biasanya orang menyebutnya newbie, blogger kacangan atau blogger musiman.

Lama berkecimpung atau tidak, itu bukan masalah sobat. 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://lh5.googleusercontent.com/-XQMwlmfwFWA/TyC8xRiDtiI/AAAAAAAAAG4/UFJmFOpMH98/s144/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

Script cangkir kupi, ditulis oleh HP Yitno