Tips dan trik membuat spoiler ini sebenarnya sudah banyak yang posting dan share. Akan tetapi, tidak ada salahnya juga jika saya ikut share tentang spoiler dan sedikit tentang kegunaannya.
Spoiler dibuat dengan menggunakan javascript button. Sedangkan untuk menyembunyikannnya digunakan properti CSS display, dalam hal ini, "display:none;". Fungsinya ada banyak sekali, diantaranya untuk memperpendek teks atau gambar yang sangat besar/panjang dan memakan space halaman atau untuk menyembunyikan kejutan bagi pengunjung (maka seringkali disebut pula sebagai "peek-a-boo", Indonesianya kurang lebih, "ci-luk-ba!", hehe)
Pada posting blog, spoiler dapat digunakan untuk memperpendek panjang halaman sementara sebelum di-klik oleh pengunjung, sehingga tampak tidak ruwet.
Spoiler juga dapat digunakan untuk menghibur pengunjung juga loh, misalnya seperti ini:
1. Copy dan gunakan script berikut:
<div id="spoiler" style="display:none">Kostumisasi spoiler:
Konten Yang Disembunyikan
</div>
<button title="Klik untuk melihat/menyembunyikan" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Buka/Tutup</button>
- Ganti Konten Yang Disembunyikan dengan konten (text, url, url gambar, script dll) yang ingin disembunyikan.
- Ganti title Klik untuk melihat/menyembunyikan dengan title sekehendak anda. Title berfungsi memberi informasi ketika mouse di hover di atas tombol spoiler.
- Ganti Buka/Tutup dengan teks sesuai keinginan, teks tersebut akan menjadi perintah yang terlihat pada tombol spoiler.
2. Untuk membuat spoiler di badan posting, buat spoiler melalui menu Edit HTML, letaknya dibagian pojok kanan atas kotak posting, semua editing dilakukan pada menu tersebut, jika tidak maka script tidak akan bekerja.
3. Jika ingin membuatnya di widget, pilih menu "HTML/Javascript".
Enjoy your Peek-A-Boo Spoiler!
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com
ini sumber aslinya dari mana yah? bingung aku, sudah lama mau posting beginian tapi ga dapat sumber awal
ReplyDeletewah, kalo untuk trik-trik javascript macam spoiler, select all, dll sudah ada sejak jaman dulu bro, sejak 2002 kalo gak salah, and pembuat asli script tsb susah dilacak lg.yang penting kalo bikin posting tentang script2 spt ini, bentuk narasi dan esensinya, serta script-nya bisa dipahami dan dibuat sendiri dan ga copas mentah2 aja... kalo yang dimaksud tentang artikel (bukan script-nya), tentu saja artikel ini saya buat sendiri.
ReplyDeletekecuali kalo copas semuanya mentah2, harus pake sumber....
mantap pak....
ReplyDeleteudah di coba dan berhasil...
terima kasih pak....
jangan lupa mampir to me....
sip. saya sudah mampir tadi and berfungsi dengan baik, tapi belum bisa komen cuz page load blog mu berat bro, jadi internet saya yang lemot ini lama banget nge-loadnya, coba dikurangin dikit ya berat blognya. Good Luck, keep blogging.
ReplyDeletemakasih pisan mas... blog saya jadi rada cantik hehehee........
ReplyDeleteKawan, saya sedang mencari artikel tentang cara membuat spoiler di blogger/blogspot. Kebetulan saya mendapatkan artikel ini. Kalau boleh, saya mau izin copas. Terima kasih. :)
ReplyDelete@admin: yup, you're welcome :D
ReplyDelete@Baharuddin Aziz: Boleh, asalkan gunakan kode link di atas sebagai sumber artikel, masukkan melalui edit HTML posting.
Terimakasih Tutorialnya kang... sangat membantu, akan saya praktekkan, kalo tidak berhasil, minta bimbingannya lagi ya....
ReplyDeleteokay, sip dah :D
ReplyDeleteGAN KO..KLO DITAMBA LINK TIDAK BISA YA...
ReplyDeleteGIMANA TU..SOLUSINYA SUPAYA BERURUT PERKALIMAT..
CONTOH :
A
B
B
B
B
jln2 ke blogku ya..benahi ni.? http://dedidavidbala.blogspot.com/
Bisa kalo diisi link, tinggal dibuat tag a saja. setelah link2 terbuat, buatlah menjadi list dengan menggunakan HTML list.
ReplyDeletecara buat link liat disini:
Cara Membuat link (Hyperlink)
untuk cara bikin list/daftar, liat disini:
Cara Membuat List HTML & Menu Sederhana
Setelah semua kode jadi, tinggal ganti "Konten Yang Disembunyikan" dengan kode/list link tersebut.
ok teng's gan infonya
ReplyDeletemkasih mas,,., atas tutor blogger nya,.,.
ReplyDeletemaaf aku komen hanya satu di posting ini mas,.,.
gx mungkin kan di semua posting aku komen,.,
mkasih mas
wah yang penting bukan komennya bro, tapi kunjungan anda dan membaca artikel sudah cukup membuat saya bahagia. SO, its okay :D yup, terima kasih kembali.
ReplyDeletemas kalo masukin gambar gimana ya?? kok di blog saya, yang muncul malah url gambarnya bukan gambarnya..
ReplyDeletethanx for spoiler.... sangat membantu untuk menyembunyikan beberapa konten di bulan puasa ini :D
ReplyDelete@angga: untuk memunculkan gambar gunakan:
ReplyDelete<img border="0" src="urlgambar.jpg"/>
sipp . . . :D
ReplyDeletewah... gambar contohnya bikin ribut neh!!!
ReplyDeletemalem" buka blog agan, eh.. dapet gambar genderuwo!!! wkkwkwkw
o ye.. thanks informasinya ya :D
ijin share ya bang ...
ReplyDeleteblog q .. http://fromkost.blogspot.com/
thanks untuk tutorialnya...
ReplyDeleteGan... bisa minta request?
ReplyDeletesaya mencari script utk capture rating dari imdb.com.
cari di google dapatnya situs ini http://ycouriel.blogspot.com/2010/06/get-imdb-movie-rating-using-javascript.html.
saya bingung utk lokasi penempatan scriptnya...
bisa tolong ajarin saya?
thanx b4...
thank gan
ReplyDeleteizin coba ya pak.., thx :)
ReplyDeletesuper sekali, saya suka pake spoiler ini
ReplyDeletepak, klo divnya dibawah bisa g? jadi tombol spoilernya tetep di atas?
ReplyDeleteizin menyimak sob .....
ReplyDeletenice info ...
Kunjungi Juga Blog Saya http://dham-gamerz.blogspot.com
mantap. makasih
ReplyDeleteeh mau nanya mas, bagaimana caranya membuat spoiler dalam spoiler?
ReplyDeleteoia satu lagi. tak coba pake kode diatas, untuk 2 spoiler. nah pada spoiler kedua, yg kebuka malah spoiler yg atas,
ReplyDeletealhamdulillah problem solved. tinggal dibuat beda spoilernya ya mas? thanks anyway
ReplyDeleteSuwun kang mas...
ReplyDeletethanks tipsnya om... :)
ReplyDeleteo, iya, boleh nanya, gimana caranya ganti gambar "Link to this post" yang ada dipojok kiri itu?
trims ... :)
thanks kaka tips nya ikut minta ya ^_^
ReplyDeletegan klo spoilernya ditaruh ketengah gimana caranya ??
ReplyDeleteThanks gan, udah work.. Tadi sempet ngak work krn ane bikinnya bukan dibagian HTML
Wess ..
ReplyDeleteMakasih Ya Mass Bro !!!
Akhirnya Ketemu Juga !!
Jangan Lupa Sob Kunjungan Balik Ke Blog Saya !!
ane dah praktek,,thanks banget gan atas infonya
ReplyDeleteBAgus om spilernya
ReplyDeleteGak ada garis horizontalnya
emang paling yahud ni buka rahasia
makasih bozz info
ReplyDeletemoga sukses slalu ya