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 Post

Next article

Previous Post