Cara buat tombol maximize dan minimize

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.
Untuk Caranya sbb:
1. klik Layout - 'Edit HTML'. Download dulu template Sodara.
2.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 Cari kode:

<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>

Ganti kode  <h2 class='title'><data:title/></h2>  dengan kode dibawah:

<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>

Cari kode ini:

</b:includable>

Simpan kode  berikut diatas kode </b:includable>

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

Simpan....Lihat hasilnya.
Selamat Mencoba

Related Post: