Home>> Optimasi-Wordpress> Cara Membuat Spoiler

Cara Membuat Spoiler

24 Feb 2010 Alwi104 comments

Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu link atau kumpulan link, kumpulan teks, gambar, seluruh atau sebagian isi dari postingan blog dan lain-lain dengan menggunakan kombinasi kode html dan javascript. Tujuannya 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;">Dalam pengertian selanjutnya Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu link atau kumpulan link, kumpulan teks, gambar, seluruh atau sebagian isi dari postingan blog  dan lain-lain dengan menggunakan kode html. Tujuannya 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.</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;">Dalam pengertian selanjutnya Spoiler itu adalah sebuah cara yang dipakai untuk menyembunyikan suatu link atau kumpulan link, kumpulan teks, gambar, seluruh atau sebagian isi dari postingan blog  dan lain-lain dengan menggunakan kode html. Tujuannya 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.</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.

Share This Post To : Artikel Menarik Lainnya :
  1. Cara Setting Plugin WP Super Cache
  2. Cara mengganti username dan password wordpress
  3. Cara Mempercepat Loading Blog Wordpress (Minimize SQL Queries)
  4. Menghemat Quota Bandwidth dengan HTTP Compression
  5. Mempercepat Loading Wordpress dengan Zlib Compression
  6. Mempercepat Loading Wordpress Dengan DB Cache Reloaded
  7. Cara Menyembunyikan Versi Wordpress
  8. Cara Menonaktifkan Fungsi Thumbnail
  9. Optimasi Link Komentator Wordpress
  10. Cara Membatasi Jumlah Karakter Komentar
  11. Tips menjaga dan melindungi keamanan wordpress
  12. Mempercepat Loading Wordpress Dengan WP Widget Cache
  13. Cara Mengganti Font Dalam Postingan
  14. Tips Menghemat Quota Bandwidth
  1. 15 Jun. 2010 at 16:05 | #1

    Ikutan ngopas kodenya ya mas.

    Reply

  2. 19 Jun. 2010 at 15:39 | #2

    makasih triknya. ijin make ilmunya

    Reply

  3. adrian
    3 Jul. 2010 at 22:08 | #3

    makasih ilmunya mas :D

    Reply

  4. 7 Jul. 2010 at 17:14 | #4

    tukar link bro, blogny bagus banget

    Reply

Comment pages
1 ... 3 4 51725
  1. February 24th, 2010 at 05:07| #1
  2. March 9th, 2010 at 18:54| #2