728x90 AdSpace

Latest News

28 November 2010

Cara Sembunyikan Shoutbox/Auto Hide





Demo

Ikut Langkah Yang Simple Ni:
  1. Login ke akaun blogger korang
  2. Pergi ke Design/Layout --> Page Element --> Add Gadget
  3. Pilih HTML/Javascripts
  4. Dan pastekan je kod di bawah ni

<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://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/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">

PASTE KESELURUHAN KOD SHOUTBOX KORANG DI SINI

<div style="text-align:right">
<a href="javascript:showHideGB()">
[close]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script>

PENERANGAN
Gantikan perkataan Merah dengan kod shoutbox korang

Korang boleh ubah kod unggu dengan kod gambar yang korang suka

Kod biru adalah kedudukan shoutbox.Tambah nilai 50px untuk merendahkan lagi kedudukan shoutbox korang



Cara Sembunyikan Shoutbox/Auto Hide
  • Blogger Comments
  • Facebook Comments

6 ulasan:

Top