13 December 2010

tutorial : tukar shoutbox icon background anda


ini adalah tutorial kesinambungan daripada tutorial sembunyikan shoutbox.untuk lihat tekan sini. kalau korang rasa macam nak buat shoutbox korang nampak lagi gempak atau pun stylo-mylo sikit dari orang lain korang boleh tukar image background url korang tu.sila tengok bahagian yang aku bold kaler biru tu. korang tukarkan code yang kaler biru tu dengan background url yang korang edit sendiri atau boleh amik dari aku punya huhu.aku buat pakai photoscape je. tapi kalau korang yang dah pro pakai photoshop pun boleh buat yang lagi menarik.

Lepas tu korang ubah nilai yang aku bold kan kaler merah pulak. ikut kesesuaian blog korang jugak. macam aku, aku guna 247 px dgn 177px. nak lebih jelas cuba tengok shoutbox aku di sebelah kanan blog ni.arini aku baik hati nak letak icon-icon yang aku try buat baru-baru ni. kalau nak bolehlah copy and komen-komen lah eh. thanks. tak berapa nak lawa sangat pun haha.


<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}

.gbtab{
height:247px;
width:177px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYY3RUNl5W8E8zwGzUdvbjJge24gEYJyzZ-D0IUlz8ohxAwlNx84HfkCbNr9Rrz-j2nuHv2NDIUCPpC_wdWJh86Ahrclkp51uolCBOCLkNMD4-CUCVadbRjyj5N7aYzljd_2-m58pxXYmS/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, 177-w) : moveGB(177-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">


siapa-siapa yang rasa nak copy bolehlah copy link dekat bawah ni;P


http://i1083.photobucket.com/albums/j383/eirae/lulu.png

http://i1083.photobucket.com/albums/j383/eirae/lala.png



http://i1083.photobucket.com/albums/j383/eirae/bongok.png


http://i1083.photobucket.com/albums/j383/eirae/domo.png


http://i1083.photobucket.com/albums/j383/eirae/juju.png

37 orang komen:

murnimahyum said...

hai...
murni amik icon tu ye...
**cute

eira said...

@murnimahyumok murni :)

fara feroza said...

lepastu..kod2 ni nak letak kat mana..?

eira said...

fara feroza.. kod2 ni letak di bahagian ----> add gadget..---->html

Melissa (Y) said...

hye , eira . nak mintak tolong buat kan shoutbox icon ni yang pocoyo punya boleh tak ?
itupun kalau boleh . okay .terima kasih :)

Melissa (Y) said...

http://maetramp.blogspot.com/
follow okay .

MiMie AddNin said...

mekaseh ye..
dh try..
comey..
hehehee

Cik Nadia said...

hi eira,

nad da follow sume step tp xkua gak icon tu..nape ye??? da byk kali cuba ni

eira said...

@Miss Nadiamungkin awak punya server tak ok sebab banyak org dh ambil dan xde mslh dear :) cube try yg baru punya k :)

eira said...

@MiMie AddNinsama-sama :)

Unknown said...

tenz sis~
hieee

Aren said...

aarrrrrrr ! ! kenapa tak jadi ??? buat dari kol 12a.m till 3a.m tak boleh boleh . uhuk uhuk ! sedeynya :(

white matoki said...

thanx :D

RIA said...

dah try , tp knape icon shoutbox tu mcm tersorok then lpas klik bru oke ?

eira said...

@miSz maR0owc

eira said...

@aren si OPAHcube lagi dear

eira said...

@adzlyn hamidonur welcome dear

eira said...

@Ratna Iman Amirahdear u kne tukar code yg berwarna merah..terpulang nak sorok berapa dalam or nk keluarkan bape byk k .. try lagi k :)

N said...

macam tak faham yg 1st merah tu utk ape eh? try2, macam tak jadi laa. da tu kalau nak rendahkan pic shoutout kita nk adjust yg mne?

eira said...

@HASHdekat tulisan merah yg bahagian atas tu laa u kena adjust nak tinggi or rendah..
yg merah moveGB(0, 177-w):moveGB(177-w,0) tu untuk bila tekan shoutbox dia keluar berapa panjang .. try lagi

FARADYNA ISKANDAR said...

ambik icon kamu :)

FiQa said...

saya ikut tutorial ni and dah jadi . saya ambik icon kamu jugak . thanks !

hanis :) said...

saya ambik icon yer...
terima kasih... lawa sangat!!!

Anonymous said...

apesal syer buad xad sh0utbox erk ? just ad icon tu jer ..

eira said...

@♥ LieYaa 97 ♥ hello dear .. mcm mne nk ade kalau tak ikt link utk sembunyikn shoutbox tu.. yg u try ni , tutorial utk tukar icon saje dear sbb tu kuar icon saje..

Unknown said...

saya amk icon cat tu yee...cute!tq!

eira said...

@mjaybugs ur wc dear

l i t t l e m i n n i e said...

aq amekk yee .. tq

Atiqah Mu'az♥ said...

Satu yea . Thankyou :)

mei-empat said...

Salam Sis Eira .. :)
Ain guna icon comel tu ye , tak reti nak buat sendiri, huhuu ~ thanks ^^

are-in

FaAinaaAzizi said...

amek icon tuh yea (: . ta reti buadd sendiri (:

CikTeddyCorner said...

cik amek satu

si gadis d0m0 said...

sy ambil 1 yg d0m0 uw

AdamSengal . ツ said...

amek 1 :)

amniey91 said...

cik Am try pn xjadi..jadi sikit je..
icon tu cm mnyorok,bila tekan,n close balik baru icon tu kat luar..lau refresh balik,dy kat dalam smula..kna ulangi plak step2 cmtu..huhu

eira said...

@amniey91..cube try tukar code yg berwarna merah dear..kena banyak kali try utk bg sesuai dgn blog u dear :)

Aisyah said...

icon tu keluar tapi shoutbox nye pulak tak keluar...kod shoutbox nk letak kat mana?

Post a Comment

setiap kata-kata adalah doa..sila betulkan niat anda dan komenlah dengan ikhlas..


best regards,
eira

EXCHANGE LINKS