Membuat Toggle Spoiler Untuk Menampilkan dan Menyembunyikan Widget Sidebar

Beberapa hari lalu ketika menambahkan kolom baru pada blog SMPN 1 Cikembar untuk keperluan form email contact yang dibuat toggle spoiler, seorang rekan kerja menanyakan bagaimana cara membuatnya agar bisa digunakan pada sidebar blog.

Membuat spoiler pada widget sidebar memang dapat mengirit halaman dan dapat membuat blog terlihat atraktif serta menawan. Namun jika cara yang digunakan adalah spoiler jenis pertama, maka akan cukup memakan waktu dan ketelitian karena harus memasukkan kode-kode spoiler pada setiap widget yang akan disembunyikan. Selain itu, spoiler jenis inipun hanya bisa diterapkan pada widget-widget bertipe HTML/JavaScript saja, tidak untuk widget-widget bawaan blogger, seperti profil, bloglist, arsip blog, label, dll.

Berbeda dengan spoiler jenis kedua, selain caranya cukup simpel, juga bisa diterapkan pada widget bertipe apapun karena hanya menambahkan link toggle spoiler pada kode HTML untuk judul widget tersebut dan mengganti kode HTML untuk widget-content-nya.

Untuk lebih jelasnya kamu bisa mengikuti langkah-langkah sebagai berikut:

• Login ke akun Blogger kamu.
• Dari halaman Dasbor, klik Rancangan dan pilih Edit HTML.
• Lakukan duplikasi template untuk berjaga-jaga jika terjadi masalah.
• Beri tanda centrang pada Expand Template Widget.
• Cari kode ]]></b:skin> lalu letakkan kode CSS berikut di atasnya:
  

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

  
  

  Bagi yang sudah memakai toggle spoiler pada block komentar-nya, abaikan langkah ini.

• Dan letakkan script berikut di bawah kode ]]></b:skin> tadi:
  

  <script type='text/Javascript'>
  function togglespoiler (postid){
  var whichpost = document.getElementById(postid);
  if (whichpost.className=="widgetshown"){
  whichpost.className="widgethidden";
  }
  else{
  whichpost.className="widgetshown";
  }
  }
  </script>

  
  

  Bagi yang sudah memakai toggle spoiler pada block komentar-nya, abaikan langkah ini.

• Setelah itu carilah kode berikut pada widget-widget yang akan kamu sembunyikan:
  

  <h2 class='title'><data:title/></h2>

• Ganti kode tersebut dengan kode ini:
  

  <a href='javascript:togglespoiler (&quot;widget-spoiler1&quot;)' title='Show/Hide Widget'><h2 class='title'><data:title/></h2></a>

• Kemudian pada kode berikut, yang ada di bawahnya:
  

  <div class='widget-content'>

• Ganti dengan kode ini:
  

  <div class='widgethidden' id='widget-spoiler1'>

• Simpan hasilnya dan ucapkan alhamdulillah...

Catatan:
Untuk widget-widget berikutnya, ganti widget-spoiler1 menjadi widget-spoiler2, widget-spoiler3, dst., baik pada kode HTML untuk judul (title) maupun pada kode widget-content-nya.

Nah, sekarang coba kamu klik pada judul widget-widget sidebar kamu, apakah sudah bisa di Show/Hide?