Cara Membuat Spoiler Show Hide Untuk Teks Dan Image Pada Blogspot

Tulisan ini mungkin terbilang basi karena jika kita searching di si Mbah akan muncul beragam tulisan yang memuat masalah ini. Tapi sehubungan ada saja sobat yang menanyakan masalah ini maka saya coba membahasnya, siapa tahu ada di antara sobat yang membutuhkannya juga.

Sepengetahuan saya, spoiler ini ada dua jenis (mungkin ada sobat yang ingin menambahkan/mengoreksi): Pertama, spoiler yang memakai perintah langsung, yaitu dengan menempatkannya di atas teks/image yang akan disembunyikan, seperti spoiler pada Award Valentine, dan kedua, spoiler yang menggunakan perintah tidak langsung, yaitu dengan menambahkan script dan kode CSS pada template blog, seperti "Membuat Toggle Spoiler Untuk Blok Komentar".

Spoiler Jenis Pertama
Jika kamu tertarik dengan spoiler jenis pertama ini silahkan klik tampilkan caranya di bawah ini:

Pada setiap ingin membuat spoiler, buatlah perintah seperti berikut:

<div !mulai spoiler><div style="text-align:center;"><input style="width:100px; background-color:#e6e6e6; 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 AKAN DISEMBUNYIKAN</div></div></div !akhir spoiler>

Kamu dapat mengubah perataan teks input, lebar kotak input, warna latar input, warna huruf input, kalimat pada value, padding teks/image yang disembunyikan, dan perataan teks yang disembunyikan sesuai keinginan kamu.

Spoiler Jenis Kedua
Jika kamu tertarik dengan spoiler jenis kedua (lihat contoh pada Recent Readers dan Related Post) silahkan klik tampilkan caranya di bawah ini:

Tampilkan/Sembunyikan Caranya

Langkah-langkah membuatnya sebagai berikut:

• Login ke akun Blogger kamu.
• Dari halaman Dasbor, klik Tata Letak dan pilih Edit HTML.
• Cari kode ]]></b:skin> (gunakan Control F atau F3):
• Letakkan kode CSS berikut di atasnya:

  
  /*-----Toggle Spoiler-----*/
  .widgethidden {display:none}
  .widgetshown {display:inline}
  

• Lalu letakkan script berikut 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>
  

  Catatan:

  Bagi yang sudah memasang CSS dan script toggle spoiler untuk blok komentar, abaikan perintah di atas.

• Setelah itu, pada setiap ingin membuat spoiler, buatlah perintah seperti berikut:

  
  <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:#e6e6e6; title=Click for expand>Tampilkan/Sembunyikan</a></div>
  <div class=widgethidden id=spoiler1>
  TULISAN/GAMBAR YANG AKAN DISEMBUNYIKAN
  </div>
  

  Catatan:

  Jika kamu akan membuat spoiler lebih dari satu, maka pada link javascript dan id-nya ganti menjadi spoiler2, spoiler3, dst. Atau bisa juga membuat nama id sendiri, seperti: foto, puisi, kartun, dll.

  Kamu dapat mengubah perataan teks, margin atas-bawah dan kanan-kiri, ukuran huruf, besaran huruf, judul link (kalimat Click for expand), dan nama link (kalimat Tampilkan/Sembunyikan) sesuai keinginan kamu.

Nah, segitu aja sob, mudah-mudahan bermanfaat. Selamat mencoba....

Referensi: Dari berbagai sumber