Monday, 23 July 2012

Bismillah
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:
  1. Login di blogger
  2. Menuju ke Layout (Tata Letak)
  3. Klik Add Gadget, Pilih Edit Html
  4. 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">

<!-- BEGIN CBOX - www.cbox.ws - v001 -->
Copas kode cbox yang telah kamu buat disini
<!-- END CBOX -->

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

<!-- 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=489734&amp;boxtag=251z6g&amp;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&amp;boxtag=251z6g&amp;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>
<!-- END CBOX -->

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

Share artikel ke: Facebook Twitter Google+ Linkedin Digg

Gunakanlah bahasa yang sopan
Tidak mengandung SARA (Agama, Suku, Dll)
Tidak menyertakan link aktif.
Jika melanggar syarat diatas komentar akan saya anggap SPAM
Konvert KodeMember AktifJoin This Blog

Copyright © 2013 - Ori By Djogz - All Rights Reserved

close