Revolution48

1. Login ke akun Blogger anda.


2. Pilih Blog yang anda ingin edit.


3. Nah, setelah itu klik Tata Letak (pada tata letak ini anda akan mendapatkan layout tata letak blog anda, silahkan anda pilih dimana letak yang cocok untuk Chatbox ini)

 

<style type="text/css">

#gb{

position:fixed;

top:20px;

z-index:+1000;

}* html #gb{position:relative;}

.gbtab{

height:150px;

width:50px;

float:left;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh627vtYHVvONVOhDvOnYEWJbv82XwZH9cRXj4Tlu1CD2EJJ5Zc-uKTyjKjr3yBOe7_S4D9BC8eXZP6kRnC9NxW9Tn_xWDPx-JhWLBMwt9dTrNlwf2-erA73W7wv_mL-3jAkwMvnTL_xOIK/s1600/cbblue.png') no-repeat;

}

.gbcontent {

float:left;

border:1px solid #000000;

-moz-border-radius-bottomleft:5px;

-webkit-border-radius-bottomleft:5px;

-o-border-radius-bottomleft:5px;

-khtml-border-radius-bottomleft:5px;

-moz-border-radius-topright: 5px;

-moz-border-radius-topleft: 5px;

background: #F2F2F2; url() no-repeat bottom;

padding:10px;

}

</style>

<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 51-w) : moveGB(30-w, 0);

gb.opened = !gb.opened;

}function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 25 ? 25 : 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+")", 5);}

}</script>

<div id="gb">

<div class="gbtab" onmouseover="showHideGB()">

 </div>

<div class="gbcontent">

<center>

<!-- 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://www4.cbox.ws/box/?boxid=4158960&amp;boxtag=3zc3hr&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4158960" style="border:#ababab 1px solid;" id="cboxmain4-4158960"></iframe></div>

<div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4158960&amp;boxtag=3zc3hr&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4158960" style="border:#ababab 1px solid;border-top:0px" id="cboxform4-4158960"></iframe></div>

</div>

<!-- END CBOX -->

<br />

<div style="text-align:center">

<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://tutorkeren.blogspot.com/2012/12/cara-membuat-chatbox-autohide-di-blog.html"> widget! </a></span>

</div>

</center>

</div>

<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (50-gb.offsetWidth).toString() + "px";

</script>

</div>