Tutorial : Cara nak Hide Shoutbox

| On
5:52:00 PM

baiklah..jum kita sambuang tutorial seterusnya.. 

Amni rasakan..msti ramai new Bloggers tertanya-tanya..macam mana nak Hide Shoutbox macam Amni wat tuh.. Amni pun dulu masa baru wat blog, Ani pun terpikir macam manala blogger len wat Hide Shoutbox nieh.. 

okeh, sekarang meh sini Amni nk ajarkan.. free tau! hehhe
Caranya bermula begini..

1. korang pergi Dashboard >Design > Page Element >Add Gadget > Edit HTML
2. Korang copy code yang Amni nak bagi nieh..
<style type="text/css">

#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:350px;
width:140px;
float:left;
cursor:pointer;
background:url('URL PIC YANG KORUNK SUKA') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #00000;
background:#F5F5F5;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 150-w) : moveGB(170-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 SHOUTMIX KORUNK 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 = (140-gb.offsetWidth).toString() + "px";
</script>
3. Dah copy? oke, korang pastekan dekat ruang HTML tu

4.  Warna MERAH tu, korang cari la h URL icon shoutbox yg cute..kat pakcik Google pun ada..

5.  Dah cari URL icon tu? pastu masukkan kat dlm kurungan tuh.. | Kat Photobucket pun ada jugak =)

6. Warna BIRU tu pulak, korang boleh tukar mengikut kesesuaian blog...kalu x reti tukar, x payah...
nnti jd enda pelik2 , Amni x nak tanggung!

7.  Warna HIJAU tu plak korang pastekan code Shoutbox korang...

8. Save! Dah siap..


-Selamat Mencuba-




Be First to Post Comment !
Post a Comment