Chat box aut hide maupun shoutmix ato hide kini sangat popular sekali di blog. Selain menarik ini juga dapat membuat kita tahu pendapat teman-teman ente semua yang berkunjung tentang blog ente. Istilahnya si buat tempat uneg-ungenya. Chat box adalah salahsatu widget paforit saya selain mudah menggunakanya ini bikinya free sob. alias geratis dantampilan juga smilies nya bisa kita modifikasi sesuka hati. asal ngerti . Ok deh sob begini ni cara membuat Chatbox Auto hide ala Muhammad Refai.
Sederhana dan mudah dipahami kan sob. Inget ya ganti tulisan yang berwarna biru dengan kode chatbox ente sob. Semoga bermanfaat ya.
- Login dahulu ke blog ente
- lalu masuk ke menu rancangan ---> Elemen Laman ---> Tambah Gadget --- > Html/Javascript
- Masukkan kode di bawah ini sob
<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://i46.tinypic.com/15np343.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>
Masukkan Kode Chatbox Atu Shoutmix Anda Disini Sob
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://m-refai.blogspot.com/2012/07/chat-box-auto-hide-yang-gu-tau.html"> get this 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>
<!-- chatbox by http://m-refai.blogspot.com/ FINISH-->
#gb{
position:fixed;
top:20px;
z-index:+1000;
}* html #gb{position:relative;}
.gbtab{
height:150px;
width:50px;
float:left;
background:url('http://i46.tinypic.com/15np343.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>
Masukkan Kode Chatbox Atu Shoutmix Anda Disini Sob
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://m-refai.blogspot.com/2012/07/chat-box-auto-hide-yang-gu-tau.html"> get this 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>
<!-- chatbox by http://m-refai.blogspot.com/ FINISH-->
0 Comments
Bagaimana Pendapat Anda ?