Salam blogger,
kalli ini kita membahas cara memasang buku tamu(shoutbox) di samping blog,seperti blog saya itu tuch....
Sebelumnya sobat sekalian harus sudah mendaftar dulu dong di http://www.shoutmix.com/main/
1.Anda daftar dengan cara mengklik tulisan Create Shoutbox
2.Setelah itu isikan data untuk membuat Shoutbox dari form yang telah disediakan.
3.Jika sudah terdaftar,Login dengan ID yang telah sobat siapkan.
4.Sobat atur tampilan shoutboxnya,pada judul tabel Display kolom Style & Colors,klik menu Style & Colors,dan sobat atur mulai dari warna sampai templatenya,jangan lupa klik Save Settings.untuk menyimpan pengaturan yang telah sobat buat.
5.Sobat juga bisa menambah ikon Smiley pada judul tabel Display kolom Smiley,tapi untuk menambahnya sobat bisa cari kode Smileynya di Google.
6.Jika sudah diatur semua,jangan lupa klik Save Setting ya,,,
7.Pada Judul tabel Quick start silahkan klik Get Codes untuk mendapatkan kode Html dari buku tamu sobat sekalian.
8.Copy kodenya yang di Generated Codes.ke elemen laman sobat,dengan cara masuk Elemen Laman,kemudian tambah Gadget,pilih HTML/JavaScript,kemudian pastekan code Shoutboxnya kemudian simpan.

<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/AVvXsEjsDV3n_Hqa_evHeaEcvt4lLLY5S8CKROzh91KfQXHtIUIblblQZIUFLZtEPx6Q8TWY3xz5DDqRYF7PQts7n6KSmswFfsiEGla6aEDaQLmkazyhF7Mu-jvOT5JMovBOi9OcM8O_bc0-gtPL/') 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 buku tamu anda di bawah ini --> <div style="text-align:right"> <a href="javascript:showHideGB()"> [close] </a> </div> </div> </div> <small>Widget by: <a href="http://rezdown7.blogspot.com/" target="_blank">Rezdown7</a></small> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

3.jadi kode Html nya menjadi seperti 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/AVvXsEjsDV3n_Hqa_evHeaEcvt4lLLY5S8CKROzh91KfQXHtIUIblblQZIUFLZtEPx6Q8TWY3xz5DDqRYF7PQts7n6KSmswFfsiEGla6aEDaQLmkazyhF7Mu-jvOT5JMovBOi9OcM8O_bc0-gtPL/') 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 buku tamu anda di bawah ini --> <!-- Begin ShoutMix - http://www.shoutmix.com --> <iframe title="kinvanburton" src="http://www.shoutmix.com/?kinvanburton" width="250" height="450" frameborder="0" scrolling="auto"> <a href="http://www.shoutmix.com/?kinvanburton">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 --> <div style="text-align:right"> <a href="javascript:showHideGB()"> [close] </a> </div> </div> </div> <small>Widget by: <a href="http://rezdown7.blogspot.com/" target="_blank">Rezdown7</a></small> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

Catatan: kode berwarna merah itu masukkan kode html sobat di dalamnya,

semoga bermanfaat yaa 
Sumber:http://rezdown7.blogspot.com/