Cara Keren Menampilkan Auto Hide Chat Box Di Blogger

Oke Kita akan membahas mengenai cara membuat auto hide chat box. script auto hide ini bisa anda pake untuk widget apapun yang ingin anda harapkan bisa auto hide, namun kali ini kita akan fokus ke pada cara penambahan fungsi auto hide untuk widget chat box dulu. 

Untuk Tutorial cara membuat chat box stylist anda bisa masuk ke postingan : Full Cara Menambahkan Chatbox Stylist SmartChatBox Ke Widget Blog (Optional Auto Hide)
Cara Keren Menampilkan Auto Hide Chat Box Di Blogger

Langsung saja kita bahas langkah-langkahnya :

1. Login Ke Blogger.com
2. Buka Layout Atau Tata Letak 
3. Pilih Tambahkan Gadget Atau Widget, dan pilih widget HTML/Javascript

Cara Keren Menampilkan Auto Hide Chat Box Di Blogger

4. Selanjutnya Copy Kode Script Di Bawah Ini.

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2Gu_BfteB-ZKqUwKFDpcEfBiGb7fHpQhIXg1f2Q7KqsCn9H9F0m8MvK_HD3xnvY0nMsueZAhGx1G5sEde8wTRYcb2sHmFOJ-Z4YFajuQlMH3pLHJ16sieWJ8tejp-FN0bA4BOc3TXGm7a/s1600/finger21.blogspot.com+bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 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+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onmouseover="showHideGB()"> </div>
<div class="gbcontent">

<!-- BEGIN CBOX - www.cbox.ws - v4 -->

<script type="text/javascript" src="//www4.smartchatbox.com/shoutbox/start.php?key=53138752"></script>
 
<!-- END CBOX -->

<div style="text-align: center;"><span style="font-size: 10px;"><span style="font-family: &quot;Trebuchet MS&quot;,sans-serif;">Supported by <a href="http://banguet.blogspot.com" target="_blank">PBBLOG</a></span></span></div><div style="text-align:right"><a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>

Note : Kode yang ditandai warna merah adalah kode script dari Chatbox PB Blog, jadi gantikan dengan Kode Chat Box anda. Yang Belum Punya Chat Box Bisa melihat langkah-langkah cara membuat chat box di link ini 


5. Simpan Setelan dan Lihat Hasilnya

Demikian Langkah-langkah membuat Auto Hide Chat Box Di Blog, Ingat Script Ini bisa anda gunakan untuk Auto hide widget apapun yang anda inginkan.

Related Posts