Cara membuat buku tamu tersembunyi

Tutorial kali sebenarnya sudah lama ingin saya posting tapi saya lupa karena terlalu asik mencoba-coba hal yang baru. Untungnya ada teman kita Mitro yang tanya Seperti ini: mitro :"bre.,.,.,ghi mna caranya bwat buku tamu bisa d samping te .,.,kyak punya u.,.,.????!!!!!". akhirnya saya ingat kalu tutorial ini belum saya posting. Saya rasa buku tamu yang tersembunyi cukup baik karena akan lebih menghemat halaman blog anda selain itu juga akan membuat tampilan blog lebih menarik.

Ok sekalian untuk menjawab pertanyaan teman kita mitro yang mungkin maksut dari pertanyaannya adalah cara membuat buku tamu tersembunyi, akan saya coba bahas secara rinci. Sebulum anda menyembunyikan buku tamu anda, anda harus  memiliki akun terlebih dahulu di Shoutmix untuk mendapatkan kode buku tamunya. Silahkan baca caranya Disini. Apabila anda sudah memiliki kode buku tamunya bisa langsung mengikuti langkah-langkah berikut :

1. Login kehalaman blog anda
2. Pilih Rancangan >Elemen Halaman >Tambah gadget

3. Pilih/tambahkan HTML/JavaScript

4. Akan tampil halaman seperti ini

5. Copas kode berikut kedalam box HTML/Javascript

<style type="text/css">
#gb{
position:fixed;
top:30px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('http://i932.photobucket.com/albums/ad161/mamad_bucket/tabs-1.png')no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#900c0c;
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">

Kode buku tamu anda letakan disini

<div style="text-align:right">
<a href="http://www.full-information.co.cc/">
[Komunitas blog pemula]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>



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

Keterangan :
• Kode warna biru adalah untuk mengatur tinggi dan lebar jadi silahkan anda sesuaikan
• kode warna merah adalah tempat meletakan kode buku tamu anda
• warna pink adalah url blog anda jadi silahkan anda ganti dengan alamat blog anda
• kode warna coklat adalah judul blog silahkan ganti dengan judul blog anda
6. Klik simpan dan selesai

Sekian tutorial cara membuat buku tamu tersembunyi semoga bermanfaat.jika anda masih bingung jangan sungkan untuk mengajukan pertanyaan. jangan lupa kritikan dan sarannya. Terimakasih