Cara Pasang CBox Melayang Di Blog

Cara Memasang Float ChatBox Di Blog - Mungkin tutorial ini sudah banyak dibahas di blog lain. Namun, tutorial kali ini memang sedikit berbeda dengan tutorial memasang float chatbox pada umumnya. Kalau biasanya, float chatbox nya menampilkan efek slide (kiri - kanan) kali ini sedikit berbeda. Efek yang ditampilkan autohide alias muncul dengan efek tersembunyi. Untuk demo mungkin gag ada, karena keterbatasan ruang. Jadi, silahkan dicoba deh, dijamin gag bakalan nyeseeeel.....

1. Login ke blogger.com
2. Pilih Rancangan --> Design --> Tambah Gadget --> HTML/ Javascript
3. Salin kode berikut ini didalamnya :

<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/AVvXsEhn7nMYWCn09jKNWbpqoiWYvn2OR-UsL0HnVBVup_TQGfQ2ozZRFIhdtoAAHY4qSOH2d60c9zwRIJRxsdoPLX1Xe9s4J1lgGBwcb11aUQlhFjiDhi9nndu0wMfkLDzz4GstSR21OtXMNqaW/') 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";
}

4. Save / Simpan


N/B : Ganti tulisan warna Biru dengan code HTML CBOX Sobat dengan code HTML sobat

BERLANGGANAN VIA EMAIL
Jika sobat menyukai artikel di Blog ini silahkan masukan email untuk berlangganan jangan lupa like'a hehehe,,,
Enter your email address:


Delivered by FeedBurner