Cara Membuat Tombol Show atau Hide di Sidebar Blog

kevinservis TIPS BLOG 27 Mar 2013

Bagi Kamu yang bingung bagaimana cara membuat tombol show/hide atau lihat/tutup pada sidebar blog, nah kali ini Saya akan share caranya. Dengan menggunakan tombol ini, bukan hanya membuat blog lebih cantik, dan juga Kamu dapat menghemat pemakaian ruang di sidebar blog, seperti yang kalian lihat sidebar punya blog Saya, yang ada di sebelah kanan blog Saya.

Untuk caranya ikuti tutorial dibawah ini :

1. Log in ke blogger Kamu
2. Pilih template, klik edit html
3. Centang expand template widget
4. Cari judul sidebar blog Kamu, misalkan Tutorial Blog (untuk mencari tekan ctrl + F atau tekan F3) , cari yang hampir sama dengan dibawah ini :
<b:widget id='HTML2' locked='false' title='Tutorial Blog' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>
Keterangan :

• Ganti kode berwarna hijau dengan kode dibawah ini :
<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;">[Show/Hidden]<\/a>'); /* ]]> */ </script><data:title/></h2><script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:none;">'); /* ]]> */ </script>


• Lalu masukan kode dibawah ini sebelum kode yang berwarna biru :
<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>


5. Dan ini adalah contoh hasil dari blog Saya :
   
   <b:widget id='HTML2' locked='false' title='Tutorial Blog' type='HTML'>
   <b:includable id='main'>
     <!-- only display title if it's non-empty -->
     <b:if cond='data:title != &quot;&quot;'>
    <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;">[Show/Hidden]<\/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'>
       <data:content/>
     </div>
   
    <b:include name='quickedit'/>
     <script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
   </b:includable>
   </b:widget>
      
6. Sekarang klik pratinjau, apakah sudah berhasil atau belum 
7. Jika sudah berhasil, klik simpan dan lihat hasilnya 
8. Mudahkan, Selamat Mencoba,,,