show/hide box multi fungsi

S

esuai dengan judulnya tutorial kali ini kang mahfid kembali akan berbagi tutorial tentang Show/hide box multi fungsi ,sebenarnya kode yang digunakan adalah pengembangan dari kode show/hide box buku tamu ,dengan sedikit modifikasi kode ini bisa digunakan sesuai kebutuhan,show/hide follower,show/hide buku tamu,facebook like,seperti yang kang mahfid gunakan pada blog ini ,jadi intinya kode ini bisa digunakan secara bersamaan dalam satu web/blog ,yang perlu sobat perhatikan adalah kode kode yang akan kang mahfid jabarkan satu persatu secara lengkap jadi saya harap sobat harus memperhatikan secara teliti.coba sobat perhatikan kode GB yang berwarna merah jika sobat ingin menggunakan untuk kode yang lain sobat tinggal mengganti kode GB tersebut dengan kode-kode yang lain GS misalnya ...berikut kode css nya

<style type="text/css">
#gb{
position:fixed;
right:133px;
z-index:+500;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
margin:0;
width:30px;
float:left;
cursor:pointer;
background:url();
}
.gbcontent{
margin-top:140px;
width:260px;
float:left;
border:1px solid #404040;
background:#333;
padding:0px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, -600-w) : moveGB(0-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 35 ? 25 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 1);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div align="center">
<div style="background:#333;height:415px;width:232px;
overflow:hidden;padding-top:10px;">
-------Kode widget disini--------
</div>
</div>
<div align="center"><a href="javascript:void(0);" onclick="showHideGB()"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLcmdJTQgrkXWUmf0K_BlQCpQk2xMDEpPMh2UKs1C-ygiDS1UMGYy0twnlo7dDz0GlOxp-2COIODc8KVHT0fRR_aW5Z08roPDcX64-cauWfWbCkfzur0G-WkQGVdquwDlhAng0xeSTPpqp/s1600/close.png" alt="close" title="Click here to Close Cbox" /></a></div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.top = (-600-gb.offsetWidth).toString() + "px";
</script>

Perhatikan kode gb di atas jika akan digunakan untuk kode yang lain silahkan diganti dengan kode yang lain GS misalnya
kode di atas bisa sobat taruh di Html Java script dengan cara klik tata letak==>tambah gatget===>Pilih html java script kemudian masukkan kode css di atas.
Selanjutnya adalah membuat kode pemanggil untuk box widgetnya gunakan kode di bawah ini perhatikan juga kode gb nya harus sama dengan kode css di atas tadi  berikut kode nya

<div style='position:fixed;bottom:0;right:0;cursor:pointer;background:#333;border-top:1px solid #444;border-bottom:1px solid #222;font-weight:bold;font-size:14px;padding:3px 16px;'><a href="javascript:void(0);"onclick="showHideGB()"/>
Judul Widget disini<br/></a></div>

Untuk kode pemanggilnya bisa sobat taruh di sembarang tempat bisa juga di gabung dengan kode css nya .

Untuk cara penempatanya edit kode yang berwarna kuning . (semoga berhasil)