Cara Membuat Show Hidden Widget di Sidebar

Cara Membuat ShowHide Widget di Sidebar - Untuk menghemat space disidebar, salah satu alternatif yang bisa lakukan adalah dengan menggunakan script show hide widget di sidebar dan menghemat suatu widget yang sangat panjang.berikut Cara Membuat ShowHide Widget di Sidebar dan berikut sedikit gambaran untuk Show/Hidden di sidebar

1. Masuk ke akun Blogger Anda.

2. Klik Rancangan > Edit HTML.

3. Klik Download Template Lengkap untuk membackup template.

4. Beri tanda centang pada Expand TemplateWidget.

5. Cari judul nama Sidebar anda , Misalnya 'KONTES SEO'

6. Setelah ketemu, anda t perhatikan kode berwarna merah seperti dibawah :

<b:widget id='HTML5' locked='false' title='KONTES SEO' 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>

7. Hapus kode <h2 class='title'><data:title/></h2> ganti dengan kode di bawah 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>

8.  Selanjutnya anda lihat ke bawah sedikit ada kode </b:includable>.Tambahkan kode dibawah ini di atas kode </b:includable>


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

9. SIMPAN

Hasilnya :

<b:widget id='HTML5' locked='false' title='KONTES SEO' 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>

Selamat Mencoba dan Berhasil ^^