Cara buat Cbox Melayang kanan kiri blogspot

hai teman - teman Chinodax BLog :)
Mau?? buat Cbox sobat melayang buka tutup di samping kanan ato kiri??
Nih ane beri tutorialnya!!!!

Bingung? lihat gambar dibawah.

 

Gimana udh paham?
tujuannya simple sekali, supaya blog terlihat lebih rapi teman, supaya pengunjung juga enak ngeliatnya.

OK deh langsung aja ke caranya :

1. kalian harus punya Cbox kalo belum klik disini
2. blogger.com > layout/tataletak > Html/javascript > paste kode dibawah

<style type="text/css">

    #gb{

    position:fixed;

    top:50px;

    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/AVvXsEjRD7beyEUDNy1KBtZzPCswy6URGmrdytov3CJvNbEmM0jWGDDwStpFsyuVV1v2jgL_2oEerQr7beiKdZRbtyGUdrzdIiiyA6qMMxYbgZizeXrvUVL_KoLuU-GmVJBFR7_QaEF_Oc3ZxpNP/') 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">

TARUH HTML CBOX KALIAN DISINI

    <div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Mau Widget Ini? <a href="http://kunaruh.blogspot.com/2013/03/cara-membuat-chat-box-di-blogspot.html" target="_blank">Klik Disini</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()"> [tutup] </a></div></div><script type="text/javascript">var gb = document.getElementById("gb");gb.style.right = (30-gb.offsetWidth).toString() + "px";</script></div>

NB: Untuk Cbox yang disebelah Kanan

<!-- right hidden chatbox byhttp://kunaruh.blogspot.com/START -->
<style>
#hcl {
position:fixed;
top:35px;
left:0px;
z-index:+1000;
}
* html #hcl {position:relative;}
.hcltab {
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtgaRRjn8il0RO9ifbUnE8tdL31dukRo7DMmpGrQ4lCE4UHYZ9nSdZkyCGqoVYsg7s_oxrrPwobuU4ajDjJAtMJXBuNud2RY6r-ywcw8yleLTbXf1rQdwquvKsgvh8yA4mnQvV7OH-NL0/s400/cbred-LEFT.png') no-repeat;
}
.hclcontent {
float:left;
border:2px solid #790909;
background:#f3f6f7;
padding:10px;
}
.hc-credit {font-size:9px}
.hc-credit a {text-decoration:none}
</style>
<script type="text/javascript">
function showHidehcl(){
var hcl = document.getElementById("hcl");
var w = hcl.offsetWidth;
hcl.opened ? movehcl(0, 30-w) : movehcl(20-w, 0);
hcl.opened = !hcl.opened;
}
function movehcl(x0, xf){
var hcl = document.getElementById("hcl");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
hcl.style.left = x.toString() + "px";
if(x0!=xf){setTimeout("movehcl("+x+", "+xf+")", 10);}
}
</script>
<div id="hcl">
<div class="hclcontent">

PASTE KODE KALIAN DISINI

<br />
<div class="hc-credit">
<span style="float:left">
<!-- THIS CREDIT MUST STAY INTACT FOR LEGAL USE -->
Get this
<a href=http://kunaruh.blogspot.com/2013/03/cara-membuat-cbox-melayang-hidden-di.html
target="_blank">Widget</a>.By:<a href=http://kunaruh.blogspot.com/
target="_blank">kunaruhblog</a></span>
<span style="float:right">
<a href="javascript:showHidehcl()">
[CLOSE]
</a>
</span>
</div>
</div>
<div class="hcltab" onclick="showHidehcl()"> </div></div>
<script type="text/javascript">
var hcl = document.getElementById("hcl");
hcl.style.left = (30-hcl.offsetWidth).toString() + "px";
</script>
<!-- right hidden chatbox by http://kunaruh.blogspot.com/END -->

NB : Untuk Cbox yang disebelah Kiri

Merah : HTML CBOX KALIAN
BIRU : url BLOG KALIAN

3. save dan lihat hasilnya

nah, sekian infonya semoga bermanfaat buat teman - teman blogger sekalian :)