Membuat Buku Tamu di Blog

Simak dahulu buka tamu punya saya disebelah kanan anda ....
Udah keliatan khan ???
Buku tamu tersebut bisa buka tutup buka tutup ...
Dan isi buku tamu itu sendiri adalah shoutbox untuk chatting ...

Namun, sebelum anda membuat buku tamunya, silahkan untuk mendaftar dan mengambil shoutboxnya di www.shoutmix.com
Klik pada "Create Shoutmix".

Setelah anda mendaftar, lalu anda atur kotak shoutboxnya di "style and color" ...

Lalu, setelah selesai, klik pada "back to setting"

Lalu, ambil kode" HTMLnya di sebelah kanan pada embed codes..
Lalu copy ..

Setelah di-copy....
Anda masuk ke blog anda, masuk ke rancangan lalu masuk ke elemen laman.
Tambahkan widget HTML / JavaScript ...
Masukkan script berikut.


<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://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.png') 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">

[MASUKAN SCRIPT KODE BUKU TAMU ANDA DISINI]

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di
<a href="http://www.kikiyo.co.cc/2010/05/membuat-buku-tamu-buka-tutup-di-samping.html">
sini
</a>

<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

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

Teks bertuliskan merah diatas ganti dengan kode shoutmix anda ....

Selamat Mencoba ... !!! :)

Related Articles