Bagaimana caranya untuk menghemat space halaman posting yang penuh dengan gambar?, Jawabnya mudah, temen - temen gak usah pake gambar aja..., mudahkan "kq putro pekoq ya". Maksudnya kalo wajib mengikutsertakan gambar gimana??. Bilang dunk dari tadi... :P.
Spoiler, itulah satu kata yang bisa kita gunakan untuk menghemat halaman posting jika temen - temen menggunakan gambar yang memiliki size besar, lho apa hubunya sama size?? ada hubunganya! karna spoiler bekerja menyembunyikan gambar jadi saat halaman kita terjadi proses load gambar kita yang tersembunyi tersebut tidak ikut melakukan proses load. Tips membuat spoiler ini, selain untuk mempercepat load halaman, bisa juga membuat pengunjung blog anda penasaran.
Spoiler, itulah satu kata yang bisa kita gunakan untuk menghemat halaman posting jika temen - temen menggunakan gambar yang memiliki size besar, lho apa hubunya sama size?? ada hubunganya! karna spoiler bekerja menyembunyikan gambar jadi saat halaman kita terjadi proses load gambar kita yang tersembunyi tersebut tidak ikut melakukan proses load. Tips membuat spoiler ini, selain untuk mempercepat load halaman, bisa juga membuat pengunjung blog anda penasaran.
Kita langsung perktek aja dari pada pusing sana sini gak jelas, berikut cara membuat spoiler :
langsung aja kopy paste semua kode dibawah ini:
<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;"> Alamat gambar </span></div></div></div></div></div> |
hasilnya seperti dibawa ini :
Keterangan:
ganti teks yang berwarna merah dengan alamat gambar milik anda (link).
Silahkan edit tampilan sesuai kebutuhan.
Cara membuat spoiler adalah salah satu tips untuk membuat pengunjung penasaran.
Cara membuat spoiler adalah salah satu tips untuk membuat pengunjung penasaran.
17 komentar:
waw tips yang sangat membantu :D thaks ya
mampir mas.... :D
ehhem...jadi kayak kaskus nich...
akhiran'a kyk'a ga pake <\span> deh mas :)
cuz aku dah nyoba n ga bisa..
btw, cheers.. makasih tutorialnya sangat membantu;;
melanjutkan yang diatas yang <\span> ga bisa,n yang alamat gambar yang berwarna merah tu pun aku coba malahan yang muncul link gambarnya doank,setelah di coba pake *img src="link gambar" /> baru bisa
*diganti< coz html wat coment ga bisa
Salam Kenal, infonya berguna sekali..ditunggu baliknya..terimaksih...suwun...
kok gk ade scrool bwh sama atasnya gan?? gmn nehh??
makasi boz. . .
berhasil. .
Makasih gan, langsung dicoba nih. Ternyata bisa juga menggunakan spoiler di blogspot.
Berhasil berhasil berhasil horee.....
Cek di sini gan ^_^
http://hsajax.blogspot.com/2010/10/kumpulan-rubik-rubik-yang-unik.html
Bagus artikel nih he ...he..........
Thenks gan.
klo buat teks bisa mas ?
Wah sip nih,,, jadi hemat tempat,,,,
Saya coba dulu ya mas, cara bikin spoilernya. good artikel mah pokoke..
Dengan spoiler blog jadi kelihatan rapi dan ringkas
thank you for some of these web articles is very impressive and qualified to compete.
BLOG YG SANGAT BAGUS DAN ARTIKEL YG MENARIK DAN BERMANFAAT
Posting Komentar