Membuat spoiler ( hide & show gambar di blogspot ) - HP Yitno Membuat spoiler ( hide & show gambar di blogspot ) - HP Yitno

Bisnis Online I Affiliasi I Tutorial Blog I Tips & Trick I Motivation I SEO

Membuat spoiler ( hide & show gambar di blogspot )

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 :

Iklan Lucu & Super Kreatif Di Dunia

Amazing..!!! - Kata itulah yang mungkin akan anda katakan tatkala melihat iklan paling kreatif & termahal di dunia berikut https://youtu.be/jYsx0nlGtJ4.
6 Komentar untuk "Membuat spoiler ( hide & show gambar di blogspot )"

Silahkan kembangkan kreatifitas kalian dengan script diatas. Semoga orang Indonesia makin cerdas, cool & smart dan makin kreatif.
Siapa tahu dapat ikutan Eagle award Metro TV he...he... :)

Ngarep tingkat tinggi sob

kalo diisi teks ato url bisa juga kan gan..?? tapi narohnya dmn?

sekali lagi gan,, follow yea jika berkenan Indahnya Berbagi

Jelas bisa sob. Di isi teks juga bisa.
Penempatannya setelah script yang ada tulisannya clear:both itu lho sob. Tapi yang [a href] dan [img src] dihilangkan dan diganti teks.

mas Yitno .... makasi' informasinya ... ntar coba aku praktekken ...

Ok sama-sama kawan, silahkan dicoba. Semoga berhasil ya sob :)
Spoiler emang bagus sob, apalagi buat lucu-lucuan dan kejutan. Surprise banget deh pokoknya.

gunakan script spoiler ini untuk memberikan kejutan atau menyembunyikan sesuatu yang nggak perlu diperlihatkan dengan jelas.

1. Silakan buka Daftar Isi untuk melihat artikel menarik lainnya
2. Komentar sobat adalah investasi besar untuk meningkatkan jumlah pengunjung ke Blog Sobat

Back To Top