Chat Box Auto Hide

Cara Membuat Chat Box Auto Hide Di Blogger


Sebelumnya saya telah memposting tentang Cara Membuat Chat Box Di Blogger, sekarang saya mau share cara membuat CBOXnya itu auto hide di samping blog, auto hide yaitu tidak perlu di klik sudah keluar sendiri.

Sebelum kita membuat CBOX auto hide di blogger, kita harus membuat CBOX dulu bukan? cara membuat CBOX bisa dicek Di postingan sebelumnya, KLIK DISINI.
nah sudah dibaca dan sudah membuat CBOXnya? kita lanjutkan ke step selanjutnya yaitu memasang script Auto hide di bloggernya, caranya sangatlah mudah tinggal copy sini paste sana, klik klak klik, selesai . dan CBOX siap diisi, dicorat coret pengunjung. Oke, langsung saja ke topiknya,

1. Seperti Biasa login ke blogger dan pilih tata letak, pilih Tambahkan gadget, pilih Java Script
2. Copy Code Di bawah ini dan paste di situ, ingat, jangan diisi bagian judul, kosongin aja

<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('http://3.bp.blogspot.com/-nlz7wQyYEjc/VLfH-E1kBMI/AAAAAAAAANk/Mcy5hKqPt0I/s1600/New%2BChat%2BBox.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="http://www.nirvashmu.blogspot.com/2015/01/sebelumnya-saya-telah-memposting_18.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>

3. Edit Code yang berwarna Merah dengan code CBOX milik anda anda sekalian :D (wajib)
4. Edit Code yang berwarna Biru dengan url gambar yang akan muncul di blognya. (gak diedit juga gpp)
5. Kemudian Simpan Setelan,

Walah, CBOX auto hide sudah terpampang nyata di blog kawan, jika kesulitan atau bertanya silahkan contact admin atau corat coret di coment/CBOX

Cara Membuat Chat Box Auto Hide Di Blogger
Labels: ,

Post a Comment

Jangan buang waktu percuma untuk membuat komentar SPAM atau sekedar mencari backlink. Karena kedua komentar tersebut akan langsung dihapus.
Admin online 12/7

Author Name

MKRdezign

Contact Form

Name

Email *

Message *

Theme images by Ollustrator. Powered by Blogger.