CARA MEMBUAT BUKU TAMU TERSEMBUNYI / SLIDER

Apakah kalian sudah memasang buku tamu di blog? Jika belum, silahkan baca Cara Membuat Buku Tamu CBox di Blog . Sekarang saya akan share sedikit trik Cara Membuat Buku Tamu Tersembunyi di blog. Trik ini berguna sekali bagi kalian yang ingin memasang buku tamu, tapi tidak memiliki ruang yang cukup. Dengan script ini, buku tamu kalian akan tersembunyi, yang berada tepat di samping kanan / kiri Blog Anda. Berikut screenshotnya :

( Gambar Buku Tamu Yang Tersembunyi)

Untuk membukanya, klik saja gambar buku tamunya, maka buku tamunya akan tampil secara slide ke kiri (Lihat Screenshot berikut):

( Gambar Buku Tamu setelah dibuka)

 Berminat bagaimana cara membuatnya? Langsung saja sob :

1. Siapkan dulu sob, Java script buku tamu kalian. Bisa Shoutmix Atau bisa juga Cbox.
   UNTUK Cbox SILAHKAN LOGIN DAN DAPATKAN SCRIPT NYA  disini

2. Login ke blogger, lalu klik Rancangan, Add Widget / Gadget, HTML/Javascript ( Tips : Tempatkan widget di samping kiri / kanan dan jangan diberi judul)
3. Copy paste script berikut :

<style type="text/css">
#gb{
position:fixed;
bottom:1px;left:1px;
z-index:+2000;
}
* html #gb{position:relative;}

.gbtab{
height:100px;
width:30px;
float:right;
cursor:pointer;
background:url('http://i1135.photobucket.com/albums/m629/diekhancil/tombolBukutamu.gif') no-repeat;
}
.gbcontent{
float:right;
border:2px solid #4B0082;
background:#000000;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(20-w, 0) : moveGB(0, 35-w);
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.left = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"title="chat open / close"> </div>

<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
LETAKKAN SCRIPT CboX ANDA DISINI
<!-- END CBOX -->
<br/>

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

NB :
[=] Warna MERAH: Ganti dengan script buku tamu kalian yang telah disimpan di notepad
[=] Warna UNGU : Bisa diganti dengan url gambar tombol buku tamu. Kalau malas, dibiarkan saja  juga tidak apa-apa. untuk lebih mudah silahkan liat CARA MENGGANTI TOMBOL BUKU TAMU SLIDDER
[=] Warna Hijau : Untuk Posisi Cbox anda mau di letakkan di kanan atau dikiri BLOG anda , GANTI left dengan right dan juga begitu sebaliknya ganti right dengan left , sesuaikan dengan keinginan anda dan edit sesuai kreativitas anda.
[=] Warna KUNING : Untuk Ganti warna background dan border sesuai dengan warna kesukaan anda. untuk kode Warna Lihat DISINI (KODE WARNA HTML ) 


4. Tinggal save, jadi  deh...

Gampang kan? Dengan ini kalian bisa menghemat ruang untuk penempatan buku tamu yang biasanya memakan banyak ruang blog kalian. Sekian Tutorial Ngeblog yang saya bisa berikan, kalau ada masalah atau terjadi error, silahkan kontak saya dengan memberikan komentar di bawah. Terimakasih

Posted in: Tips dan Trik Blog