Halo juragan… Spoiler pada blog adalah sebuah format bingkai yang digunakan untuk membingkai atau menyembunyikan teks, gambar, video maupun apa saja agar bisa disembunyikan di blog. Nantinya pengunjung bisa melihat isi spoiler tersebut dengan cara meng-klik tombol buka tutup atau “Show-Hide”.Spoiler ini bermanfaat untuk meringankan loading blog. Jika anda mengupload banyak gambar di postingan, maka anda sebaiknya memasukkan gambar-gambar tersebut ke dalam spoiler agar loadingnya blog menjadi ringan. Selain itu postingan anda akan tampak praktis dan keren.
Contoh spoiler bisa anda lihat dibawah ini;
[spoiler title=’Buka spoiler’ collapse_link=’true’]
[/spoiler]
( ? ) Selain bisa dipasang di area postingan, spoiler ini juga bisa anda pasang di sidebar blog.
Berikut ini kode spoiler;
<div style=”margin: 5px 20px 20px;”>
<div class=”smallfont” style=”margin-bottom: 2px;”><b>Judul Spoiler</b>: <input value=”Buka” style=”margin: 0px; padding: 0px; width: 55px; font-size: 12px;” 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 = ‘Tutup’; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Buka’; }” type=”button”>
</div>
<div class=”alt2″ style=”border: 1px inset ; margin: 0px; padding: 6px;”>
<div style=”display: none;”>
Teks atau Kode Script (gambar/video)
</div>
</div>
</div>
Cara memasangnya;
1. Upload gambar di entry baru seperti biasanya.
2. Setelah gambar terupload, buka HTML di entry baru (bukan Compose)
3. Kemudian letakkan kode spoiler di tempat yang anda kehendaki, lalu pindahkan script gambar yang telah anda upload tadi ke tengah spoiler. Contohnya bisa anda lihat dibawah ini;
<div style=”margin: 5px 20px 20px;”>
<div class=”smallfont” style=”margin-bottom: 2px;”>
<b>Judul Spoiler</b>: <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 = ‘Tutup’; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Buka’; }” style=”font-size: 12px; margin: 0px; padding: 0px; width: 55px;” type=”button” value=”Buka” />
</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://4.bp.blogspot.com/-9MapqPaggzQ/UmWHVi9pqbI/AAAAAAAAFRE/GHzeCCHXnKg/s1600/My+Picture.jpg” imageanchor=”1″ style=”margin-left: 1em; margin-right: 1em;”><img border=”0″ height=”300″ src=”http://4.bp.blogspot.com/-9MapqPaggzQ/UmWHVi9pqbI/AAAAAAAAFRE/GHzeCCHXnKg/s400/My+Picture.jpg” width=”400″ /></a></div>
</div>
</div>
</div>
4. Kembali ke Compose dan klik Publish. Selesai.
Keterangan;
( i ) Kode warna merah itu adalah script gambar. Anda juga bisa memasukkan lebih dari satu gambar ke dalam satu spoiler, atau bisa juga menambahkannya teks, menambahkan script video atau script apa saja.
Untuk memasangnya di sidebar;
Anda tinggal pastekan kode spoiler beserta sript gambar atau video di gadget HTML, lalu tempatkan di sidebar. Namun anda harus menyesuaikan ukuran lebar gambar atau video lebih dulu agar sesuai dengan lebar sidebar anda.
Begitulah, semoga bermanfaat. Jangan lupa baca juga:
Wah foto siapakah gerangan di dalam SPOILER tersebut<br />Subhanallah. Cantik sekali
Waaaaaakkkkkkk…..
Itu foto Maria Ozawa mas Asep, cantik ya? hmmm :)<br />Kenapa tertawa lihat foto org cantik mas Pri? 🙂
o…. pantes kirain photonya siapa Mba. he,, he,, he,,,
saya malah lebih cenderung ke foto yang ada di SPOILER, dari pada kode SPOILER nya mbak hehehehehehe
Wah,,, semuanya kok malah konsentrasi ke fotonya, gak ke kode spoilernya, hmmm :)<br />Enaknya saya ganti dgn foto orangutan aja ya mas Arie? hihihi 😀
jadi buka tutup spoilernya terus ni hehe<br /><br />saya belum pernah ni mbak pakai spoiler sperti ini, kodenya lumayan banyak juga ya
Hmmm… mas WS juga suka mainin buka tutup spoiler aja ya,,, hanya ingin lihat siapa di dalam ya,,, :)<br />Kodenya banyak tapi gak bikin berat loading mas,,, justru malah membuat loading halaman menjadi ringan.<br />Silakan dicoba aja 🙂
Kalau banyak sepeti ini kodenya nanti kalau di kompres htmlnya bisa juga kan Mba ? maklum jadul nih. he,, he,, he,,,,, sebab selama ini photo sebagian di kompres sebelum masuk dalam postingan jadinya ya seperti itu. Makasih jawabannya sebelumnya.<br /><br />Salam,
Bisa aja html templatenya dikompres mas, karena spoiler ini terletak di html postingan, bukan di html template. jadi tdk berhubungan sama sekali dgn kompres mengompres html template.<br />makasih juga sdh berkunjung ^_^
ternyata dibagikan juga kode yang ini hehe 😀
hahaha… rupanya mas Intan merhatiin juga nich :)<br />Ini sebenarnya sdh lama mau saya bagikan mas, tapi ternyata sekarang baru sempat, hihihi ^_^
hmm,, adakah pengaruh loading blog dengan script ini?
ada mas, yaitu loadingnya menjadi ringan karena gambarnya tdk terbuka secara langsung 🙂
sepertinya tidak mempengaruhi loading blog karena ini terdapat di dalam postingan mbak, maksud mas Ikhwan mungkin nambah berat loading blog ya mas 🙂
Saya sudah coba, dan alangkah lebih baiknya photo di kompres terlebih dahulu dan html nya [un juga di kompres, kama hal ini akan mempengarhui kecepatan loading blognya Mas Ikhwan. Jadi kita taruh photo dengan gambar besar pun tidak masalah. Maaf bukan menggurui hanya berbagi informasi yang sudah dilakukan oleh saya.
caranya mengkompres photo gimana mas Indra,,, saya malah gak ngerti, hehehe ^_^
Ternyata mudah sekali ya untuk membuat spoiler di dalam postingan atau di sidebar blog dengan hanya memasang script khsusu dan juga url gambar. Kayaknya boleh dicoba nich mbak. Thanks ya atas informasinya 🙂
mudah banget mbak,,, silakan dicoba aja. cocok banget buat blognya mbak Ririn biar tampak cantik seperti adminnya, hmmm ^_^
Kalau gambar di kasih spoiler kira-kira bisa SEO nggak mbak? kan di gambar postingan ada alt tag 🙂
menurut saya alt tag gak begitu masalah terhadap seo mbak Eka,,, krn gak akan mampu menghalangi googlebot mengindeks gambar, apa lagi posisi blog sdh kuat di serp. kecuali hanya robots.txt saja yg bisa menyetop aksi perayap mesin pencari ^_^
sepertinya saya butuh spoiler karena di artikel saya banyak gambarnya 🙂
masukin spoiler aja mas gambar2nya biar praktis n ringan loadingnya. Selain itu biar tepung jangkriknya gak tumpah semua kalau dimasukin spoiler, hehehe ^_^
selain itu juga bisa menjadikan pengunjung penasaran mbak, apalagi ketika dibuka gambarnya miyabi :D<br /><br />kapan-kapan kalau mau posting artikel yang banyak gambarnya akan saya pasang spoiler mbak 🙂
wah walaupun artikel blog saya minim gambar tapi kalau bisa untuk di sidebar ya saya coba.
silakan aja dicoba di sidebar mas, untuk memperingkas aksesoris2 kecil yg ada di sidebar, misalnya alexa, ping, histats, dkk ^_^
Anda saja blogger menyediakan tools spoiler ini seperti di kaskus, ga perlu2 repot2 masang kode – kode tersebut. Tapi jika diambil sisi positifnya, mungkin agar pihak blogger nyuruh kita buat belajar alias agar tidak selalu dimanjakan dengan fitur2 yang sudah ada. <br /><br />Artikel yang menarik mbak 🙂
Kira2 begitu ya mas,,, memang blogger ingin membuat kita kreatif dan tdk dimanjakan, hehehe :)<br />Tapi bisa saja loh suatu saat nanti blogger menambahkan fitur2 lain seperti di kaskus, hmmm :D<br />Makasih juga kunjungannya mas Aditya ^_^
mantep
Mbak fotonya kok foto maria ozawa? apa gak dimarahi si mbah tuh? :p
yg penting gambar berpenampilan baik2 aja gak masalah tuh mas 🙂
betul ihh
gan, kok punyaq udah sukses tapi ga bisa dibuka knapa ya?
berarti ada kesalahan tuh mas, jangan diklik buka ketika msh di dalam dasbor blogger 😀 coba aja buat lagi sampai berhasil 🙂
Terima kasih banyak buat scriptnya 😀 membantu sekali diblog saya..hehe, trimakasiihhh
sayang banget ya itu cuma bisa di pasang di blogspot.<br /><br />yang bisa di pakai di wordpressnya gimana dong mba ?
wah kalau utk wordpress saya gak ngerti mas hehehe 😀 coba aja searching di google 🙂
Terimakasih ya,bermanfaat banget .
permisi yah.. mau tanya kalo spoiler waktu di klik deteksi dulu type user nya apa gimana ya kodenya..? masih newbie tolong yah sepuh sepuh..<br />
wah saya gak ngerti yg gituan mas 😀
Mbak kalau nyari gambar untuk Google Adsense dari mana ya (di Internet)?<br /><br />Foto yg di spoiler itu tidak terlihat pencantuman sumbernya, tapi baik-baik saja sama Adsense ya…..
Gambar jgn asal comot, tetapi kita harus tahu <b>Hak Penggunaan</b> gambar tsb, yaitu kita hrs memilih gambar yg <b>Tidak difilter menurut lisensi</b>, artinya kita boleh menggunakan gambar tsb dgn syarat kita mau menghapusnya atau memberi URL sumbernya jika ada komplin dari pemilik gambar yg syah :)<br /><br />Hak penggunaan seperti pada gambar dibawah ini:<br /><br />https://lh3.
Oke deh. Saya praktekkkan tips menggunakan gambarnya. Terimakasih… 🙂
thx yah sist.. bermanfaat banget buat blog saya :))
Kalau bagian blockquote sebaiknya dibuat agar bisa dicopy paste, agar pengunjung putar balik.
makasih koreksi dan sarannya mas Rudianto, langsung saya laksanakan 😀
makasih Mbak Artikel bagus, dapat ide keren lagi dari sini
Terima kasih mbak scriptnya….lagi dicoba-coba dulu nih
nah ini dia tutorial yang saya cari2 nemu juga…,, makasih ya udah share ijin praktek dulu
makash mba, sangat bermanfaat banget
makasih sama2 mas bahar ulum 🙂
terimakasih ya untuk tutorialnya jadi tau deh caranya buat spoiler di blog 🙂
Mantap nih infonya. terima kasih gan.
saya coba dulu
makash mba, sangat bermanfaat banget lho