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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0XkkoICnZVZ3987aPN6hXm6FUyp9AhfFkXqQlmQ1Loi2DzHhoyjySA43EoNpRsYoiGxkbXsFADrjwBH2Rm3H4CvUDoLPCbwoWUJvpeQMqw7V8XztqUSMBcrdMk71FL9RYiTaOA430ByX6/') 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.
10 komentar:
thank.... untuk infonya
Oke... akan ane coba...
kunjung balik ya http://majasari31.blogspot.com
thanks gan infonya, lain waktu jalan2 yuk ke tempat saya ni...;;)
thanks gan infonya, sangat bermanfaat sekali. mau tukar link kagat??
kalau buat wordpress bisa gak gan? ane nyoba kok blum bisa ya.
www.isp-internet.net
makasih bos, udah dipasang ditempat ane :)
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
mantap gan, mau pasang di blog ane juga, visit http:sevenchristian.blogspot.com
Makasih gan dah dishare, langsung work di http://www.slamdebt.com/ hehehe
Terima Kasih Banyak Tutorialnya Sukses Berat
Posting Komentar