Cara Membuat Widget Tersembunyi dengan Mengklik Gambar

Alhamdulillahirabbilalamin, pada kesempatan kali ini saya masih bisa memberikan postingan yang sekiranya bermanfaat untuk para pembaca semua, disela-sela kesibukkan PKL saya yang kadang cukup menyita banyak waktu. Namun saya juga tetap berusaha eksistensi dalam urusan postingan blog  *genbatte*
Oke kita langsung saja, Membuat Widget Tersembunyi dengan Mengklik Gambar cukup mudah sebenarnya, kita hanya menambahkan 2 script pada widget, yang pertama script untuk widget tertentu yang akan kita sembunyikan, dan yang kedua widget gambarnya, yang apabila kita klik widget yang pertama akan muncul dan bila diklik lagi akan tersembunyi kembali.
Berikut langkah-langkahnya:

• Widget Pertama

1. Masuk ke dashboard blog, pilih tata letak, pilih tambah gadget, lalu cari HTML/JavaScript.
2. Kemudian Pastekan kode dibawah ini:

<style type="text/css"> #at{ position:fixed; right:35%; z-index:+1000; } * html #at{position:relative;} .attab{ height:0px; width:0px; float:top; cursor:pointer; background:url(url); } .atcontent{ float:left; border:2px solid #009999; background:url(#)#000000 repeat-x bottom center scroll; -moz-border-radius:10px; padding:10px; } .atcontent:hover{ border:2px solid #009999; background:url(#)#ffffff repeat-x bottom center scroll; } </style> <script type="text/javascript"> function showHideAT(){ var at = document.getElementById("at"); var w = at.offsetWidth; at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0); at.opened = !at.opened; } function moveAT(x0, xf){ var at = document.getElementById("at"); var dx = Math.abs(x0-xf) > 25 ? 35 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; at.style.bottom = x.toString() + "px"; if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);} } </script> <div id="at"> <div class="attab" onclick="showHideAT()"> </div> <div class="atcontent"> <div align="center"> <div style="background:url(#) no-repeat;"> Masukkan Script Widget Kamu </div> </div> <br /> <div align="right"> <a href="javascript:void(0);" onclick="showHideAT()"><img border="0" src="http://i859.photobucket.com/albums/ab159/yudhizh/ButtonCloseWhite-BlackStroke.png" alt="close" title="Tutup Cbox" /></a></div> </div> </div> <script type="text/javascript"> var at = document.getElementById("at"); at.style.bottom = (-200-at.offsetWidth).toString() + "px"; </script>

3. Pada kata Masukkan Script Widget Kamu, ganti dengan widget yg akan disembunyikan.
4. Klik Save.

• Widget Kedua

1. Caranya sama seperti langkah pertama.

2. Kemudian Pastekan Kode dibawah ini:

<a href="javascript:void(0);"onclick="showHideAT()"/><img src="####" alt="cbox" title="XXXX"/></a>

3. Symbol #### diganti dengan URL gambar kamu, dan XXXX ganti dengan keterangan Widget.
4. Tentukan Peletakkannya dan SAVE.

Selesai, sekarang coba lihat hasilnya 
Semoga bermanfaat dan jangan lupa komentarnya ya.. good luck!

Posted in: Tips dan Trik,Tutorial Blog