Memasang Widget Buku Tamu Dengan Slide

Situseo Blog : Pada dasarnya script ini bisa dipergunakan untuk menyembunyikan berbagai widget, yang fungsinya untuk menghemat lembar halaman blog supaya tidak terlalu penuh oleh widget, buku tamu yang dimaksud adalah sebuah widget chat yang dipasang dalam blog, yang biasanya dipergunakan untuk saling menyapa.

Script widget buku tamu biasanya didapat dari layanan cbox atau shoutmix, untuk mendapatkan scriptnya kita harus mempunyai akun dari layanan tersebut, baik itu cbox maupun shoutmix. Pada situs layanan tersebut kita bisa langsung setting tampilan widgetnya, mulai dari warna dan ukurannya dll.

Sebagai contoh saya anggap kalian sudah memiliki script dari layanan situs cbox atau pun shoutmix, untuk menyembunyikan widget tersebut kita perlu tambahan script penyembunyi (slide), coba perhatikan script dibawah ini dan bagaimana cara memasang script cbox atau shoutmix menjadi tersembunyi (slide) :

1. Masuk akun blogger
2. Pilih Design atau Rancangan - Page Element - Add gadget/javascript
3. Sisipkan widget (script cbox atau shoutmix) dan Save

Untuk jelasnya perhatikan script dibawah ini :

<style type="text/css">
#gb {position:fixed;top:50px;z-index:+1000;}
* html #gb {position:relative;}
.gbtab {height:100px;width:30px;float:left;cursor:pointer;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRkPh2S-w7AsY_EBMbVO9-UyAst97qBIJsOTLk9eZVE4pzvoj-iSrCKhieKpvM_-4gzs19Pkj1So5g74sBfBMGm4mg7Q_FA-VKvnw7RcyYCuROj16q4I2aGPsS3nyEoPeeJF8jvHCJu0s/s1600/tabs.png') no-repeat;}
.gbcontent {float:left;border:2px solid #A5BD51;background:#F5F5F5;padding:10px;}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

<!-- Simpan Kode Widget (buku tamu) Disini -->

<br/>
<span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 10px;"><a href="http://situseo.blogspot.com/2011/11/menyembunyikan-berbagai-widget-buku.html" target="_blank">thank you for visiting</a></span>
<div style="text-align:right">
<a href="javascript:showHideGB()">[close]</a></div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Tentukan ketinggian posisi widgetnya, pada script tersebut pada posisi 50 px dan letakan script   widget pada keterangan yang bertanda merah.

Semoga bermanfaat,