Home » Javascript » Optimasi Wordpress » Cara Membuat Spoiler

Cara Membuat Spoiler

24 Feb. 2010169 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. Cara Mengatasi Anti Klik Kanan (Disable Right Click)
  2. Google Doodle, Tarian Martha Graham
  3. Yuri Alekseyevich Gagarin
  4. Google Doodle : Lunar Eclipse
  5. Google Doodle Art Clokey’s 90th Birthday Animation
  6. Animasi Google Earth Day 2011
  7. Membuat Show Hide Element Dengan jQuery
  8. Yesterday, The Beatles
  9. Custom Javascript Per Post
Categories: Javascript ∞ Optimasi Wordpress Tags: Cara Membuat Spoiler ∞ ∞ ∞
  1. cumasatu
    24-8-2011 at 08:45 | #1

    Trima kasih tutorialnya mas alwi.

    Reply

  2. nona enno
    12-9-2011 at 09:14 | #2

    makasiih tutorialnya.. :*

    Reply

  3. idf
    26-9-2011 at 14:21 | #3

    ini dia yg gue mau.btw,mksig mas alwi untuk tips2nya.

    Reply

  4. fanoy
    13-10-2011 at 06:21 | #4

    mas, kalau tombol spoiler itu diganti teks doang (bukan tombol) bisa ga?

    jadi maksud saya begini, syaa pernah liat di Google ada link yang disebelah kirinya itu terdapat tanda (+) nah saat link itu di klik, konten atau penjelasan muncul dibawahnya. dan saat penjelasan atau konten tersebut terbuka, tanda (+) menjadi tanda (-). bagaimana tips membuatnya?

    makasih

    Reply

    Alwi Reply:13-10-2011 at 16:12

    Bisa dibuat dg tanda plus atau minus : kodenya kira2 seperti ini :

    <script language="javascript"> 
    
function toggle() {
    
var ele = document.getElementById("toggleText");
    
var text = document.getElementById("displayText");
    
if(ele.style.display == "block") {
    
ele.style.display = "none";
    
text.innerHTML = "+";
    
}
    
else {
    
ele.style.display = "block";
    
text.innerHTML = "-";
    
}
    
} 
    
</script>
    

    
<a id="displayText" style="font-size:20px;text-decoration:none;padding:5px;border:1px solid #666666;width:500px" href="javascript:toggle();">+</a>
    
<div id="toggleText" style="display: none"><p style="text-align: justify;">Ini contoh membuat tombol spoiler menggunakan text atau lambang plus (+)  dan minus (-)</p></div>

    Ini hasilnya :

    +

    Reply

  5. Dafid
    18-10-2011 at 11:24 | #5

    gimana cara bikin spoiler dg tombol text .
    disini kok kacau..? http://www.vgmc-indonesia.com/tentang-vgmc/

    ———————————————————
    saya lihat di source codenya, javascriptnya sepertinya belum Kang David cantumin, sehingga fungsi buka tutupnya gak fungsi

    Reply

  6. sailorman
    23-10-2011 at 18:17 | #6

    makasi gan,sukses selalu infonya sangat bermanfaat

    Reply

  7. mesin roti
    24-10-2011 at 04:47 | #7

    mantafz mas, ini yang saya cari2

    Reply

  8. Faridz Baihaqi
    4-11-2011 at 15:47 | #8

    @m-alwi , Makasih atas infonya, banyak juga koleksi spoilernya kalau kira-kira ada yang model baru di posting lagi ya…. he he he,

    Reply

  9. pr14nt
    13-11-2011 at 16:46 | #9

    Udah dicoba tapi koq tetep ga bisa ya mas??? saya udah nyoba berkali2 termasuk tutorial dari blog lain dan blognya mas Alwi ini yg ke 11x tapi hasilnya tetep sama. Cuma ada garisnya aja. kalo dari blog lain ada yg cuma muncul teks isi spoilernya aja…

    maaf kalo kepanjangan. maklum nubie baru belajar ngeblog. makasih banyak dan salam kenal…
    ————————————————————————
    Catatan : Pembuatan Spoiler ini tidak bisa diterapkan/diaplikasikan untuk pengguna wordpress.com karena terdapat kode javascript dan di wordpress.com tidak support penggunaan javascript oleh user. Untuk wordpress yg hosting sendiri baru bisa atau di blogspot juga bisa karena didukung/dibolehkan menggunakan javascript

    Reply

    pr14nt Reply:14-11-2011 at 13:46

    O…gitu toh mas. pantesan ga bisa2
    makasih banyak buat infonya

    Reply

  10. Atthur
    4-12-2011 at 23:23 | #10

    Spoiler ternyata ini y. Ane udah sering dengar rupannya ini yang namanya spoiler y n satu lagi ternyata banyak juga y yang begini. Ok ded Gan salam kenal aja y.

    Reply

Comment pages
1+4=? (Wajib diisi)