Membuat ShoutMix (Buku Tamu) Tersembunyi

Dibuat tersembunyi maksudnya untuk mengehemat sidebar blog. Tampilan blog kita juga akan lebih keren karena buku tamunya muncul dari samping ketika kita klik. Anda mau mencobanya..???. begini caranya:

1. Masuk ke account Blogger kamu, pilih Layout; kemudian Page Elements;
2. Klik "Add a Gadget" (terserah yang mana saja), kemudian pilih "HTML/JavaScript",
3 Paste kode berikut ke dalamnya:

<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtLY17FA4cSSau2HAcl3GpejtHYAbIRRpaHWocKt1t-B26VAMtRH9stoHZjM-QoAxhq4KE7GSYruHXpigVD78KtgY-RzbtFdDUkZBe1Ps1BTRCNkNKOewW57_vezdCWgeinbdzyAsoT1Yj/') 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 buat buku tamu anda tersembunyi?<br/>
Click aja disini--->
<a href="http://amin-raha.blogspot.com/2009/12/membuat-shoutmix-buku-tamu-tersembunyi.html">
Tutorial blog


</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Pada kode di atas, cari kode <!-- Ganti ini dengan kode buku tamu anda --> dan ganti kode tersebut dengan kode buku tamu yang anda dapatkan dari situsnya,

Anda juga bisa atur posisinya. Ubah aja nilai atribut top-nya. Kalau mau lebih ke atas dikit, ubah nilai pada warna biru diatas jadi 30px atau 20px, atau terserah anda.

4. Klik SAVE dan lihat hasilnya.

UPDATE:
Kode diatas adalah untuk memasang buku tamu pada kanan layar. Nah...,sekarang bagaimana caranya jika kita ingin memasangnya dikiri.?. berikut caranya:

1. Ganti dulu posisi tombol buku tamunya ke sebelah kanan. Caranya perhatikan kode ini diatas.
Ganti "left" menjadi "right". akan tampak seperti berikut:
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:right;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtLY17FA4cSSau2HAcl3GpejtHYAbIRRpaHWocKt1t-B26VAMtRH9stoHZjM-QoAxhq4KE7GSYruHXpigVD78KtgY-RzbtFdDUkZBe1Ps1BTRCNkNKOewW57_vezdCWgeinbdzyAsoT1Yj/') no-repeat;

2. Ganti arah munculnya. Perhatikan kode ini diatas.
ubah "right" menjadi "left". sehingga menjadi:
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.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}

3. Pindahkan posisi buku tamunya kekiri layar. Perhatikan kode ini diatas.
Ganti 'right" menjadi "left". sehingga menjadi:
</a>
<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.left = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

4. Ganti URL gambar Buku Tamu dengan alamat berikut (lihat bagian warna hijau kode diatas) :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgaMUbtC5oVgX3U4EG-B15qARqUbxCxCmBxiJO9BPzFjLFDp_goDgIUh4ovVoomakMG2MGgyOZf7YUJ_zH8mU_wqPVnEicdjWoLL-pclCliRo8D_cbpeFJY0_MQO_yrHCAeKz4czvOi9c/s1600/tabs.png