Cara Memasang Buku Tamu ShoutBox di Sisi Kanan Blog

Setelah berjalan-jalan ke tiap-tiap blog, saya menemukan artikel yang unik. Ada menu shoutbox di sebelah kanan blog, tapi ketika diklik langsung muncul shoutbox dari atas. Wowww itu keren sekali menurut saya. Yasud tak perlu banyak omong ya? Langsung saja ke TKP:

Shoutbox adalah Chat Room yang bisa dipasang pada tampilan widget blog anda. Seperti contoh, ini adalah chat room milik saya,

1.    Sebelumnya anda harus login dulu ke http://www.shoutmix.com/main/ agar mendapatkan kode shoutbox.
2.    Setelah membuka situs itu, klik Create Shoutbox, Lalu ikuti aturan di halaman tersebut untuk membuat shoutbox.
3.    Setelah selesai, anda akan melihat halaman baru, editlah tampilan shoutbox anda sesuka hati anda. Setelah puas dengan tampilannya, langsung dapatkan HTML kodenya.
4.    Nah, Jika sudah selesai, masuk ke blog anda.
5.    Jika ingin langsung ditampilkan di sidebar, anda bisa langsung Memasang kode shoutbox yang tadi ke gadget baru anda. Tapi bagi saya itu sangat kurang menarik. hehehe. Nih saya kasih kode kerennya.
5.    Add Gadget, Pilih HTML/Javascript, lalu masukkan kode di bawah ini:

<style type="text/css">
#gb{
position:fixed;
right:450px;
z-index:+1000;
}
#tabGb {
position:fixed;_position:relative;top:50px; right:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollright+ document.documentElement.clientWidth - offsetWidth); }
* html #gb{position:relative;}

.gbcontent{
float:left;
border:2px solid  #4173af;
background:#ffffff;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 1500-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">


<div class="gbcontent">


<!-- KODE SHOUTBOX ANDA --!>


<center><a href="javascript:void(0);" onclick="showHideGB()"><input type="button" value="Close" class="close" /></a>

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

<div id="tabGb"><a href="javascript:void(0);" onclick="showHideGB()" title="Buku Tamu"><img alt="Buku Tamu" heigth="125" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQvaCJYWxs1FOXjIUxmT2aopK2nOzuWo5ZmgDBBkXCTjlWs8I50KB5bku2pQuTx_YmVB8eTWlNnF20ugQisY88Lod4OBWjOcoPXMHf4qfd1-pfnp52Yw0GbQRNIJ5aBNxa2dTC-5vGgeE/s1600/Guestbook.png" border="0" /></a></div>







6.    Jangan lupa yang warna biru ganti dengan kode shoutbox yang barusan anda dapatkan.
7.    Sudah?? Kalau sudah langsung save aja, lalu lihat hasilnya.

GOODLUCK

Related Posts by Categories