Membuat ChatBox AutoHide di Blogger - Hallo sahabat Meta News, Pada Artikel yang anda baca kali ini dengan judul Membuat ChatBox AutoHide di Blogger, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Tutorial, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Membuat ChatBox AutoHide di Blogger
link : Membuat ChatBox AutoHide di Blogger

Membuat ChatBox AutoHide di Blogger

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.

DEMO CHATBOX 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDVzT1-BGYQFFU4fBj4Dfc7IOcOYKO8f3FcetOKUmW8-MlslbklY2uKyW7sDU77K-NkepWgkvEIfENv1Gsnsx8xYU5KuMGCLzOUsG0QP2guAIV8q6lA358vd82SRbCpLG4OPcIf2O80XjH/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

Demikianlah Artikel Membuat ChatBox AutoHide di Blogger

Sekianlah artikel Membuat ChatBox AutoHide di Blogger kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Membuat ChatBox AutoHide di Blogger dengan alamat link https://infoasikindo.blogspot.com/2014/05/membuat-chatbox-autohide-di-blogger.html

Tweet