Cara Pasang Chat box atau Shoutbox di blog

Shoutbox atau yang lebih dikenal dengan nama buku tamu ini telah digunakan oleh puluhan bahkan ratusan ribu blogger dunia untuk digunakan sebagai jejaring sosial hangat untuk berkomunikasi sesama blogger.

Selain itu, shoutbox ini juga digunakan untuk request sesuatu kepada sang admin ataupun untuk mengkritik bagaimana blog ini, bagaimana blog itu, dan sebagainya. Kan sudah ada kolom komentar? Buat apa susah-susah bikin shoutbox, malahbikin berat aja. Sobat pasti bertanya-tanya tentang itu. Memang kolom komentar juga dibuat dari sononya, tapi hanya untuk req atau koment terhadap artikel yang di komentarin tsb, kalo dia kritik di artikel yang bukan seharusnya, kita juga yang pusing kan.

Nah sobat blogger wajib gunain ni shoutbox. Ga terlalu berat kok buat di pasang di blog, memang kita harus perlu juga memerhatikan berat blog. Tapi shoutbox ini perlu juga lho untuk sobat lain yang ingin menyampaikan saran dan kritiknya.

Cara membuat shoutbox di blog :

- daftar dulu di sini http://yourshoutbox.com/ gratis kok dan registrasi pilih dan seting sesuai dengan yang sobat inginkan dan ada templatenya juga jadi tambah menarik.

-setelah daftar dan get kode cssnya di ingat atau di copy dulu di notepad.

- login blog sobat>klik tata letak> add gadged> pilih HTML/javascript
-langkah berikutnya cuma copy paste scriptnya saja  dan ganti yang warna merah save dan selesai..
simpelkan sobat, berikut ini code scriptnya :

<style type="text/css">

#gb{

position:fixed;

bottom:20px;

z-index:+1000;

}* html #gb{position:relative;}

.gbtab{

height:150px;

width:50px;

float:left;

background:url('http://i1108.photobucket.com/albums/h405/christian410/ghtrf.png') no-repeat;

}

.gbcontent {

float:left;

border:1px solid #000000;

-moz-border-radius-bottomleft:5px;

-webkit-border-radius-bottomleft:5px;

-o-border-radius-bottomleft:5px;

-khtml-border-radius-bottomleft:5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-topleft: 5px;

background: #F2F2F2; url() no-repeat bottom;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

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

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);

gb.opened = !gb.opened;

}function moveGB(x0, xf){

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

var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}

}</script>

<div id="gb">

<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">

<center>

<script type="text/javascript" src="GANTI ALAMAT ANDA/ KEY SCRIPT YOURBOX ANDA"></script>  

<br />

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

<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://sudiana-clan.blogspot.com"> widget! </a></span>

</div>

</center></div>

<script type="text/javascript">

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

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

</script>

</div>