Cara Membuat Shoutmix/Buku Tamu Melayang

Karena banyak sekali yang menanyakan bagaimana cara untuk membuat shoutmix melayang, maka saya putuskan untuk membuat artikel mengenai cara membuat shoutmix melayang. mungkin hal ini uda kuno bagi yang uda lama didunia internet, tapi sangat membantu bagi yang tidak tau. Ok langsung saja, cek it dot..



Ada langkah-langkah yang harus dilakukan:
1. Daftar diri anda di shoutmix, cara registrasi gampang kok n gratis kok.. hehe..
2. Copy kode html yang diberikan.
3. Masuk kedalam blog anda dan kebagian layout -> klik Add a gadget - > lalu pilih HTML/JavaScript
4. Masukan kode 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/AVvXsEgL1gl2P07pbmXXd-dZCXfjRZF2QzWA8TO-g45A-4BIQNMDZiEHfuzhQvEit_m0mtd2Fgu8-t4Kkp4E0vm-fd08Tfoo3DVY2xZbxPmp6J4CSGTwEGU-c5NGdKiAGh8JjjzFx3Re92WDBKqR/') 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">

<!-- Begin ShoutMix - http://www.shoutmix.com --><iframe title="ajun5292" src="http://www.shoutmix.com/?ajun5292" width="100%" height="460" frameborder="0" scrolling="auto"><a href="http://www.shoutmix.com/?ajun5292">View shoutbox</a></iframe><br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br /><!-- End ShoutMix -->

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>


NB: pada bagian yang di tandai warna merah, gantikan dengan kode yang di berikan oleh shoutmix.
     
NB:

• Jika mau mengubah jarak dari atas menuju tabs buku tamu bisa mengganti jumlah px sesuai keinginan (ditandai dengan tulisan warna orange di kode)
• Jika mau mengubah ketebalan dan warna border luar bisa mengganti jumlah px  dan jika warna  ganti  #A5BD51  sesuai yang diinginkan  (ditandai dengan tulisan warna hijau di kode)
• Jika mau mengubah warna background bisa mengganti warna  #F5F5F5  sesuai yang diinginkan  (ditandai dengan tulisan warna biru di kode)        
• Jika mau mengubah Mengatur jarak dari tabel ke kolom chat bisa mengganti jumlah px sesuai yang diinginkan  (ditandai dengan tulisan warna ungu di kode) 

5. Lalu klik ok, maka shoutmix andapun akan menggantung dibagian scroll kanan atas.

Semoga artikel ini berguna untuk pembaca.. Salam blogger.. :D