Membuat Spoiler pada Postingan Blog

Membuat SpoilerSedikit 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.

24 Responses to Membuat Spoiler pada Postingan Blog

  1. Hadi says:

    Wah hampir sama artikelnya… saya juga menulis artikel untuk buat spoiler… tapi di wordpress…
    Nice Post… ^_^

  2. Wah saya baru tahu nih bisa nyimpan gambar seperti itu. Tapi akan mempengaruhi speed website enggak mas? Karena biasanya khan gambar itu resolusinya besar

  3. ESC Creation says:

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

  4. Mediasiana says:

    mkasih tutorialnya bang 🙂

  5. cahya says:

    makasih ya sobat, ane bisa menghemat ruangan lagi nih

  6. aand says:

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

    • kips says:

      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 &lt;
      > diganti &gt;
      ” diganti &quot;
      Hasilnya tinggal di copy dan ditaro dalam postingan.
      Cara lainnya bisa memanfaatkan _http://centricle.com/tools/html-entities
      Semoga membantu!

  7. lembayungbali says:

    Tutorial yang bagus. Jadi inget sering bikin spoiler di forum. Walopun di blog tidak segampang pake BBCode karena harus pake HTML/Javascript code 🙂

  8. makasih infi\onya gan

  9. Pasarklewer says:

    Thanks infonya, untuk spoiler. nice tips (terutama untuk orang yang gak bisa html gini hehehehe)

  10. matrix says:

    Oce gan..

  11. Geosya says:

    Nice blog gan..

  12. Anen says:

    Nice Thread bang, sangat membantu..
    terimakasih..
    dituggu hasil otak atiknya..

  13. Fajar says:

    ikutan belajar gan, jadi tambah kaya akan kreatifitas bila selalu menampilkan postingan seperti ini…Thanks atas sharenya gan..

  14. kenzoo says:

    Makasih Gan Tutornya.. Dicuba dulu.. Bim salabim.. Jadi Apa Hayooo..

Leave a Reply

Your email address will not be published.