Tawaran Hebat !!!

Wednesday, August 17, 2011

Tutorial hide shoutbox

Utk mengemaskan blog me yg me rasa dh mcm semak jer... sume nak d letak kat sidebar belah kanan nun, me pun wat la alternative len supaya tak de nampak semak... salah satunye hidekan shoutbox tu... so, kurang la siket gadget2 kat sidebar tu kan... sebenaunye dah lama juga me nak hidekan shoutbox ni cuma tak berkesempan jer.... so, ni tutorialnye;

1. Pg kat Dashboard ===> Design ===> Add Gadget ===> pilih HTML/Javascript

2. Copy n Paste kan code kat bawah ni kat HTML/Javascript tadi. Gantikan ayat yg berwarna biru tu dgn code shoutbox. (leh guna code shoutbox yg sedia ada kt blog korang tu)

<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">
Masukkan kod Shout Box 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>
3. Preview & Save

Dan jadilah mcm ni..... taraaaaa....

0 comments:

Related Posts Plugin for WordPress, Blogger...
 

Copyright © 2012 Reserved to Tieha
Design by Cik Kumbang