Cara Membuat Spoiler atau Tombol Show Hide di Blog

     Trik meringankan dan mempercepat loading blog - ilmair kali ini ingin sharing tentang "Cara Membuat Spoiler atau Tombol Show Hide di Blog"

     Sahabat ada yang sudah pernah pakai spoiler di blognya? Bagi agan dan aganwati pengguna kaskus pastinya kenal banget sama si spoiler ini ya, karena spoiler ini memang sering ada di thread kaskus. Iya, si spoiler itu yang biasa dipakai untuk menyembunyikan gambar atau tulisan. Bentuknya seperti tombol yang kalau kita klik maka gambar atau tulisannya baru bisa dilihat.

    Spoiler sendiri sudah cukup lama dipakai para blogger ya, pengaplikasiannya bisa di dalam postingan maupun di sidebar blog. Dan spoiler ini bisa jadi trik untuk meringankan dan mempercepat loading blog. Karena gambar disembunyikan dan tak langsung tampak di tampilan blog, jadi beban loadingnya bisa lebih ringan.

    Coba sahabat intip di sidebar blog ilmair, sebelah kiri ada tombol orange yang bertuliskan "buka" pada Setetes Karya Endah Nurzaira dan di footer yang bertuliskan "show data Blog dan Komunitas" itu dia si spoiler. 

    Untuk blogspot, perlu menggunakan kode html untuk menampilkan spoiler dan ada beragam jenis juga untuk tampilan yang berbeda.

    Terus gimana Cara Membuat Spoiler di blog? Kali ini saya share beberapa kode html dan tutorialnya ya, semoga bermanfaat ...

1. Pilih salah satu kode html berikut, lalu copy

<center><div style="border: 1px inset black; padding: 1px;"><div id="spoiler"><div><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'NAMA TOMBOL UNTUK DI HIDE'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'NAMA TOMBOL SHOW LAGI'; }" style="color: #ff6600; font-size: 11px; font-weight: bold; margin: 2px; padding: 0px;" type="button" value="NAMA TOMBOL SHOW SPOILER" /><div id="show" style="border: 1px solid white; display: none; margin: 2px; padding: 2px; width: 98%;"><span style="color: #ff6600; font-weight: bold;"><div style="border: 1px solid rgb(153, 153, 153); height: 300px; overflow: auto; text-align: center; width: 270px;"><div class="separator" style="clear: both;"><div class="separator" style="clear: both;">Letakkan teks atau kode script (gambar atau video) di sini</div></div></div></span></div></div><div id="hide"></div></div></div></center>


Tampilannya akan seperti:


<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>Judul 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 = 'NAMA TOMBOL HIDE SPOILER '; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="NAMA TOMBOL SHOW SPOILER" /></div><div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">Letakkan teks atau kode script (gambar atau video) di sini</div></div></div>

Kode tersebut tampilannya seperti:
spoiler:



<div style="margin: 5px;"><div class="normalfont" style="margin-bottom: 2px;"><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 = 'NAMA TOMBOL HIDE SPOILER'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'NAMA TOMBOL SHOW LAGI'; }" style="-moz-border-radius-bottomleft: 15px; -moz-border-radius-topright: 15px; background: none 0% 0% repeat scroll orange; color: white; font-size: 11px; margin: 0px; padding: 5px; width: 30%;" type="button" value="NAMA TOMBOL SHOW SPOILER" /></div><div class="alt2"><div style="display: none;"><div style="color: yellow; padding: 10px; text-align: justify;"><span style="color: #ff6600; font-weight: bold;"><div style="border: 1px solid rgb(153, 153, 153); height: 100px; overflow: auto; text-align: center; width: 270px;"><div class="separator" style="clear: both;"><div class="separator" style="clear: both;">Letakkan teks atau kode script (gambar atau video) di sini</div></div></div></span></div></div></div></div>

Tampilannya akan seperti:

Assalamu'alaikum sahabat semua

Semoga harimu dilimpahi kebaikkan, keberkahan dan kebahagiaan ya

Dimudahkan semua urusanmu

Diwujudkan semua mimpimu

Semoga ada cinta dan ridho Allah dalam tiap langkahmu

2. Paste kode tersebut ke postingan atau sidebar blogmu

- Pada postingan, pastekan dalam posisi "HTML view" ya

spoiler di postingan:


- Untuk sidebar ke "layout", lalu "add a gadget", klik "HTML/javascript" dan pastekan kode nya di sana, edit lalu save

spoiler di sidebar:


- Penambahan gambar di sidebar tinggal menambah kode "<img src="LINK GAMBAR" height="250" width="250" border="0"/>"

- Silahkan edit script spoiler sesuai kebutuhan dan keinginan sahabat
  • NAMA TOMBOL SHOW SPOILER : ganti kata ini dengan nama tombol spoiler sesuai kebutuhan dan keinginanmu,  contohnya seperti "ssst ada tulisan apa ya di sini" atau " klik boleh" atau "buka"
  • NAMA TOMBOL UNTUK DI HIDE : ini nama tombol untuk menutup kembali spoilernya.
  • NAMA TOMBOL SHOW LAGI: ini nama tombol ketika sudah di tutup.
  • style="color: #ff6600 : merupakan kode warna, bisa diganti warna tombol dan warna tulisan di dalam spoiler. Bisa sahabat ganti kodenya sesuai warna yang diinginkan, kodenya bisa sahabat cek di bagian warna text color di kolom postingan blogspot ya (A)
    Saya share beberapa kode warna yang umum :
     #000000 = warna hitam,
     #002fff = warna biru,
     
    #ff0000 = warna merah,
     
    #ff6600 = warna orange
    atau sahabat juga bisa pakai kata warna nya, misal "red", "orange"
  • font-size: 11px;  atau 12px  : Ukuran tulisan
  • height: 300px; dan width: 270px : ukuran kotak scrolling overflow nya
    Silahkan sahabat utak atik sendiri ya.
Gimana, mudahkan membuat spoiler di blog? Kalau ada pertanyaan silahkan tulis di kolom komentar di bawah ya ... Happy blogging!
Previous article
Next article

3 Komentar

  1. Kaskus banget ini mah. Gitu jadi bisa mempercepat loading blog ya ternyata.

    BalasHapus
    Balasan
    1. Iya kaskus banget ya Mas ... dari hasil baca-baca di google, spoiler ini bisa meringankan loading blog katanya Mas

      Hapus
  2. ah jadi tahu kalau yang diklik tadinya blom muncul gambar namanya spoiler, jadi bikin penasaran klik memang kalau tadinya blom lihat pictnya ya, ijin nyerap ilmunya dulu :D

    BalasHapus

Silahkan share saran, kritik, ilmu, inspirasi positifmu di ilmair. Berkomentarlah dengan bijak. Spam akan saya hapus.
Mohon di-setting publik profile blog-nya ya, agar tidak ada profile unknown yang bisa menjadi broken link di blog ini.
Terima kasih ....

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel