Cara Membuat Chat Box Auto Hide Di Blogger

Hai ...

Sebelum kalian lanjut membaa tutorial kali ini, kalian harus membaca postinganku sebelumnya tentang Bagaimana Cara Membuat Widget Chat Box.

Karena kalian tidak bisa melanjutkan tutorial ini kalau tidak mendapatkan kode widget CBOX nya. Langsung cek di postingan ku sebelumnya, link di bawah ini.

https://markasbiner.blogspot.com/2015/01/bagaimana-cara-membuat-dan-memasang.html

Kalau kalian mengikuti postinganku sebelumnya, kalian akan mendapatkan kode dari ChatBox yang kalian buat.

Simpan kode itu di notepad atau dimana saja terserah. Karena kode tersebut akan dipakai.

Kali ini aku akan membagikan tutorial memasang ChatBox dengan style autohide di samping layar browser kalian. Seperti apa?  nanti.

// Apa itu auto hide?

Nantinya widget kita pasang di samping layar, tapi disembunyikan, tidak terlihat.

Nah, untuk membuka widgetnya, tidak perlu di klik. Cukup arahkan cursor mouse kalian ke widgetnya, maka otomatis akan terbuka sendiri. Dan kalau kalian lepaskan, akan otomatis menutup sendiri, tanpa di klik.

 Kalau kalian belajar pemrograman, ini namanya :hover .

// Baca dulu postinganku sebelumnya.

Kalau kalian tidak tau cara Menambahkan Gadget di Layout blogger, kalian harus membaca postinganku sebelumnya. Cek di bawah ini.

https://markasbiner.blogspot.com/2015/01/bagaimana-cara-membuat-dan-memasang.html

// Cara memasang widget

Seperti Biasa, login blogger, layout, add a gadget, html/javascript, paste code, done.

Lebih jelasnya, cek postingan sebelumnya.


Kodenya :

[info title="Code" icon="code"]
<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/AVvXsEhwZaNGKEsjALMao9h4bQm5S5yFcdohlSK9R8QTW6QEowiLYjB3iSje1u692z-IYNSP_w246PCn7WsPyrKIhrUGDHB7oYz37F3izJBO9TlHHmqI-ilNTvtF0YkGWt3DNLGFBcMDhYe7QDip/s1600/New+Chat+Box.jpg') 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 - v4 -->
<div id="cboxdiv" style="position: relative; margin: 0 auto; width: 320px; font-size: 0;">
<div style="position: relative; height: 294px; overflow: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border: 
0px solid;"><iframe src="http://www3.cbox.ws/box/?boxid=3446947&boxtag=h57wkw&sec=main" marginheight="0" marginwidth="0" 
frameborder="0" width="100%" height="100%" scrolling="auto" allowtransparency="yes" name="cboxmain3-3446947" 
id="cboxmain3-3446947"></iframe></div>
<div style="position: relative; height: 86px; overflow: hidden; border: 0px solid; border-top: 0px;"><iframe 
src="http://www3.cbox.ws/box/?boxid=3446947&boxtag=h57wkw&sec=form" marginheight="0" marginwidth="0" frameborder="0" 
width="100%" height="100%" scrolling="no" allowtransparency="yes" name="cboxform3-3446947" 
id="cboxform3-3446947"></iframe></div>
</div>
<!-- END CBOX -->

<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get This <a target="_blank" href="https://markasbiner.blogspot.com/2015/01/cara-membuat-chat-box-auto-hide-di.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>

[/info]



Setalah kalian paste, kalian harus edit dulu.

1. Ganti tulisan warna  kuning , dengan link gambar yang kalian inginkan. Kalau tidak ada, tidak usah diganti.
2. Ganti tulisan warna  biru , dengan kode CBOX milik kalian sendiri, yang tadi sudah aku suruh simpan di notepad atau terserah.
3. Save.

Kalau kalian benar melakukan step by step, pasti akan berhasil.

Kalau kalian mengerti tentang kode, dan merasa ada error di dalam kode, silahkan komentar, akan aku perbaiki.





Sekian,

Happy Blogging ...

Share this post