Membuat Spoiler pada Postingan Blog
Sedikit tip basi sehabis ngutak-ngatik gambar-gambar sambil iseng-iseng belajar nyari (money) buat menguntungkan “membuat puntung” sebatang 234 sebagai pengganjal kelopak mata ketika belum mau merapat. Hanya berbagi sama yang belum tahu aja, barangkali masih ada yang belum mencobanya (blush)
Ingin menampilkan koleksi photo pada blog kadang-kadang mikir dulu kalau koneksi yang dihadapi tidaklah selalu stabil. Sedikit cara menyiasatinya agar tetap gambar-gambar tersebut dapat terpajang dengan menggunakan spoiler hingga tidak terlalu mempengaruhi bandwidth yang ada.
Membuat spoiler atau tombol buka/tutup pada blog yang dapat disimpan dalam postingan atau bisa juga di sidebar. Selain mempengaruhi akses blog, dengan adanya spoiler juga bisa menghemat tempat. Cara membuatnya cukup sederhana juga dengan menggunakan kode HTML seperti di bawah ini:
<span style=”color: #000080;”><strong>Judul Spoiler </strong></span>
<div>
<div><input style=”margin-top: 5px; width: 60px; font-size: 10px;” 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” value=”Buka” /></div>
<div style=”border: 1px inset; margin: 0px; padding: 6px;”>
<div style=”display: none;”>Isikan materi (teks atau gambar) yang akan di spoiler disini</div>
</div>
</div>
Tulisan berwarna merah menunjukan tulisan yang akan nampak pada button atau tombol yang dibuat, tulisan atau nama tersebut bisa diganti sesuai dengan keinginan. Dan, untuk isi pokok dari spoiler bisa berupa teks atau gambar. Sebagai contoh, gambar yang saya input pada spoiler yang dibuat dibawah ini:
Grup Kriwil:
Hasil ngutak-ngatik lainnya bisa dilihat disini.
Wah hampir sama artikelnya… saya juga menulis artikel untuk buat spoiler… tapi di wordpress…
Nice Post… ^_^
Hehe.. salam hangat ya! 😀
Wah saya baru tahu nih bisa nyimpan gambar seperti itu. Tapi akan mempengaruhi speed website enggak mas? Karena biasanya khan gambar itu resolusinya besar
Betul mas, gambar yang resolusinya besar akan berpengaruh 😀
Numpang belajar mas, code diatas tuh dimasukan dimana yah, di menu html itu ya, apa gak bisa dibuat otomatis apply seluruh blog, sehingga tidak perlu bikin atau masukan code itu di tiap postingan..
Hehe.. saya justru masih belajar nih, kodenya gak dibuat otomatis jadi diselipkan di html postingan (blush)
mkasih tutorialnya bang 🙂
Sama-sama, terima kasih ya dah berkunjung 😀
makasih ya sobat, ane bisa menghemat ruangan lagi nih
Sama-sama mas.
Terima kasih telah berkunjung dan salam hangat!
assalamu alaikum..
mau numpang tanya mas bro, kalau mau nulis script dlm postingan seperti pada artikel diatas yang huruf berwarna biru itu gimana?
selain di encode dulu apa ada cara lain? saya nyoba berkali-kali yang muncul visualnya mulu.. jadi pusing..
mohon briefingnya …
terima kasih
wassalamu alaikum..
Waalaikumsalam Wr Wb.
Kl diatas cuma menggunakan notepad aja yaitu copy kode dan paste ke notepad, lalu di notepad tesebut beberapa karakter direplace yaitu;
< diganti <
> diganti >
” diganti "
Hasilnya tinggal di copy dan ditaro dalam postingan.
Cara lainnya bisa memanfaatkan _http://centricle.com/tools/html-entities
Semoga membantu!
Tutorial yang bagus. Jadi inget sering bikin spoiler di forum. Walopun di blog tidak segampang pake BBCode karena harus pake HTML/Javascript code 🙂
Terima kasih telah berkunjung ya.
makasih infi\onya gan
Sama-sama, terima kasih dah berkenan mampir!
Thanks infonya, untuk spoiler. nice tips (terutama untuk orang yang gak bisa html gini hehehehe)
Sama-sama, terima kasih juga telah berkunjung.
Salam hangat!
Oce gan..
Nice blog gan..
Nice Thread bang, sangat membantu..
terimakasih..
dituggu hasil otak atiknya..
Hehe… terima kasih jg telah berkenan mampir 😀
ikutan belajar gan, jadi tambah kaya akan kreatifitas bila selalu menampilkan postingan seperti ini…Thanks atas sharenya gan..
Makasih Gan Tutornya.. Dicuba dulu.. Bim salabim.. Jadi Apa Hayooo..