[Tutorial] Macam Mana Nak Gantungkan Shoutbox Korang?

by - Friday, June 18, 2010



Salam. Ok get into work ! Haha :D

Kali ini aku nak bagi tutorial untuk sorokkan shoutbox korang sebab ada orang mintak. Kalau tak tahu, boleh tengok dekat bahagian kanan blog aku yang ada shoutbox tergantung tanpa bertali tue. Haha ;D

Sebelum tu, meh tepuk tangan ramai-ramai dekat Kak Ynn sebab bagi tutorial nie :) Aku belajar buat benda ni dengan die lah ~

  • Pergi Dashboard > Design > Add A Gadget
  • Copy dan paste kan code di bawah
<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/AVvXsEiOzP0CCm8uwJnhPpc2v4nAXoYkGzri2Ywvg0FPSX1Pxi_ofnDue9PfCQBpCCW6-RoEUr7hWXq6Qhj1wWkEGlN6snvBowgHOXrvbN-h6YImGjF_afbdkhDWD6P7m_aZLve_M5ksxUZxnsrm/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 CODE SHOUTBOX KORANG KAT 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>


*50px tu untuk setkan kedudukan shoutbox korang. Semakin tinggi nombor die, semakin rendah lah shoutbox korang tue. Tapi aku nasihatkan tak payah dah tukar sebab 50px tu dah just perfect untuk kedudukan shoutbox korang :D
*Copy dan paste kan code shoutbox korang di 'Masukkan Code Shoutbox Korang Di Sini'

Save dan siap ! :D


Act kita boleh taw nak tukar tab shoutbox tu kepada colour lain, nak tukar die jadi comel-comel pun boleh tapi aku tak reti lagi lah ~ Lagipun aku rasa dah ok dah tab yang aku pakai sekarang. Hehe :D

You May Also Like

15 comments