Cara Membuat Spoiler di Blogger/Blogspot


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">
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>
Kostumisasi spoiler:
- 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

Cara Membuat Spoiler di Blogger/Blogspot
Written by: Ahmad Khoirul Azmi
Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan codedi bawah atau share dengan sharing buttons di atas. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

add a comment 40 Comment(s):

r10 said...

ini sumber aslinya dari mana yah? bingung aku, sudah lama mau posting beginian tapi ga dapat sumber awal

Ahmad Khoirul Azmee said...

wah, 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.
kecuali kalo copas semuanya mentah2, harus pake sumber....

Suwardi said...

mantap pak....
udah di coba dan berhasil...
terima kasih pak....
jangan lupa mampir to me....

Ahmad Khoirul Azmee said...

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.

admin said...

makasih pisan mas... blog saya jadi rada cantik hehehee........

Baharuddin Aziz said...

Kawan, saya sedang mencari artikel tentang cara membuat spoiler di blogger/blogspot. Kebetulan saya mendapatkan artikel ini. Kalau boleh, saya mau izin copas. Terima kasih. :)

Ahmad Khoirul Azmee said...

@admin: yup, you're welcome :D

@Baharuddin Aziz: Boleh, asalkan gunakan kode link di atas sebagai sumber artikel, masukkan melalui edit HTML posting.

Budi Cahyono said...

Terimakasih Tutorialnya kang... sangat membantu, akan saya praktekkan, kalo tidak berhasil, minta bimbingannya lagi ya....

Ahmad Khoirul Azmee said...

okay, sip dah :D

Dedi David Bala said...

GAN KO..KLO DITAMBA LINK TIDAK BISA YA...
GIMANA TU..SOLUSINYA SUPAYA BERURUT PERKALIMAT..
CONTOH :
A
B
B
B
B
jln2 ke blogku ya..benahi ni.? http://dedidavidbala.blogspot.com/

Ahmad Khoirul Azmee said...

Bisa kalo diisi link, tinggal dibuat tag a saja. setelah link2 terbuat, buatlah menjadi list dengan menggunakan HTML list.

cara 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.

Dedi David Bala said...

ok teng's gan infonya

Asmara Susanto said...

wah bagus ini, kayak d forum2 haha

azep24 said...

mkasih mas,,., atas tutor blogger nya,.,.

maaf aku komen hanya satu di posting ini mas,.,.
gx mungkin kan di semua posting aku komen,.,
mkasih mas

Ahmad Khoirul Azmee said...

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.

Angga ilham said...

mas kalo masukin gambar gimana ya?? kok di blog saya, yang muncul malah url gambarnya bukan gambarnya..

efbez said...

thanx for spoiler.... sangat membantu untuk menyembunyikan beberapa konten di bulan puasa ini :D

Ahmad Khoirul Azmee said...

@angga: untuk memunculkan gambar gunakan:
<img border="0" src="urlgambar.jpg"/>

Angga ilham said...

sipp . . . :D

adinugraha_kuru said...

wah... gambar contohnya bikin ribut neh!!!

malem" buka blog agan, eh.. dapet gambar genderuwo!!! wkkwkwkw

o ye.. thanks informasinya ya :D

admin said...

ijin share ya bang ...

blog q .. http://fromkost.blogspot.com/

www.gasoof.com said...

thanks untuk tutorialnya...

Mhiel Mild said...

Gan... bisa minta request?
saya 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...

Agus Dwi Handoko said...

thank gan

Rohis Facebook said...

izin coba ya pak.., thx :)

Rony Wijaya said...

super sekali, saya suka pake spoiler ini

aisha_cantik said...

pak, klo divnya dibawah bisa g? jadi tombol spoilernya tetep di atas?

Dham-Gamerz said...

izin menyimak sob .....
nice info ...

Kunjungi Juga Blog Saya http://dham-gamerz.blogspot.com

masruri said...

mantap. makasih

Muhammad Hafid Masruri said...

eh mau nanya mas, bagaimana caranya membuat spoiler dalam spoiler?

Muhammad Hafid Masruri said...

oia satu lagi. tak coba pake kode diatas, untuk 2 spoiler. nah pada spoiler kedua, yg kebuka malah spoiler yg atas,

Muhammad Hafid Masruri said...

alhamdulillah problem solved. tinggal dibuat beda spoilernya ya mas? thanks anyway

Otomotif Qita said...

Suwun kang mas...

Windows 98SE said...

thanks tipsnya om... :)
o, iya, boleh nanya, gimana caranya ganti gambar "Link to this post" yang ada dipojok kiri itu?

trims ... :)

Putri Suryandari said...

thanks kaka tips nya ikut minta ya ^_^

Eka Muliawan said...

gan klo spoilernya ditaruh ketengah gimana caranya ??

Thanks gan, udah work.. Tadi sempet ngak work krn ane bikinnya bukan dibagian HTML

Muhammad Ridho said...

Wess ..
Makasih Ya Mass Bro !!!
Akhirnya Ketemu Juga !!
Jangan Lupa Sob Kunjungan Balik Ke Blog Saya !!

Cara cara dot blogspot said...

ane dah praktek,,thanks banget gan atas infonya

bebasdownload.com said...

BAgus om spilernya
Gak ada garis horizontalnya
emang paling yahud ni buka rahasia

Amaludin Rezqa said...

makasih bozz info
moga sukses slalu ya

Post a Comment

Silahkan tinggalkan komentar untuk respon/pertanyaan. Jika ingin menuliskan kode di dalam komentar, convert dulu dengan HTML Encoder. Centang "Notify me" untuk mengetahui balasannya. Maaf apabila komentar dibalas dalam waktu lama atau tidak terbalas karena saya tidak online setiap hari. Atau biar lebih cepat dan enakan bisa kontak lewat Facebook. KOMENTAR BERISI LINK & tidak sesuai dengan Comment Policy akan langsung dihapus.Karena banyaknya spam, komentar sekarang di-moderasi sebelum diterbitkan. Thanks.
Smashed Spams: 11362

Recent Comments

Tautweb.com

  • Menulis Artikel Blog

    Tips dan panduan menulis artikel blog berkualitas dan menarik (dalam beberapa seri).

  • Template Blog Terbaik

    Review dan daftar situs pembuat dan penyedia template blogger berkualitas dan tentunya terbaik.

  • Strategi SEO 2015

    Hal apa saja yang wajib menjadi bagian dari strategi SEO di tahun ini? Simak ulasan lengkapnya di sini.

  • Artikel SEO Friendly

    Tips membuat artikel yang memenuhi syarat SEO sekaligus tetap menjaga kualitasnya.

  • Belajar HTML & CSS

    5 situs rekomendasi untuk mempelajari HTML dan CSS dari tingkat dasar.

© 2010-2015 Buka Rahasia Blogspot | Template by Dicas Blogger | Modified & Enhanced by Ahmad Khoirul Azmi

 ContactPrivacy PolicyComment PolicySitemap