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
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
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>
4. Klik Save dan Lihat HasilnyaMASUKKAN KODE CHAT BOX DISINI<br />
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
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvZKMB-E2yxWZ6jC8HaEkRq8cvLVemTaOTcIbt0dw87h4qRFhnj7DJln0eNfS2rj6cosAzxUppEdfR02E15X1i2B9vxUUuffqK5rDEm9DmNKVv81pYY4KcWKXOnXYUxxkJTPYwRG9gXfg/s1600/Chatbox.png | |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioWevKlXGCN9BQfK7RpQo_V3QHgSK6i5IJDn3cvyMNKrJUN6NRzdU_W9hYDSDxiBcM80bLcfqAZNSexnlY6KQ4Ap5sxUE0ZzHHJl6pJ6B1uzCD2-y94mLK-F0k9QPRQAxSZgXX3NPbiFQ/s1600/Bukutamu3.png | |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEs8zAhlgVhUZHas9zTyXRnhHWL7b_d9Ns2RbPDYsnkGScBFotXAq4JsjCmWqzjBTmgY4f8YjFqvpZ6yWfdtIoCdKNba8hAnKBHTaYy5Yskccs5JX3GpfWcYUJkm3VvtChdvns8ScN_hg/s1600/bukutamu2.gif | |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjccMhtrAc1Sb42bYOU_UCO6xv-u0Kk5qPHUpwUaXRqegBcF_AWsiwJSzm2Yuh8DVXA8lZgO94HyLr6mNF1GZlketJ5WMGHhgJwfLOgaplE-DPS1FH6pD4mpXZPhWgHZVrTAeoNmsbEUio/s1600/bukutamu5.png | |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfrjnDnuGa2QuhZZVI9MFoo3vNH_4-pVlhpNomcmCORKJf245bBDhJEWLc4d_Gx8Tw2rpyUklw1WxoeHRLj4NdoCYNDOuNE50-7A0sxW63_mymqNPnlp8D9mMaFCCRybVplz1T3O3z4kg/s1600/2131wkl.png | |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXywaY1AL6cG0m6CYVoAyLy0UqOrIo_qBzOdL49yMDJ_ByWeP3w2zoBXW5CD9NN8W0JxCvTrPpGm-iBfxp8Q0qsQSHcwGS1KWiVrjOPCOuLLe9VW3lGxWBcUANpA3qoNUYPNQGwyij0eE/s1600/bukutamu4.png | |
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiD4e4AwSxj94Jgh_rCRyZ4CGKfIligfOuAG26aM36rkTMGBVr0bvMkyc_i4E3WneYnz6hAVDQlIUWOOCbZn1aQ7J12m-zykKlh4S4ejaDWEjIBCL51eHdyCqaaJBit4TmTO3TVs8CmC9Q/s1600/BukuTamu1.png |
Cara Pasang Chat Box Auto Hide di Blog
Reviewed by Unknown
on
12:13 pm
Rating:
No comments:
Post a Comment