Pages

03 December 2011

Icon Shoutbox Domokun kami :D

Salam:))


Dulu ade sorang kawan aku ni tanye aku,


"macam mane kau buat shoutbox kau tu?"

aku pun balas,


"ha..nantilah aku buat tutorial kat blog aku. panjang citenye"



Nama pun "Dulu" kan? Maknanya bende tu dah berkurun lama. Siot punye aku, selamba badak je mungkir janji. Pastu aku bercadang nak buatlah sekarang ni, sebab sekarang ni aku free. ngehehe. Okay lets begin



1. Copy code bawah ni.

<style type="text/css">
#gb{
position:fixed;
top:30px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:230px;
width: 500px;
float:left;
cursor:pointer;
background:url('KOD IMAGE ANDA') 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">
(KOD CHATBOX ANDA) 


<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>



2. Lepas tu paste kan kat Blogger >> Design >> Add a Gadjet >> HTML/Javascript


3. Gantikan "KOD SHOUTBOX ANDA" tu dengan.....kod shoutbox anda lah. Kalo takde takpe. Anda boleh buat dekat SINI ataupun kat mana-mana je yang anda suka.


4. Nampak tak "KOD IMAGE ANDA" tu? ha...gantikannya dengan url icon yang anda idam-idamkan.

5. Contohnya :

http://i683.photobucket.com/albums/vv197/belltrix/angrybirdspondan.png



ataupun dengan ini,


http://i683.photobucket.com/albums/vv197/belltrix/greyson.png



OKAY, last step. Betulkan size mengikut icon yang anda letak. Dekat yang aku dah bold tu, sebelum KOD IMAGE ANDA tu.


LEPAS TU SAVE. ha....babai. harap ia menjadi. Ok Assalamualaikum. Berape jam tah aku buat post ni, gambo tu susah sangat nak potong. hehe...merungut nampook.

2 comments:

alif halimi said...

boleh ke kalau kita dah ada shoutbox lepastu kita nak tukar gambar shoutbox tu?dan macam mana nak tulis kat pic shout box tu macam alif shoutbox?

bella YOYO said...

edit la gambar kamu sendiri kat photoscape ke photoshop ke. pastu save kan gambar tu kat photobucket. pastu ambik url gambar tu dan paste kan dekat "KOD IMAGE ANDA".