Membuat Buku Tamu (Guest Book) Tersembunyi

Nah ini ilmu baru juga yang gue dapat guys!

Suka lihat kan guest book yang ada disamping blog seseorang, nah liat aja kaya punya gue sekarang yang warna ijo dipinggir kanan. Nah kenapa pake disembunyiin? Mungkin supaya orang yang suka masang banyak gadget kaya gue ga terlalu terganggu dengan panjangnya gustbook yang juga mejeng di laman blog kita.

Nah gimana caranya kita bikin guest book itu tersembunyi? CEKIDOT!



1. kalo kamu awalnya udah bakai Cbox atau ShoutMix atau apapun lah yang kamu pakai, kamu tinggal buka kode HTMLnya dan manbahin kode2 berikut :)
2. kodenya :


<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://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/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">



<kode chatbox atau shoutmix atau cbox>


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

3. Masukan kode guestbox kamu ke bagian yang ditulis tebal
4. Save

DONE!!!
Gambang kan :D
Semoga bermanfaat, Selamat mencoba :D

Posted in: Sweet Notes, Sweet Share, Tutorial