Membuat shoutmix melayang di samping

kadang kita merasa kalo blog kita terlihat sumpek, mampet, pokonya penuh dengan widget sehingga ngga ada lahan yang cukup lagi untuk menaruh buku tamu atau widget shoutmix.
tapi santai aja sobat, karena sobat bisa mengakalinya dengan menjadikan widget shoutmix bersembunyi di samping. mau tau jawabannya ? Oke langsung aja kita caw... :D

  1. masuk ke akun blogger pilih tata letak > Elemen Laman.
  2. Klik add gadget > trus pilih HTML/Java script.
  3. Copy paste kode di bawah ini > trus simpan.
<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('http://lh4.ggpht.com/_jn57XA2jLxY/SmCHl1YEsxI/AAAAAAAAAXQ/HshHClEVcvY/tabs.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" onclick="showHideGB()"> </div>
<div class="gbcontent">
<div style="text-align:right">
<a href="javascript:showHideGB()">
[Close]
</a>
</div>
<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="kokobota" src="http://www5.shoutmix.com/?kokobota" width="475" height="400" frameborder="0" scrolling="auto">
<a href="http://www5.shoutmix.com/?kokobota">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br/>
<!-- End ShoutMix -->
<div style="text-align:right; font-size:10px">
Dapatkan Buku Tamu Seperti Ini di
</div>
<div style="text-align:right; font-size:10px">
<a href="http://sevenfrogz.blogspot.com/">
sevenfrogz.com</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

Untuk kode yang berwarna merah silahkan ganti dengan shoutmix kode sobat.
Selamat mencoba !

Anda sedang membaca artikel tentang Membuat shoutmix melayang di samping dan anda bisa menemukan artikel Membuat shoutmix melayang di samping ini dengan url http://sevenfrogz.blogspot.com/2010/05/membuat-shoutmix-melayang-di-samping.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat shoutmix melayang di samping ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Membuat shoutmix melayang di samping sebagai sumbernya.

Share it to your friends..!

Share to Facebook Share this post on twitter Bookmark Delicious Digg This Stumbleupon Reddit Yahoo Bookmark Furl-Diigo Google Bookmark Technorati Newsvine Tips Triks Blogger, Tutorial SEO, Info

0 komentar:

Post a Comment

Related Posts Plugin for WordPress, Blogger...