Fajar Herianto

Cara membuat show hide widget disidebar blogger

show hide widget

Cara membuat show hide widget disidebar blogger


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 != &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>

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(&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>
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 != &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>

10. Pratinjau terlebih dahulu, lalu Save..

Demikian cara membuat show hide widget, semoga berhasil dan selamat mencoba.. 

Posting Komentar

Fajar Herianto

{facebook#https://www.facebook.com/fajarcintalia} {twitter#https://twitter.com/HeriantoFajar} {google-plus#https://plus.google.com/u/0/118173459679605761698/posts} {youtube#https://www.youtube.com/user/aplikasiterunik} {instagram#https://www.instagram.com/aplikasiterunik/}

Formulir Kontak

Nama

Email *

Pesan *

Diberdayakan oleh Blogger.
Javascript DisablePlease Enable Javascript To See All Widget