Cara Membuat Spoiler

Mumpung lagi bengong-bengong aja, jadi saya menyisihkan waktu untuk menulis artikel ini.  

Apa sih spoiler itu?

Mungkin bagi para kaskuser spoiler sudah bukan hal yang asing lagi, tapi mungkin masih ada yang belum tahu mengenai spoiler ini. Spoiler adalah sebuah command untuk membuat data/tulisan/gambar kita bisa kita buka(terlihat isinya) atau tutup(tidak terlihat isinya), jadi dengan adanya spoiler tulisan/gambar yang berukuran besar atau banyak bisa kita minimalis tampilannya dengan menyembunyikan sebagian data-data besarnya, sehingga tampilan dari penulisan menjadi singkat dan rapih. Dan jika data yang kita minimalis ingin dilihat, kita tinggal mengklik button spoiler tersebut.

Maaf ya jika penjelasan saya salah, penjelasan ini muncul sendiri di otak saya saat lagi makan jadi saya tulis deh, hehehehehe.....

Ok kita langsung masuk ke pointnya, bagaimana cara membuatnya?

Kalau di Kaskus command yang digunakan

[Spoiler="NamaSpoiler"]Isi spoiler[/Spoiler]

Nah kalo di blog ada 2 jenis spoiler, ada yang menggunakan Script dan ada yang menggunakan code CSS. Ikuti saja langkah-langkah ini :

Spoiler 1 Dengan Menggunakan Command Div(Code CSS)

Ini tampilannya dan Codenya ada di dalamnya klik tampilkan untuk melihatnya.

Jika ingin menggunakan spoiler ini, masukanlah Code ini pada setiap data yang ingin di buat spoilernya:

<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#e1e1e1; color:#000; border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;" value="Tampilkan" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"></div>
<div style="padding:5px; text-align:justify;"><div style="display: none;">TULISAN/GAMBAR YANG DISEMBUNYIKAN</div></div></div !akhir spoiler>

Kamu dapat mengubah :

Text Align : Perataan teks pada button spoiler.
Input style Width : Lebar button(input) spoiler.
Input style Background-color : Warna latar button(input) spoiler.
Input style Color : Warna huruf button(input) spoiler.
Input style Value : Kalimat pada button (Value normal button anda).
Value dengan kata "Sembunyikan" : Kalimat pada button saat akan menutup spoiler.
Value dengan kata "Tampilkan" : Kalimat pada button saat akan membuka spoiler.
Div style padding : Padding teks/gambar yang disembunyikan.
Div style text-align : Peratan teks yang disembunyikan.
Tulisan/Gambar yang disembunyikan : data anda yang ingin disembunyikan.

Spoiler 2 Dengan Menggunakan Script

Nah cara ke-2 ini cara yang saya pakai untuk membuat Related Post saya, bisa anda lihat di bawah.

Ini tampilannya dan Scriptnya ada di dalamnya klik tampilkan untuk melihatnya.

Tampilkan/Sembunyikan Caranya

Langkah-langkah membuatnya sebagai berikut:

• Setelah anda login/masuk ke Blogger, klik Tata Letak/Rancangan dan pilih Edit HTML.
• Lalu Cari kode ]]></b:skin> 
• Setelah itu letakkan kode CSS berikut di atasnya:
  
  /*-----Toggle Spoiler-----*/
  .widgethidden {display:none}
  .widgetshown {
  display:inline
  overflow:auto;
  }
• Kemudian letakkan script ini di bawah kode ]]></b:skin>:
  
  <script type='text/Javascript'>
  function togglespoiler (postid){
  var whichpost = document.getElementById(postid);
  if (whichpost.className=="widgetshown"){
  whichpost.className="widgethidden";
  }
  else{
  whichpost.className="widgetshown";
  }
  }
  </script>
• Jika sudah selesai meletakan Script dan CSS code, gunakan code ini setiap anda ingin membuat spoiler :
  
  <div style="text-align:center; margin:0px 0px; font-size:auto; font-weight:bold;">
  <a href='javascript:togglespoiler ("spoiler1")' style='border:1px solid #ccc; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; padding:3px 10px; background-color:#e1e1e1;' title='Click for expand'>Tampilkan/Sembunyikan</a></div>
  <div class='widgethidden' id='spoiler1'>
  

  TULISAN/GAMBAR YANG DISEMBUNYIKAN

  </div>
  Catatan:
  Jika anda akan membuat spoiler lebih dari satu, maka pada link javascript dan id-nya yang berwarna Merah bisa diubah menjadi spoiler2, spoiler3, dst. Atau bisa juga membuat nama id sendiri, seperti: Artikel, Trick, Tips, dll.
  Anda dapat mengubah tulisan-tulisan berwarna biru sesuai keinginan anda.
  Keterangannya:
  
  
  - Text-align : Perataan tulisan pada button.
  - Margin : Pengaturan margin button.
  - Font-Size : Ukuran font pada button.
  - Font-Weight : Karajteristik font pada button (bold/italic/underline).
  - Padding : Pengaturan padding button.
  - Background-Color : Warna background button.
  - Title : Keterangan button.
  - Tampilan Tulisan Pada Spoiler (Tampilkan/Sembunyikan) : Bisa di ubah sesuai dengan selera.

Selamat mencoba dan semoga bermanfaat untuk anda.

Share this artikel:

Ikon ini merupakan link ke situs bookmark sosial dimana pembaca dapat berbagi dan menemukan halaman web baru.