Cara Membuat ShowHide Widget di Sidebar - Mas Kakung

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 'INFO SITE'
6. Setelah ketemu, anda  perhatikan kode berwarna merah seperti dibawah :

<b:widget id='HTML5' locked='false' title='INFO SITE' 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='INFO SITE'  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 ^^

Related Posts