Membuat Buku Tamu Doi BLOg

Membuat Buku Tamu Doi BLOg

Ada teman sekelas saya yang bernama Fier menanyakan kepada saya mengenaiBuku Tamu yang terdapat di blog saya ini. Maka dari itu, saya mencoba untuk membuat artikel mengenai pembuatan buku tamu ini. Sebenarnya saya mendapat inspirasi untuk membuat buku tamu ini dari blog milik kang Eri. Di blog milik kang Eriini terdapat sebuah bacaan buku tamu yang letaknya di pojok kanan atas blognya. Jika kita klik tulisan buku tamu tersebut, dengan otomatis akan keluar kotakShoutMix untuk memberikan komentar-komentar pada blog tersebut. Jika di blog anda belum terdapat ShoutMix, silahkan daftar terlebih dahulu. Silahkan anda klik disini untuk mendaftar dan mendapatkan kode HTML ShoutMix untuk blog anda. Untuk lebih jelasnya, lihat gambar di bawah ini.


Setelah anda membuat ShoutMix sendiri untuk blog anda, silahkan anda copy kode di bawah ini untuk membuat tampilan Buku Tamu seperti gambar diatas.

<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://img22.imageshack.us/img22/8941/tabs2.gif') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #9d0a0f;
background:#9d0a0f;
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">
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe scrolling="auto" width="210" frameborder="0" src="http://www4.shoutmix.com/?aew_toy" height="450" title="aew_toy">
<a href="http://www4.shoutmix.com/?aew_toy">View shoutbox</a>
</iframe>
<br/>

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

Catatan :
- Kode yang diberi warna Kuning merupakan letak Buku Tamu.
- Kode yang diberi warna Merah bisa diganti sesuai keinginan anda.
- Kode yang diberi warna Hijau anda ganti dengan ID ShoutMix Anda.

Jika ada kesalahan dalam memasukkan / mengganti kode HTML, silahkan anda memberi komentar untuk artikel ini.

Selamat mencoba.
=)