Hidden Widget Sidebar untuk Menghemat Tempat

Menyembunyikan isi gadget sidebar di blogger-Membuat isi tidak ditampilkan sebelum pengunjung ngklik link untuk membuka atau menampilkan isi widgetnya, Jadi hanya judul widgetnya saja yang ada beserta link untuk membukanya seperti sobat lihat di sidebar blog ini pada widget "TOP ARTIKEL" jika link [Lihat] yang ada disampingnya diklik, maka isinya akan keluar kebawah dan bila diklik lagi akan menutup.

Fungsinya sih masih sama seperti menu scrolling agar sidebar tidak kepenuhan meskipun blogger banyak memasang widget, Anda bisa menghemat tempat disidebar.Yang mau pasang ikuti cara berikut:

1. Download template dan simpan sebagai backup.
2. Edit HTML, centang "Expand Template Widget", lalu cari widget yang akan disembunyikan isinya,misal "Kategori" kodenya seperti ini:

• <b:widget id='Label1' locked='false' title='Kategori' type='Label'>
  <b:includable id='main'>
  <b:if cond='data:title'>
  <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <ul>
  <b:loop values='data:labels' var='label'>
  <li>
  <b:if cond='data:blog.url == data:label.url + &quot;?max-results=30&quot;'>
  <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
  <b:else/>
  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=30&quot;'><data:label.name/></a>
  </b:if>
  <span dir='ltr'>(<data:label.count/>)</span>
  </li>
  </b:loop>
  </ul>
  
  <b:include name='quickedit'/>
  </div>
  </b:includable>
  </b:widget>

2. Hapus kode <h2><data:title/></h2> lalu ganti dengan kode berikut :

• <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[Buka]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>
  

3. Setelah itu sisipkan kode dibawah ini, persis diatas </b:includable>

• <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
  

4. Jika digabungkan menjadi seperti ini :

• <b:widget id='Label1' locked='false' title='Kategori' type='Label'>
  <b:includable id='main'>
  <b:if cond='data:title'>
  <h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd; document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + rnd + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;" style="float:right;margin-right:0px;">[Buka]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>
  </b:if>
  <div class='widget-content'>
  <ul>
  <b:loop values='data:labels' var='label'>
  <li>
  <b:if cond='data:blog.url == data:label.url + &quot;?max-results=30&quot;'>
  <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
  <b:else/>
  <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?max-results=30&quot;'><data:label.name/></a>
  </b:if>
  <span dir='ltr'>(<data:label.count/>)</span>
  </li>
  </b:loop>
  </ul>
  
  <b:include name='quickedit'/>
  </div>
  <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
  </b:includable>
  </b:widget>
  

5. Simpan Template.

Anda bisa merubah nama link [Buka] sesuai keinginan, misal Lihat, Open dll. Selamat mencoba