Cara membuat show hide widget --Untuk menghemat space disidebar, salah satu alternatif yang bisa lakukan adalah dengan menggunakan script
show hide widget di sidebar.
Script ini sederhana, hanya sedikit memodifikasi tag <h2> sidebar, untuk beberapa template mungkin tag judul sidebar berbeda. Namun sobat jangan khawatir, sebisa mungkin saya permudah langkah-langkah untuk
membuat show hide widget.
Peringatan : sebelum memulai modifikasi template usahakan download terlebih dahulu template sobat.
Cara membuat show hide widget
1. Login ke blogger.com
2. Rancangan --> Edit HTML
3. Ceklist expanwidget templates
4. Cari nama judul sidebar sobat, misalnya "Ads"
5. Setelah ketemu, sobat perhatikan kode berwarna merah seperti dibawah :
<b:widget id='HTML5' locked='false' title='Ads' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
6. Tandai kode tersebut, hapus dan 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("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; 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>
7. Selanjutnya sobat scroll ke bawah sedikit lihat tag
</b:includable>
8. Masukkan kode berikut diatasnya :
<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>
9. Kode lengkapnya jadi seperti berikut :
<b:widget id='HTML5' locked='false' title='Ads' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<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("' + rnd + '"); tmp.style.display = (tmp.style.display == "none") ? "block" : "none"; 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>
10. Pratinjau terlebih dahulu, lalu Save..
Demikian
cara membuat show hide widget, semoga berhasil dan selamat mencoba..
Title : Cara membuat show hide widget disidebar blog
Description : Cara membuat show hide widget --Untuk menghemat space disidebar, salah satu alternatif yang bisa lakukan adalah dengan menggunakan script ...