Saturday, January 1, 2011

Bikin Auto Hide Shoutbox Pada Sebelah Kanan Blog

Bagi siapa saja yang pengen tampilan chatboxnya lebih menarik seperti yang terdapat di sebelah kanan blog ini,sobat bloger bisa mencoba cara ini .....
caranya sangat mudah ..ikuti saja langkah-langkah di bawah ini :
1.Log in ke dashboard blog sobat
2.Layout > Page Element > Add a gadget > HTML / Javascript
3.Copy n Paste semua code dibawah ke dalam content kotak HTML / javascript

<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/AVvXsEhPz6qeBY2DW8wWZuCi3igZGwT-VKPdMvUbYf0tIgltrK6AFxbcRwMoiiElwtAjI38tBuEp4tG8CgjCKNVmlYoYQwhKHbDQ5JdCXa-lXLHkci6qdGdIN7YPMOlMqqEf5WakD3iHMQFmYHit/s320/tabs.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #666666;
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" onclick="showHideGB()"> </div>
<div class="gbcontent">


<!-- Start HTML Code --><iframe title="Shoutbox" WIDTH="160" HEIGHT="400" src="http://shoutbox.widget.me/window.html?uid=qwx8n" frameborder="0" scrolling="auto"></iframe><br><a href="http://shoutbox.widget.me">Shoutbox</a> by <a href="http://ngai.cc">Blogger</a><br><!-- End -->


<div style="text-align:right">
<a href="javascript:showHideGB()">
[close/tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>
 
4.Ga perlu kasih judul
5.Tekan save.

Dan lihat hasilnya ....bagus bukan....

1 comment:

Anonymous said...

thanx sobat.....