Cara Membuat buku Tamu Tersembunyi

Kali ini saya akan berbagi tutorial tentang cara membuat buku tamu kamu tersembunyi, makna kata tersembunyi di sini adalah : hanya menampilkan gambar yang mewakili cbox ataupun shoutbox tersebut, dan semua bagian dari shoutbox atau cbox akan muncul jika kita mengeklik gambar tersebut.
jadi saat kita mengeklik kiri mouse kita di gambar yang menjadi wakil dari cbox ataupun shoutbox itu, maka seluruh bagian dari shoutbox itu bakal muncul secara penuh, dan jika kita klik lagi untuk yang kedua kali, maka buku tamu itu bakal kembali ke posisinya semula (Tersembunyi Lagi).

Gimana caranya….???

Kalau kamu tertarik buat ngerubah penampilan shoutmixmu menjadi lebih keren, ikuti saja tutorial di bawah ini :
masuk ke blog kamu
1. Klik tata letak
2. Klik tambah gadget
3. Klik html/java script
4. Masukkan kode-kode di bawah 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw44GtlUjLeOeps-Z5kF0nT3rc2Gp90__XgoD0H0PDt8tUgCOtz5BO7tQodBZMvvCjZDLuFzyQFhK65Nwxu04wVUXC4GQoqfeiq-VFP9foh3gl7YSdfaSQvu9NOSmCBHgnQ62RG8fL6Ek8/') 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">
kode buku tamu kamu
<br/>
[ Click aja disini ]
/><br/>

</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>

Keterangan :

• Pada kode di atas, cari kode yang bertuliskan
kode buku tamu kamu ( text warna putih )
dan ganti kode tersebut dengan kode buku tamu yang telah kamu peroleh dari situsnya,baik itu cbox,shoutbox,shoutmix,oggix, dll
Code

'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw44GtlUjLeOeps-Z5kF0nT3rc2Gp90__XgoD0H0PDt8tUgCOtz5BO7tQodBZMvvCjZDLuFzyQFhK65Nwxu04wVUXC4GQoqfeiq-VFP9foh3gl7YSdfaSQvu9NOSmCBHgnQ62RG8fL6Ek8/

Yang ada di atas, merupakan code dari button standart buku tamu kamu, yang akan tampak dan mewakili buku tamu kamu, dan ketika button ini di klik maka semua bagian dari buku tamu kamu akan muncul, karena itu banyak blogger yang merubah ta,pilan buttonnya menjadi menarik, agar para pengunjung tidak malas untuk berkomentar melalui buku tamu kamu,dan kamu bisa mengantinya dengan gambar semau kamu dan sesuai kreatifitasmu,namun bagi kamu yang memang gak punya banyak waktu buat bikin button buku tamu atau mungkin emang malas buat bikin,
Tidak usah khawatir karena admin juga menyediakan beberapa button yang di jamin keren kalau di jadikan button buku tamu kamu.
Kalau emang kamu pingin lihat, klik aja [ di sini ]


• Ganti code
height:100px;
width:30px;
dengan ukuran button kamu, jika kamu mengunakan button selain button standart, maka kamu cukup menganti code alamat button kamu beserta dengan ukuran tinggi dan lebar dari button kamu

• Kode top:50px; merupakan kode posisi dari buku tamu kamu…kamu bisa menaikkannya lebih atas dengan mengubah angkanya menjadi top:40px; atau top:30px;
Tapi kalau kamu ingin meletakkannya lebih ke bawah, .ganti kode top:50px; menjadi top:60px; atau top:70px;