Halaman Blog Kang Asep Sule

Cara Buat Buku Tamu Cbox Melayang/Sembunyi Bisa Buka Tutup

Membuat buku tamu melayang/sembunyi disisi kanan blog dan bisa dibuka tutup berguna untuk menghemat ruang sidebar blog. Ruang yang sebelumnya terpakai buku tamu cbox mungkin bisa digunakan untuk pasang histats, pasang Facebook fanpage, atau lainnya.

Sebelumnya, kang asep sule sudah memberikan tutorial cara pasang buku tamu cbox silahkan baca dulu postingan tentang cara pasang buku tamu chatbox diblog. chatbox yang digunakan adalah menggunakan layanan gratis dari cbox karena untuk shoutmix tidak lagi gratis.

Buku tamu yang akan dipasang melayang maksudnya bukan melayang-layang seperti terbang kemana-mana, tapi buku tamu tersebut berada diatas blog dan posisinya sebelah kanan dan akan muncul saat diklik tombol buku tamunya. Bila diklik lagi tombol buku tamunya, buku tamu chatbox akan menghilang/sembunyi ke pinggir.

Okeh, tanpa panjang lebar silahkan langsung copy paste kode/script berikut ke gadget HTML/Javascript di blog:


<style type="text/css">
#gb{
position:fixed;
top:50px;
right:0px;
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 CBOX DISINI


<div style="text-align:right">
<a href="javascript:showHideGB()">
[tutup]
</a>
</div>

</div>

</div>

var gb = document.getElementById("gb");
if (window.opera) {
gb.style.right = (30-gb.offsetWidth).toString() + "px";
}else {
gb.style.right = (-gb.offsetWidth).toString() + "px";
}

Hapus text yang diberi warna merah diatas dan tempatkan kode HTML cbox disitu.

Demikian tadi tutorial cara membuat buku tamu melayang/sembunyi, semoga bermanfaat dan menjadikan blog lebih indah dan atraktif dengan adanya buku tamu melayang tersebut.

Posted by: Kang Asep Sule, at 11.46

10 komentar:

dedysmaim mengatakan...

thank.... untuk infonya

Aang Abdu Muamar Rauf mengatakan...

Oke... akan ane coba...
kunjung balik ya http://majasari31.blogspot.com

get paid mengatakan...

thanks gan infonya, lain waktu jalan2 yuk ke tempat saya ni...;;)

Sukualam mengatakan...

thanks gan infonya, sangat bermanfaat sekali. mau tukar link kagat??

koneksi murah mengatakan...

kalau buat wordpress bisa gak gan? ane nyoba kok blum bisa ya.
www.isp-internet.net

Prince Of Persia mengatakan...

makasih bos, udah dipasang ditempat ane :)

Unknown mengatakan...

Aku baru belajar blogging. Aku senang datang di sini ... Tampaknya banyak informasi yang besar di sini dan saya benar-benar menikmati ini. Hari yang bagus!
Saya hanya ingin memberikan jempol besar untuk info yang Anda miliki di sini dalam tulisan ini. Saya mungkin akan datang kembali . Terima kasih!
Saya juga mengklik iklan sobat karena dengan itu tujuan kita bersama membangun dan mendatangkan pengunjung blog

Unknown mengatakan...

mantap gan, mau pasang di blog ane juga, visit http:sevenchristian.blogspot.com

Unknown mengatakan...

Makasih gan dah dishare, langsung work di http://www.slamdebt.com/ hehehe

Unknown mengatakan...

Terima Kasih Banyak Tutorialnya Sukses Berat

Posting Komentar