Membuat Auto Hide Buku Tamu/Shoutbox

Hai sobat bacil, apa kabarnya nih?? Baik dong :D hehe. Pertama-tama saya mohon maaf jika ada komentar, request atau pertanyaan di blog maupun grup yang belum bisa saya jawab dikarenakan pada bulan-bulan lalu saya sedang menghadapi sebuah permasalahan yang bisa merubah masa depan saya. hahaha yaaa,,benar Ujian Nasional. Okee,,sekarang kita kembali ke topik pembicaraan. Kali ini Tutorial blog yang akan saya share adalah tentang Buku Tamu. Sekilas Buku Tamu sama dengan shoutbox, cbox, fibox dll. Tetapi pada postingan saya kali ini menghias Buku Tamu dengan cara Auto Hide.

Auto Hide Shoutbox sebenarnya Buku Tamu yang telah di modifikasi semenarik mungkin agar terlihat muncul tanpa di klik dan tersembunyi tanpa di klik pula ( di lewati pointer mouse ).

Langsung saja simak tutorialnya berikut :

1. Log in ke akun blog sobat. klik disini bila belum login

2. Klik Rancangan --> Elemen Laman --> Tambah Gadget --> Pilih HTML/Javascript (untuk tampilan blogger lama)

3. Klik menu DropDown di samping kiri tulisan "View Blog" --> Klik Layout -->  Tambah Gadget --> Pilih HTML/Javascript (untuk tampilan blogger baru)

Masukkan kode di bawah ini:

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

.gbtab{
height:150px;
width:50px;
float:left;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnX15atX98aUNEogm0_IRZv7NcPUGGEHnRcPIY1_Ea8Knc2KTz5SFUHihtnSq883IuS4XxjQJ5QqjyLnYJSSxF5RJmvvl2YtnXtetC1uS2zMYRlmxt7jumQoIPvEPOjLZrspCa0GaAADa/') no-repeat;
}

.gbcontent {
float:left;
border:1px solid #000000;
-moz-border-radius-bottomleft:5px;
-webkit-border-radius-bottomleft:5px;
-o-border-radius-bottomleft:5px;
-khtml-border-radius-bottomleft:5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-topleft: 5px;
background: #F2F2F2; url() no-repeat bottom;
padding:10px;
}

</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);
gb.opened = !gb.opened;
}function moveGB(x0, xf){

var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}
}</script>

<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>

<div class="gbcontent">
<center>
<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="325" src="http://www6.cbox.ws/box/?boxid=687941&amp;boxtag=ay9wac&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-687941" style="border:#ababab 1px solid;" id="cboxmain6-687941"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www6.cbox.ws/box/?boxid=687941&amp;boxtag=ay9wac&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-687941" style="border:#ababab 1px solid;border-top:0px" id="cboxform6-687941"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://bacilkeren.blogspot.com/2013/05/cara-membuat-buku-tamu-auto-hide.html"> widget! </a></span>
</div>
</center></div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>

</div>

4. Klik save / simpan.

Untuk Demonya di bawah ini:

Klik show untuk melihat

Catatan:

Ganti kode yang berwara biru dengan kode buku tamu milik sobat. Sobat yang belum punya buku tamu silahkan buat terlebih dahulu di cbox ( seperti blog ini) , fibox, shoutchamp atau pada penyedia chatbox gratisan lainnya.