Membuat Buku Tamu Slide Show Di Blogger

Kita sebagai pemilik Blog tentunya harus bisa menyediakan buku tamu untuk tujuan para pengunjung dapat menuliskan nama,komentar,kesan dan pesannya..setidaknya pemilik Blog tau tentang apa yang telah terjadi pada blognya,kadang kala kita tidak setiap hari membuka Blog kita,dengan kita menyediakan buku tamu di Blog kita sudah membuktikan bahwa Blog kita tetap menjalankan komunikasi antara pemilik Blog dengan pengunjung walaupun pemilik Blog sedang tidak meng-akses Blognya..

Sedikitnya Blog kita menjadi dinamis untuk dikunjungi.

Buku tamu ini sangat populer dengan sebutan ShoutBox,yang bekerja sangat otomatis apabila kita klik icon berwarna hijau dengan tulisan "Buku Tamu" maka secara otomatis akan terbuka sendiri,begitu kita klik lagi maka Buku Tamu ini akan tertutup kembali.

Untuk membuat Buku Tamu ini kita perlu membuat widgetnya terlebih dahulu di ShoutMix atau di Cbox

lalu ambil kodenya setelah melalui tahap registrasi tentunya,yang nantinya akan kita modivikasi agar bisa slide show / buka tutup secara otomatis. 

Cara Membuat Buku Tamu Slide Show Di Blogger :

• Login ke Blogger.
• Pilih Rancangan kemudian tambah Gadget.
• Pilih HTML / Java Script.
• Masukan kode script dibawah ini :

<style type="text/css">
#gb{
position:fixed;
top:100px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:2px;
}
</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">

TARUH KODE WIDGET SHOUTBOX KITA DI SINI

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

• Kita ganti tulisan yang berwarna merah "TARUH KODE WIDGET SHOUTBOX KITA DI SINI" dengan kode yang barusan kita dapatkan di ShoutMix atau Cbox.

• Simpan jika sudah selesai.

Selamat Mencoba