Cara membuat Chatbox Auto Hide

Cara Membuat Chatbox Auto Hide: 

1. Seperti biasa Log in di blogger
2. Kemudian pergi ke menu Tata Letak , kemudian klik Tambah Gadget. Pilih HTML/Java Script 
3. Copy kode dibawah ini
kemudian pastekan di HTML / Java Script. 

<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/AVvXsEig6-lhFsThvl-6tx1ZppmT1tQUwNpem3z7cIm7ZzAlnlEfZKlqL6dSfHl7w8Drh4BKGn1Hga3IkcXwGOn_JIpGe7Y40f_HZoe3Nfl4dXgpQ-yUfrMsEaSK8WzViVpxGBb9Vtocc5xzwUTN/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><!-- Taruh Kode Chat Box Disini --!><br /><div style="text-align:center"><span style="float:right; color:#000000;">Get this<a target="_blank" href="http://www.kuasinfo.com/2013/03/cara-membuat-chat-box-auto-hide.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>

Catatan :
  Tulisan yang saya beri warna Merah disitu lah kalian menempatkan Script Kode Chat Box kalian . 

4. Terakhir Simpan , kemudian lihat hasilnya.

1 comment:

  1. Tutorial yang sangat Bermanfaat !! Ditunggu Komback + folbacknya :v

    ReplyDelete