Saturday, December 4, 2010

Tutorial: Shutbox tergantung di Blog


Assalamualaikum..

Hari ni nak tunjukkan kat korang macam mana nak buat shoutbox di blog. meh kite kenali ape tu shoutbox. Tutorial ni boleh digunakan oleh blogger baru.

haa ni die nama nye shoutbox:

Kenali ape itu IMAGE ICON:

Step 1: Dashboard ---> Design ---> Page Elements ---> Add Gadget ---> HTML/JavaScript 

Step 2: Copy code di bawah dan paste kan di dalam HTML/Javascript


<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('URL IMAGE ICON') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #000000;
background:pink;
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">
Letakkan Code Shoutbox 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>

Nota: 

kaler merah tukar dengan URL IMAGE yang anda nak.
kaler Ungu tukar dengan code shoutbox yang telah anda sign up.

* kalau takde URL IMAGE sendiri letak je code yang kat bawah ni. gantikan tempat URL IMAGE ok.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvOfJwAtWPWP9Cn6YQKyyQ3el0T3D6kI_sDqxcwiVzCZjPcDylGFaBvbo17ma_1JOpStJWZMjqr1olIJbYVGNFicrP7RlaONQt7Vl3P61cNH7YvyX9XYF_KDnb48R7k7tbB2VDN5_3udO9/s320/tabs.png

Step 3: Save dan cuba preview untuk pastikan jadi ke tak.

Selamat Mencuba =)


Terima Kasih sudi baca,jangan lupa baca lagi ^_^

4 comments:

Tulip said...

dah jd..ngee~
thx cik T-pah.. :)

miss latifah said...

Yeayyyy ^_^ hehe..
same2 :)

Miera Azli said...

dah jadi la .. ! thanks a lot ye.. jemput datang ke blog saya.. :)

miss latifah said...

ur welcome :) Insyaallah.. :D