Membuat ChatBox AutoHide di Blogger

membuat chatbox autohide
CHAT
Chatbox kadangkala berguna bagi seorang pemilik website entah itu sebagai buku tamu atau bagi pengunjung sekedar meninggalkan jejak. Kita bisa memasangnya di sidebar atau di bagian lainnya. Tetapi kali ini kita akan mencoba sesuatu yang lain, yaitu : dengan membuat chatbox yang autohide.




Cara Membuat CHATBOX AUTOHIDE 

1. Log in ke blogger anda
2. Klik Tata Letak atau Layout
3. Pilih letak yang anda inginkan, klik add gadget
4. Pilih HTML/Javascript
5. Masukkan kode berikut 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('http://3.bp.blogspot.com/_GmDoFC87tnc/S9mFR0N8DLI/AAAAAAAAAfk/HRgxuRNSsWk/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="250" height="175" src="http://www6.cbox.ws/box/?boxid=810296&amp;boxtag=b5jk75&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain6-810296" style="border:#EDDEDB 1px solid;" id="cboxmain6-810296"></iframe></div>
<div><iframe frameborder="0" width="250" height="75" src="http://www6.cbox.ws/box/?boxid=810296&amp;boxtag=b5jk75&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform6-810296" style="border:#EDDEDB 1px solid;border-top:0px" id="cboxform6-810296"></iframe></div>
</div>
<!-- END CBOX -->
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://meta-news-id.blogspot.com/2014/05/membuat-chatbox-autohide-di-blogger.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>




6. Ganti kode yang berwarna orange dengan kode cbox.ws anda
7. Ganti kode yang berwarna biru dengan gambar anda sendiri atau biarkan.
8. Selesai 'n Happy Blogging!

Tutorial creditted to TUTORIAL KEREN
Membuat ChatBox AutoHide di Blogger Membuat ChatBox AutoHide di Blogger Reviewed by Ainun Mahya on 8:30 PM Rating: 5

No comments:

Silakan Berkomentar dengan Bijak

Powered by Blogger.