Bukan kedua-duanya sob. Ane bukanlah seorang programmer apalagi seorang web-designer. Basic-ku hanyalah mekanik yang tertarik dalam dunia itu. Ilmu dunia web ane pelajari secara otodidak dari membaca buku, membaca tutorial dan mencuri script. Yang paling asyik dan paling menarik dari ketiganya adalah mencuri script. Karena disini kita dituntut harus memahami perintah-perintah atau syntax html dan attribute-attribute yang digunakan. Dan yang paling penting adalah melakukan percobaan.
Spoiler?
Pertama kali mengenal spoiler ketika ane berkunjung ke salah satu sahabat blogger yang mengikuti kontes give away bertema cerita lucu. Awalnya sih seperti biasa, membaca postingan sahabat blogger. Di tengah-tengah postingan ada sebuah tombol mungil yang minta di klik. Ane klik aja tuh, eh ternyata yang muncul gambar pendekar Sabertul ( Satria Bergitar Betulan ). Ane sampai ngakak dibuatnya. Saat itu juga ane tertarik dengan metode yang digunakan dalam menyembunyikan gambar tadi. Ane googling kesana kemari mencari script-nya dengan keyword yang berbeda-beda. Hide and show picture on blogspot, menyembunyikan gambar di blogspot dan masih banyak kata kunci yang ane gunakan untuk mencari script tersebut. Akhirnya ketemu juga artikel yang posting mengenai cara menyembunyikan gambar itu. Dari googling juga ane tahu, ternyata script itu bernama spoiler. Sayangnya, script yang ane temukan tadi nggak bisa bekerja. Jalan terakhir adalah menggunakan metode server:source lewat opera-mini. Ane lihat script-nya dengan teliti, ane lakukan percobaan berkali-kali dan akhirnya ketemu juga script yang digunakan.
Jadi seorang copasser? Bisa dibilang begitu, tapi ane nggak mau copas postingan orang lain. Ane lebih suka melihat script yang masih menjadi rahasia dan mempelajarinya. Salah satunya adalah script spoiler ini. Setelah melakukan percobaan berkali-kali, ketemu juga komponen utama yang membentuk spoiler ini. Yang masih menjadi misteri adalah siapa penemu script spoiler ini?
Tujuan penggunaan spoiler adalah:
1. Menghemat tempat
2. Memberikan kejutan
3. Mengurangi loading blog, karena gambar atau teks disembunyikan terlebih dahulu. Kalau dibutuhkan baru ditampilkan.
Berikut script spoiler yang sering ane gunakan dan telah ane modifikasi sedikit agar tampilannya terlihat cantik:
<div style="margin: 5px 10px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b style="color: #274e13;">Script 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 = 'close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'open'; }" style="font-size: 16px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka"></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 0px; width:250px;">
<div style="display:none;">
Letakkan teks, link atau gambar disini
</div>
</div>
</div>
Fungsi attribute diatas:
1. style="font-size:16px;" untuk mengatur besar kecilnya huruf pada tombol buka ( angka dalam pixel )
2. width="55px;" berfungsi untuk mengatur lebar tombol buka ( pixel )
3. style="border:1px inset; width:250px;" berfungsi untuk memberi garis tepi. Jika ingin memberikan garis tepi, nilai border harus diisi dengan angka ( dalam pixel ). Untuk lebarnya bisa kalian sesuaikan dengan attribute width ( dalam pixel ). Jika tidak ingin memberikan garis tepi, isi nilai border dengan angka nol.
4. Untuk color, margin dan padding sobat sesuaikan sendiri juga ya.
5. Link text: <a href="alamat url kamu" target="_blank" style="color:#0000FF" alt="nama link">Nama teks link</a>
6. Menampilkan gambar: <img src="alamat url gambar" style="padding:7px;" border="1px"/>
7. Note: Kalian bisa memanipulasinya lagi dengan menggunakan css.
Contoh penggunaan script diatas seperti ini:
Google Friend Connect :
33 Komentar untuk "Teknik membuat spoiler dengan cantik di blogspot"
Memang script spoiler bisa di copas, tapi kreatifitas tidak. Kreatifitas perlu dilatih dan dipraktekkan.
Freedom of expression and imagination
saya belum pernah nyoba pake spoiler nih, biasa lah emak2 nggak gaul nih...hehe..
saya belum pernah makek ini, benner juga ya bisa mengurangi loading blog... nti kalau saya mo pakek ane jemput ya om scriptnya hehe..
ini yg ane cari sob, kdg emg butuh ni spoiler ya, tp ga tau caranya, trus kode2 itu di letakkan di postingan kita ya ??
yg penting ane save dulu ilmunya, tq yaaa
Siapa bilang emak-emak nggak gaul. Buktinya bisa ngeblog, itu sudah gaul banget sob. Dicoba aja sob script spoilernya, biar makin gaul. Seru lho sob bisa menggunakan spoiler dalam kreatifitas kita.
Apalagi buat kejutan, wow surprise banget dah :)
trims infonya om *mencoba praktek* :D
Kapan saja sobat perlukan, insyaallah script spoiler ini masih ada. Ini juga saya gunakan sebagai archive ane sob. Kalau ada kendala dalam membuat spoiler, bisa ditanyakan sob. Ane siap membantu sob.
Script spoiler ini diletakkan dimana saja bisa bekerja sob. Sudah ane coba di postingan dan laman mandiri ane sob. Coba aja lihat menu blogroll dalam daftar isi. Itu menggunakan spoiler dalam pembuatannya.
Silahkan dicoba script spoiler-nya sob. Semoga bisa bekerja dengan baik script-nya. Yang penting jangan ada yang kelewatan aja attribute-attributenya. Kalau margin, padding, color dan perintah css bisa sobat manipulasi sendiri.
Kalau saya lebih suka menaruh div class="alt2" style="border: 1px inset; margin: 0px; padding: 0px; width:250px itu setelah div style="display:none agar garisnya nggak muncul dan tampak bersih.
Border muncul ketika spoiler di klick...
Tapi ini adalah soal selera.
Tutorialnya mantap!, ada penjelasannya
Wah makasih banget pak Mars tambahan informasinya.
Dengan kata lain script style="display:none" berfungsi untuk mengontrol script yang berada dibawahnya, yang mana tampilan pertama kali disembunyikan. Jika di klik baru muncul tampilan yang sebenarnya. Gitu kan pak Mars?
saya gak mudeng cara pakainya...
:P
mas yitno ternyata jago jg tentang web dan blog
:)
betul sob, spolier sangat membantu ya, tatapi setuju banget, semu kode emang sama, tp isinya tergantung kreasi si pemegangnya, di buat baik atau buruk, bisa saja, ya gak .. :p
Betul sekali pak. Emang spoiler adalah cara yang paling efektif untuk menghemat tempat.
Di copy-paste aja sob script-nya. Ntar juga paham menggunakan spoiler. Terus ganti tulisan "letakkan teks, link atau gambar disini" dengan isi yang sobat ingin sembunyikan, tapi bisa ditampilkan dengan jalan menekan tombol buka (close-open)
Kode-kodenya memang sama. Hanya berbeda dalam css-nya saja. Tapi yang paling penting dalam menggunakan spoiler adalah kreatifitasnya. Bisa diisi dengan yang baik atau sebaliknya. Tergantung selera pemakainya.
wah keren nih spoilernya sobat...
Hasil mencuri script dan memodifikasinya dengan css kok sob. Bagaimana sobat, tertarik untuk membuat dan menggunakan script spoiler ini?
Silahkan di copy paste dan sobat modifikasi sendiri aja he..he...
saya juga memakai jasa spoiler. selain menghemat tempat. jadi terlihat menarik.
yaufz udah pernah coba pake spoiler bang... hihi.. tapi jadi ngerti dapet penjelasan lagi..thanks
Betul sekali sobat.
Spoiler mempunyai banyak fungsi, seperti yang sobat bilang. Menarik dan menghemat tempat adalah fungsi utamanya.
Wah sudah pernah ya sob.
Ane kalah cepet sama kamu dong. Berhubung ane tahunya baru sekarang, ya udah ane jadikan aja script spoiler sebagai archive dan postingan blog sob.
HTML,css, kode script...semuanya hal baru bagi saya. Otak-atik script juga belum bisa..bisanya ya minta tolong dan guide. Biasanya ya pake metode gugel sesuai kebutuhan trs di aplikasikan ke blog. kalau eror cari lagi yg lainnya. Dan spoiler ini...baru kali ini bacanya..
He..he...
Tipe kamu kok seperti ane dulu sob. Sering bertanya sama mbah google apa yang dibutuhkan terus di implementasikan. Kalau error juga cari yang lain. Tapi kalau script spoiler ini insyaallah nggak error sob.
Semangat sobat dalam belajar dan berkreasi.
haduh masukan baru nih. . . . moga moga gak eror lagi nih ngutek ngutek html kaya kemaren. . ..
Kalau hanya memasukkan script pada postingan atau pada add html/javascript nggak bakalan error sob. Yang ada paling bekerja apa tidak. Yang riskan kalau harus memasukkan script ke edit template html. Makanya sebelum melakukan pengeditan, kita di anjurkan untuk memback-up template lengkap kita.
Tujuannya jika seandainya terjadi hal yang tidak kita inginkan, kita masih bisa mengembalikan seperti semula.
neh spoiler bagusnya kalau ada bagian dalam blog yg kepanjangan, nah bisa menhemat tempat neh:)
tuts yg bagus mas Yitno:)
salam kenal.
Yups betul sekali.
Untuk menyembunyikan teks yang kepanjangan juga bisa menggunakan script spoiler ini sob. Lumayan mengurangi loading halaman atau page yang ingin dibaca pengunjung.
spoiler... yang suka sembunyi2in gambar itu yah... biar enteng...
Yups betul sekali.
Supaya loading blog kita enteng sob, karena gambar dan teks yang berukuran besar kita sembunyikan. Kalau diperlukan baru ditampilkan. Itulah gunanya spoiler ini sob.
Menyembunyikan gambar dan teks dengan spoiler akan terlihat cantik di mata pengunjung sob.
setuju ^^
wah saya belum bisa buat script hehe
He..he..
Ane juga belum bisa buat script sendiri kok sob. Ane lebih cenderung melihat script orang lain terus ane pelajari. Dari situ baru ane paham dan kemudian mengembangkannya.
Yang penting mau mencoba dulu. Nanti juga paham.
1. Silakan buka Daftar Isi untuk melihat artikel menarik lainnya
2. Komentar sobat adalah investasi besar untuk meningkatkan jumlah pengunjung ke Blog Sobat