Cara Pasang Chat Box Auto Hide di Blog

Chat Box Auto Hide adalah efek yang akan membuat buku tamu atau chat box muncul tanpa di klik dan tersembunyi tanpa di klik pula, dengan Chat box ini memudahkan interaksi antara pengunjug lebih mudah dan interaktif. Buat Agan yang tertarik memasang widget ini, silahkan ikuti langkah berikut ini:

1. Buka akun Blog Agan
2. Klik rancangan > Elemen Laman > Tambah Gadget > HTML/Javascript
letaknya bebas dimana aja
3. Masukkan kode javascript 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/AVvXsEjvZKMB-E2yxWZ6jC8HaEkRq8cvLVemTaOTcIbt0dw87h4qRFhnj7DJln0eNfS2rj6cosAzxUppEdfR02E15X1i2B9vxUUuffqK5rDEm9DmNKVv81pYY4KcWKXOnXYUxxkJTPYwRG9gXfg/s1600/Chatbox.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>
MASUKKAN KODE CHAT BOX DISINI
<br />
4. Klik Save dan Lihat Hasilnya

Keterangan:
Masukkan kode chatbox pada tulisan yang berwarna merah. Buat yang belum punya kodenya silahkan baca Cara Membuat Chatbox di Blog. Untuk kode warna biru dapat diganti dengan gambar yang lain seperti dibawah ini
 
Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvZKMB-E2yxWZ6jC8HaEkRq8cvLVemTaOTcIbt0dw87h4qRFhnj7DJln0eNfS2rj6cosAzxUppEdfR02E15X1i2B9vxUUuffqK5rDEm9DmNKVv81pYY4KcWKXOnXYUxxkJTPYwRG9gXfg/s1600/Chatbox.png
Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWevKlXGCN9BQfK7RpQo_V3QHgSK6i5IJDn3cvyMNKrJUN6NRzdU_W9hYDSDxiBcM80bLcfqAZNSexnlY6KQ4Ap5sxUE0ZzHHJl6pJ6B1uzCD2-y94mLK-F0k9QPRQAxSZgXX3NPbiFQ/s1600/Bukutamu3.png
Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEs8zAhlgVhUZHas9zTyXRnhHWL7b_d9Ns2RbPDYsnkGScBFotXAq4JsjCmWqzjBTmgY4f8YjFqvpZ6yWfdtIoCdKNba8hAnKBHTaYy5Yskccs5JX3GpfWcYUJkm3VvtChdvns8ScN_hg/s1600/bukutamu2.gif
Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjccMhtrAc1Sb42bYOU_UCO6xv-u0Kk5qPHUpwUaXRqegBcF_AWsiwJSzm2Yuh8DVXA8lZgO94HyLr6mNF1GZlketJ5WMGHhgJwfLOgaplE-DPS1FH6pD4mpXZPhWgHZVrTAeoNmsbEUio/s1600/bukutamu5.png
Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfrjnDnuGa2QuhZZVI9MFoo3vNH_4-pVlhpNomcmCORKJf245bBDhJEWLc4d_Gx8Tw2rpyUklw1WxoeHRLj4NdoCYNDOuNE50-7A0sxW63_mymqNPnlp8D9mMaFCCRybVplz1T3O3z4kg/s1600/2131wkl.png
Tombol Chat Box https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXywaY1AL6cG0m6CYVoAyLy0UqOrIo_qBzOdL49yMDJ_ByWeP3w2zoBXW5CD9NN8W0JxCvTrPpGm-iBfxp8Q0qsQSHcwGS1KWiVrjOPCOuLLe9VW3lGxWBcUANpA3qoNUYPNQGwyij0eE/s1600/bukutamu4.png

Tombol Chat Box
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD4e4AwSxj94Jgh_rCRyZ4CGKfIligfOuAG26aM36rkTMGBVr0bvMkyc_i4E3WneYnz6hAVDQlIUWOOCbZn1aQ7J12m-zykKlh4S4ejaDWEjIBCL51eHdyCqaaJBit4TmTO3TVs8CmC9Q/s1600/BukuTamu1.png
Cara Pasang Chat Box Auto Hide di Blog Cara Pasang Chat Box Auto Hide di Blog Reviewed by Unknown on 12:13 pm Rating: 5

No comments:

Responsive Ads Here
Powered by Blogger.