Cara membuat buku tamu / ShoutMix di blog

Betapa pentingnya sebuah buku tamu di blog kita, dan sangat wajib ada bagi para pengunjung yang mengunjungi blog kita untuk mengetahui kekurangan dan kelebihan apa yang disampaikan oleh pengunjung tentang blog kita, untuk itu saya akan memberi tau bagaimana cara membuatnya :

1. Anda harus terdaftar dulu di ShoutMix dengan cara mendaftar di sini http://www.shoutmix.com/main/index.php, setelah terdaftar masuk dengan mengklik create shoutbox, isi semua kolomnya trus centang "I have read and agree to the Terms of Service." Lanjut klik continue. Kalo udah dapet kodenya simpan dulu kode shoutmix anda.

2. Seperti biasa login ke akun blogger anda, klik Rancangan>Lemen Halaman>Tambah Gadget>pilih HTML/JavaScript.


3. Masukkan kode berikut nih :

 <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('http://i37.tinypic.com/345o85i.gif') 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">


LETAKKAN KODE SHOUTMIX/CBOX ANDA DI SINI


<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>

4. Ganti kalimat " LETAKKAN KODE SHOUTMIX/C BOX ANDA DISINI" dengan kode shoutmix yang sudah anda simpan tadi. Sesuaikan gambar, tinggi, lebar, dan garis tepi dengan mengganti tulisan yang berwarna biru sesuai dengan selera anda.

5. Simpan dan selesai...

Posted in: Tutorial Blog