Membuat buku tamu buka tutup di kanan Blog

Kalo kita berkunjung di suatu blog/web di sebelah kanan  biasa nya kita sering menjumpai sebuah gadget buku tamu yang mana kalo kita klik di membuka dan kalau kita klik lagi aplikasi itu menutup,nah.. di sini saya mencoba untuk menyuguhkan Buku tamu shoutmix yang seperti itu,langsung aja ya..!!!

Sebelum nya kita kita ambil kodenya shoutmix nya ke situs DISINI


Kalo dah kesana ikutin langkah - langkah berikut :

• Klik create shoutbox
• Isilah data data kita ,username maupun password nya yang berguna untuk login nanti centang persetujuan  lalu continue.( note : jika anda udah ada account di shoutmix anda tinggal login aja.)
•  setelah login berhasil anda cari menu setting di situ tersedia tabulasi untuk mengedit shoutmix yang akan kita pakai seperti tabulasi general,display,security kalo udah pas settingan nya jangan lupa di save.
• Copy embed kode nya (SCRIPT KODE BUKU TAMU) yang akan sisipkan pada di gadget blog nanti.

Terus bagaimana buat buku tamu buka tutup di kanan blog. 

1. Anda login ke Blogger.
2. Pergi ke Rancangan ,Element laman dan klik tambahkan Gadget.
3.Klik HTML/JavaScript.
4. Copy paste Kode di bawah 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/AVvXsEjeFDop_kZZHmZxKdmD2TsZLtcBsLDrNPFs1zext8FBuKpplN5kn2DY2tJOpCUe0aREbhO13y5Qe3MYod3PRGn1jOMckYftOosnPuZoJcvTYoJYTpnRmlXUBWbczjlmI_AlPbGDT9FpBxgq/') 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">

[MASUKAN SCRIPT KODE BUKU TAMU ANDA DISINI]

<br/>

Mau punya buku tamu seperti ini?<br/>

Klik di

<a href="http://www.kikiyo.co.cc/2010/05/membuat-buku-tamu-buka-tutup-di-samping.html">

sini

</a>

<div style="text-align:right">

<a href="javascript:showHideGB()">

[tutup]

</a>

</div>

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script>

Nah jangan lupa tulisan yang berwarna kuning di atas anda ganti dengan SCRIPT KODE BUKU TAMUyang anda dapat di shoutmix.


5. Selesai dan simpan.

Akhirnya buku tamu dapat di nikmati seperti cntoh di web ini,semoga bermamfaat.