Cara Membuat Show/hide Widget Pada Blog

Gang tutorial kali ini akan share tips trik blog yang sudah direquest oleh salah satu sobat gang tutorial di komunitas blogger madura lewat chat pribadi via facebook kemaren malem. sebut saja firman ghazali.

Apasih tips trik blog yang sudah direquest tersebut?. Yup, bener banget sob. Tips trik blognya adalah cara buat widget blog show/hide seperti Recent Post pada blog ini. Karena widget standar dari blogger sendiri tidak langsung tersembunyi alias terbuka. Nah, untuk membuat widget blogger bisa buka tutup silahkan ikuti caranya di bawah ini :

• Login ke blogger
• Rancangan > Tata Letak > Edit HTML
• Jangan lupa Centang Expand Template Widget 
• Silahkan cari kode widget yang akan di rubah. Jika sobat memberi judul pada widget sobat, maka akan sangat mudah mencarinya. Misalnya sobat memiliki widget dengan judul recent comment, maka sobat tinggal ketikkan recent comment di fungsi pencari (ctrl+f). Apapun caranya yang penting kode widget sobat ketemu he..he...

Contohnya kode widget recent comments pada blog ini

<b:widget id='HTML3' locked='false' title='Recent Comment' 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>

• silahkan ganti kode yang <h2 class='title'><data:title/></h2> 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>

• jika sudah, silahkan tambah kode di bawah ini sebelum kode </b:includable>

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

kalo secara keseluruhan akan tampak seperti kode di bawah ini

<b:widget id='HTML3' locked='false' title='Recent Comment' 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>

OK. sampai disini dulu cara membuat show/hide widget pada blog. semoga bermanfaat dan selamat mencoba