Home » Tutorial Blogging » Cara Membuat Chatbox Keren Melayang Disebelah Kanan Blog

Cara Membuat Chatbox Keren Melayang Disebelah Kanan Blog

Kali ini saya akan memberi cara membuat Chat Box melayang disisi blog, bagi yang senang mengedit blog atau menghias blog. Guna Chat Box adalah cara mudah untuk mengobrol tanpa perlu lewat komentar jadi membuat anda menjadi mudah mengobrol. Bagi yang berminat Langsung saja YuK!!!!! Check it out!!!

Caranya:

Login di blogger
Menuju ke Layout (Tata Letak)
Klik Add Gadget, Pilih Edit Html
Copy kode di bawah 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">

Copas kode cbox yang telah kamu buat disini

</div>

</div>

<script type="text/javascript">

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

kemudian tulisan berwarna biru Copas CBox yang sudah anda buat

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


<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=489734&boxtag=251z6g&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain7-489734" style="border:#ababab 1px solid;" id="cboxmain7-489734"></iframe></div>
<div><iframe frameborder="0" width="200" height="75" src="http://www7.cbox.ws/box/?boxid=489734&boxtag=251z6g&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform7-489734" style="border:#ababab 1px solid;border-top:0px" id="cboxform7-489734"></iframe></div>
</div>


</div>

</div>

<script type="text/javascript">

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

5. Klik Simpan

Selesai,,,,, Jika Bermanfaat tolong di like jika ada kata atau kode yang salah harap komennya insyaallah saya akan memperbaikinya!!!

Title : Cara Membuat Chatbox Keren Melayang Disebelah Kanan Blog
Description : Kali ini saya akan memberi cara membuat Chat Box melayang disisi blog, bagi yang senang mengedit blog atau menghias blog. Guna Chat Box ad...