Membuat Tombol Maximize Dan Minimize Pada Widget Blog

Kita sudah pernah membahas trick blog cara membuat hidden sidebar widget (silahkan dibaca dulu), dimana tujuan dari trik blog ini adalah agar kita bisa menyembunyikan widget tertentu.

Masih berkaitan dengan trik membuat hidden sidebar widget tersebut, sekarang kita akan membahas trik blog membuat tombol maximize dan minimize pada widget blog.

Cara kerjanya hampir sama. Hanya saja pada trik blog terdahulu, cara membuat hidden widget, jika kita ingin menyembunyikan widget tertentu, kita perlu meletakkan link dengan tulisan [+/-] atau [Open] dan kemudian di klik. Tentu ini akan mengganggu tampilan blog Sodara.

Nah, trik ini akan Ayas optimasi lagi, sehingga kita bisa membuat tombol maximize dan minimize, untuk menyembunyikan dan memunculkan widget tertentu. Tentunya Blog Sodara akan semakin keren, tampilannya pun akan berbeda dan tampak professional. Bisa Sodara lihat screenshot nya.

Bagaimana tricks blog membuat tombol maximize dan minimize pada widget blog? Yuk kita bahas bersama..

Pertama, tentukan dulu widget mana yang akan Sodara beri tombol maximize dan minimize.

Sebagai contoh kasus, Ayas akan meletakkan tombol ini pada widget yang berjudul "Friend's Text Link" (bisa dilihat contohnya pada footer).

Menuju ke 'Layout' - 'Edit HTML'. Download dulu template Sodara.

Centang pada 'expand template widget'

Cari kode widget yang telah Sodara tentukan. Sebagai contoh, Ayas mau pake trik ini pada widget di sidebar Ayas yang judul 'Friend's Text Link', maka Ayas mencari kode seperti ini :

title='Friend's Text Link'

Cara yang paling mudah dengan Ctrl+F, maka akan muncul kotak pencarian, lalu ketik

title='nama widget sodara'

Kemudian enter.

Maka muncul kode2, yang perlu diperhatikan hanya kode untuk widget Sodara. Contoh :

<b:widget id='HTML2' locked='false' title='Friend's Text Link' 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>

Perhatikan, kode berhuruf tebal adalah awal dan akhir dari kode widget Sodara.

Tidak perlu bingung, perhatikan saja pada kode berwarna merah.

Lalu kode ini :

<h2 class='title'><data:title/></h2>

GANTI dengan kode :

<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('<img onclick="document.getElementById(&quot;' + rnd + '&quot;).style.display = &quot;inline&quot;" src="http://i28.tinypic.com/8xq3jb.png" style="float:right;margin-right:0px;cursor:hand;"/>');
document.write('<img onclick="document.getElementById(&quot;' + rnd + '&quot;).style.display = &quot;none&quot;" src="http://i26.tinypic.com/300bfis.png" style="float:right;margin-right:2px;cursor:hand;"/>');
/* ]]> */ </script><data:title/></h2>
<script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:inline;">'); /* ]]> */ </script>

Kemudian copy kode ini :

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

Paste kode tersebut di ATAS ato Sebelum kode :

</b:includable>

Sehingga, keseluruhan kode akan menjadi seperti ini :

<b:widget id='HTML2' locked='false' title='Friend's Text Link' 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('<img onclick="document.getElementById(&quot;' + rnd + '&quot;).style.display = &quot;inline&quot;" src="http://i28.tinypic.com/8xq3jb.png" style="float:right;margin-right:0px;cursor:hand;"/>');
document.write('<img onclick="document.getElementById(&quot;' + rnd + '&quot;).style.display = &quot;none&quot;" src="http://i26.tinypic.com/300bfis.png" style="float:right;margin-right:2px;cursor:hand;"/>');
/* ]]> */ </script><data:title/></h2>
<script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display:inline;">'); /* ]]> */ </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>

Kalo dah, silahkan disimpan, trus lihat hasilnya. Silahkan coba, apakah tombol maximize dan minimize pada widget blog Sodara sudah berfungsi dengan baik. Klo belum, silahkan diteliti lagi, apakah ada kode untuk membuat tombol maximize dan minimize pada widget blog Sodara yang kurang.

Klo sudah berfungsi dengan baik, happy blogging aza..!!!