Home » Javascript » Optimasi Wordpress » Cara Membuat Spoiler

Cara Membuat Spoiler

24 Feb. 2010166 comments
Cara Membuat Spoiler

Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu element, link atau kumpulan link, kumpulan teks, gambar, seluruh atau sebagian isi dari postingan blog dan lain-lain dengan menggunakan kombinasi kode html dan javascript, dan ketika dibutuhkan dengan mengklik tombol spoiler tersebut maka suatu element yang disembunyikan tadi bisa ditampilkan (buka tutup/show hide). Tujuan dibuatnya spoiler adalah untuk menghemat space atau ruang dalam suatu postingan atau sidebar. Keuntungan lain menggunakan Spoiler adalah bisa mengurangi waktu loading, maksudnya adalah, jika kita menggunakan spoiler pada gambar, maka blog kita tidak akan terkena beban loading yang bisa memberatkan. Spoiler juga bisa digunakan untuk menyembunyikan video agar loadingnya tidak berat.

Contohnya pada postingan Komentar Blog Terpanjang Di Dunia, disitu isi komentar yang sangat panjang saya sembunyikan dengan Spoiler, jadi bisa dibuka dan ditutup. Bisa dibayangkan jika teks ditampilkan apa adanya tanpa spoiler maka akan memakan space dan keseluruhan postingan akan sangat panjang dan merusak tampilan blog.

Cara Membuat Spoiler :

1. Cara membuat Spoiler tanpa warna background.

Kodenya adalah :

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="CONTOH SPOILER TANPA WARNA BACKGROUND" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<p style="text-align: justify;">TULIS KALIMAT YANG AKAN DISEMBUNYIKAN DI SINI.</p>
</div><div id="hide"></div></div></div>

2. Cara membuat Spoiler dengan border dan warna background.
Kodenya adalah :

<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="CONTOH SPOILER DENGAN BORDER DAN WARNA BACKGROUND" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">TULIS KALIMAT YANG AKAN DISEMBUNYIKAN DI SINI.</p>
</div><div id="hide"></div></div></div>

Keterangan :
<div style=”color: #000000; = Ini untuk mengganti warna teks
background: #EBF3FB; = Ini untuk mengganti warna background
border: 1px solid #AACCEE; = Ini untuk ukuran dan warna border

3. Cara membuat Spoiler untuk menyembunyikan gambar.
Kodenya adalah :

<div id="spoiler"><div>
<input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" 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 = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="CONTOH SPOILER UNTUK GAMBAR" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<img class="aligncenter" src="http://4.bp.blogspot.com/_3d0GDLAXLJ8/STAjkFR1s2I/AAAAAAAABCQ/pVH4lcV5odE/s320/monyet.jpg" alt="monyet" width="300" height="280" />
</div><div id="hide"></div></div></div>

Silahkan ganti : http://4.bp.blogspot.com/_3d0GDLAXLJ8/STAjkFR1s2I/AAAAAAAABCQ/pVH4lcV5odE/s320/monyet.jpg dengan URL gambar yang ingin disembunyikan.

OK, untuk Spoiler yang lainnya seperti Video, daftar link dan lain-lain baik di dalam postingan atau di sidebar tinggal disesuaikan, kodenya hampir sama. Anda bisa menempatkan button di tengah dengan menambahkan kode ini <div align=”center”> pada baris kedua.

Tombol spoiler juga bisa kita ganti dengan menggunakan tanda plus dan minus, caranya bisa dilihat di postingan ini : Membuat Show Hide Element Dengan jQuery.

Catatan : Pembuatan Spoiler ini tidak bisa diterapkan/diaplikasikan untuk pengguna wordpress.com karena terdapat kode javascript.

Cara Membuat Spoiler Reviewed by: Alwi on Rating : 5
Mudah-mudahan artikel tentang Cara Membuat Spoiler ini bisa bermanfaat untuk anda, terima kasih.

Artikel Yang Mungkin Berkaitan :

  1. Membuat Show Hide Element Dengan jQuery
  2. Animasi Google Earth Day 2011
  3. Google Doodle : Lunar Eclipse
  4. Google Doodle Art Clokey’s 90th Birthday Animation
  5. Yesterday, The Beatles
  6. Yuri Alekseyevich Gagarin
  7. Cara Mengatasi Anti Klik Kanan (Disable Right Click)
  8. Custom Javascript Per Post
  9. Google Doodle, Tarian Martha Graham
  1. faris
    31-12-2011 at 09:34 | #1

    Pada scrip diatas ada ” ‘LIHAT LAGI” tapi kok kayaknya ada yang kurang ,maksud saya kok ga muncul ketika sudah di jalankan. yang muncul/tampil hanya cuma tulisan “CONTOH SPOILER …….. ……..”. apa ada yang kurang atau memang g tampil mas…

    kalo misalnya tombol contoh spoiler diklik kemudian berubah menjadi sembunyikan, script apa yang harus saya tambahkan… terima kasih
    tolong lihat www.bangfaris.com

    Reply

  2. 19-1-2012 at 09:18 | #2

    iyaa gan scriptnya ada yang tekor tu untuk hide/shownya..

    oya salam kenal gan saya datang untuk bertamu..jika sudi main juga ke blog saya.

    Reply

    edo Reply:

    http://imgcash6.imageshack.us/img440/1615/salome11.png

    Reply

  3. 16-2-2012 at 00:59 | #3

    ada ga caranya supaya tombol spoiler nya di tata berdampingan (seperti tab halaman), kebetulan pengen masukin banyak data

    Reply

  4. 8-3-2012 at 22:20 | #4

    Sya mau tanya:
    1. untuk Spoilernya itu ditaruh dimana? di postingannya, atau di java scriptnya?
    2. Sekalian aku juga ingin tanya mengenai pos komentar. kalau ingin membuat komentar yg pengisiannya lebih mudah spt punyanya blog ini (Pengisian data pd komentar cukup mengisi e-mail, dsb) itu bagaimana caranya?

    Mohon balasannya karena saya baru belajar blog

    Reply

  5. Wijaya
    14-4-2013 at 14:34 | #5

    mas klo buat spoiler di dalam spoiler gmana scriptnya y… maklum ane bener2 kgk nger atribut mana aja yang harus diubah… thnkks

    Reply

  6. 20-10-2013 at 19:45 | #6

    maksih broo..
    ane sangat bingung tentang masalah ini .

    Reply

  7. 20-10-2013 at 19:46 | #7

    sukses selalu gan ..
    artikelnya sangat membantu .

    Reply

  8. 27-10-2013 at 19:19 | #8

    Wow.. keren mas alwi, langsung praktek dan bisa (karena penjelasannya sangat jelas) :) matur suwun mas alwi

    Reply

  9. 30-6-2014 at 19:39 | #9

    Kerennya ee..bagus juga buat tambah pengetahuan ngeblog..

    Reply

  10. 29-7-2014 at 13:42 | #10

    Yahh… sayang buat wordpress.com gak bisa ya. Padahal itu yang lagi dicari.

    Anyway, thanks for sharing

    Reply

Comment pages
1 10 11 121725
2+4=? (Wajib diisi)