Cara buat Chatbox Melayang di blog

Author. Cendekia admin    On. 2/13/2014   

blogging

Assalamu Alaikum Warahmatullahi Wabarakatuh...

Jama'ah.. ohh jama'ah

nah, kali ini Ane posting mengenai chatbox melayang di blog,, udah pada tau kan ??.. so pasti,, blogger yang sudah lama "berkuda" di dunia maya pasti sudah tau hal ini.. yaaa sudah langsung di praktekin.. cek it dot

I. masuk ke blogger

II. langsung ke layout (tata letak)

III. tambah gadget atau HTML/JavaScript

IV. copy paste kode berikut..

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:90px;

width:29px;

float:left;

cursor:pointer;

background:url('http://i997.photobucket.com/albums/af96/fauzan_zifa/Untitled-1-11.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #000000;

background:#FFFFF;

padding:2px;

}

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

Copas Kode cbox yang telah sobat buat, dan letakkan di sini

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

NOTE :

- yang warna hijau sobat ganti dengan gambar Url yang sobat ingin kan,, kalau menurut sobat sudah bagus, abaikan saja...



-yang warna merah, sobat copas cbox yang telah anda buat di www.cbox.ws, lihat gambar di bawah ini..

maka akan seperti ini :

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}

* html #gb{position:relative;}

.gbtab{

height:90px;

width:29px;

float:left;

cursor:pointer;

background:url('http://i997.photobucket.com/albums/af96/fauzan_zifa/Untitled-1-11.png') no-repeat;

}

.gbcontent{

float:left;

border:2px solid #000000;

background:#FFFFF;

padding:2px;

}

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

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
<div id="cboxdiv" style="text-align: center; line-height: 0">
<div><iframe frameborder="0" width="200" height="305" src="http://www7.cbox.ws/box/?boxid=706008&amp;boxtag=yq8msh&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-706008" style="border:#ababab 1px solid;" id="cboxmain7-706008"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=706008&amp;boxtag=yq8msh&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-706008" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-706008"></iframe></div>
</div>
<!-- END CBOX -->

</div>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

V.  simpan / save..


ok sobat.. sampai sini dulu.. semoga bermanfaat