Cara Membuat Buku Tamu Tersembunyi di Blog

Denydanup - Jika blog anda sudah tidak ada ruang untuk menampilkan buku tamu atau anda sudah bosan dengan penampilan buku tamu yang ala kadarnya, maka anda harus coba tutorial berikut ini yaitu membuat buku tamu tersembunyi. Buku tamu tersembunyi yang saya maksud adalah buku tamu yang disembunyikan dibagian samping halaman blog anda, dan akan muncul ketika anda mengklik tombol buku tamu atau sebaliknya akan tutup jika anda mengklik tombolnya kembali. Untuk cara membuatnya sangat mudah ikuti langkahnya dibawah ini:

1. Login ke blogger
2. Masuk ke Rancangan -- Elemen Laman
3. Tambahkan Gadjet lalu pilih HTML/JavaScript
4. Masukan kode berikut ini:

<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://1.bp.blogspot.com/-Q5TgNw6u0_M/T7s_czTIedI/AAAAAAAADTM/xTgzEQV5Dfs/s400/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">

<!-- Ganti ini dengan kode buku tamu kamu -->

<br/>
Mau punya buku tamu seperti ini?<br/>
Klik di sini:
<a href="http://la0.blogspot.com/2012/10/membuat-buku-tamu-tersembunyi.html">
(Blog Trik dan Tips)
</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>

6. Ganti kode berwarna merah diatas dengan kode buku tamu anda.
7. Simpan gadjet tersebut

Demikian langkah-langkah untuk membuat buku tamu tersembunyi. Selamat mencoba!!!!
Sumber 

Tweet