Auto Hide Trick

Blog bagi beberapa orang mungkin sudah menjadi sebagian dirinya, sehingga berusaha untuk membuatnya lebih atraktif dan menarik. Ada yang diisi dengan artikel-artikel bagus, ada juga yang memasang banyak aksesoris/widget, seperti: Google Translate, Statistik mengenai Traffic atau PageRank blog, Follower, Shoutmix, Kolom Link Exchange, dan sebagainya. Namun, seperti pengalaman saya pribadi, kadang suka binggung untuk menempatkan widget-widget tersebut. Kendala yang saya alami ketika hasil akhirnya penampilan blog tidak simetris.

Bagi saya keadaan ini mengganggu mata saya, dan berpikir jangan-jangan para sahabat blogger yang berkunjung juga tidak enak untuk lama-lama melihatnya. Akhirnya terpikir kenapa tidak menggunakan style autohide atau [+/- clickable option], seperti option ReadMore. Alasan tersebut yang akhirnya memberikan tenaga dan semangat untuk jalan-jalan ....dan Blogwalking pun dimulai. Sampai akhirnya didapat juga tuh tricknya. Trick ini sudah saya pakai dan hasilnya seperti ini:


Kebetulan juga ada sahabat blogger yang menanyakannya.....sahabat Semar. Ternyata ada juga sahabat yang menyukainya, dan akhirnya saya akan berbagi dengan sobat semua. Adapun Scriptnya yaitu :
<script type="text/JavaScript"> <!-- function show(id) { if (document.getElementById(id).style.display == 'none') { document.getElementById(id).style.display = ''; } } //--> <!-- function hide(id) { document.getElementById(id).style.display = 'none'; } //--> </script> <table cellspacing="1" cols="3" border="0"> <tbody> <tr valign="top" align="left"> <td width="202"><b>Please, select option</b></td> <td width="481">A <input type="radio" name="Option" onfocus="hide('tblB');hide('tblC');show('tblA');"> B <input type="radio" name="Option" onfocus="hide('tblA');hide('tblC');show('tblB');return true;"> C <input type="radio" name="Option" onfocus="hide('tblA');hide('tblB');show('tblC');return true;"> </td> </tr> </tbody> </table> <table id="tblA" style="DISPLAY: none" cols="1" cellpadding="2"> <tbody> <tr valign="top" align="left"> <td> You select A, table tblA is shown  </td> </tr> </tbody> </table> <table id="tblB" style="DISPLAY: none" cols="1" cellpadding="2"> <tbody> <tr valign="top" align="left"> <td> You select B, table tblB is shown  </td> </tr> </tbody> </table> <table id="tblC" style="DISPLAY: none" cols="1" cellpadding="2"> <tbody> <tr valign="top" align="left"> <td> You select C, table tblC is shown  </td> </tr> </tbody> </table>

1. Copy code diatas.
2. Sign in ke akun blogger sobat.
3. Masuk kedalam halaman "LAYOUT".
4. Klik "Page Elements".
5. Klik "Add Gadgets".
6. Klik "HTML/JavaScript".
7. Salin kode script yang sudah di-copy.
8. Ganti Kata "You select A, B, C, table tblA, B, C    is shown" dalam script dengan kata-kata atau kode widget sobat.
9. Save template.
10. Lihat hasilnya.

Gampang bukan.....Selamat mencoba & enjoy it.......
tipsandcara

Print this post

Bookmark this post: