May 7, 2011

Tutorial : Floating Button

hey korang ! rimas tak tengok Yana selalu update tutorial? HAHA..kalao suke bagus laa..kalao tak suke..err nevermind..tutorial untuk korang jugak kan..okeh,jom belajar next tutorial how to make a floating button..ehem ehem..tau tak floating button tu ape? nieh macam gambar dekat bawah nieh..tengok tengok !



jom mule buat :)

1)  Log in>> Dashboard>> Design>> Add gadget>> HTML/Javascript

2)  Copy semua code kat bawah nie

3) Paste dalam ruangan HTML/Javascript
<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

<div style='display:scroll; position:fixed; top:140px; left:-12px;'>

<a class='linkopacity' href='http://www.facebook.com/yqnqellyana' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/232.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/yqnqellyana' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/432.png" /></a><br />

<a class='linkopacity' href='http://alyaeyanaqaisara.blogspot.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="http://img.photobucket.com/albums/v486/mafiatrg/blogger_64x64.png" /></a><br />


</div>


4) belum siap lagi tau ! tukar lah yang kaler PINK tu dengan link korang..yang kaler BIRU boleh je nak kekalkan..ikut citarasa masing-masing..yang kaler MERAH boleh ubah samaada nak tinggi rendah atau left right ye ^^

5) SAVE dan lihat hasilnya ^^ selamat mencuba :)

Suka? LIKE je! :)


LIKE Fan Page Yana sekali yer! :)

17 comments:

Syisyi said...

Saya ikut sini jugak!
Thamks for this tutorial too :D

yqnq ellyana said...

@ cik HUSYI :huhu..ur welkame dear ~

Fareha Rahmat (Bos Besar) said...

dh buat dah, tq

yqnq ellyana said...

@ fareha :ur welkame ^^,

cik ika said...

ika selalu layan tutor yana..cume tutor ni je ika ta buat2 lagi..ika gh kebuntuan nak cari url gmbar cm yana..da cari kat photobucket.tp tak jumpa..cmne ni..:(

yqnq ellyana said...

@ ika : kalao xde kat photobucket,boleh cari kat glitter graphic ler

~♥dieyba_baby♥~ said...

dah dapat buat da.. tq.. :)

Nurunnajwa said...

kalau nak letak formspring punya icon macam mana ?

Candycollin said...

macam mne nak buat icon u atas bawah macam akak punye???

Syarifah Nur Azlin Wan Zainal Abidin said...

Macamana nak buat button for formspring? ASAP :/

Najla Aklili said...

heyy , tenkiu ! i follow ur step . niceee ! :)

Faa Fara said...

hav done..:)...tq..:)

elisa ♥ said...

mane dpt ikon comel tuh?

Lilynn said...

im trying to search for ur icon. yg comel tu. tp tak blh la. yg ada kat photobucket.com tu sangat takde yg comel2 mcm u punya :( so sad :(

Ladyss said...

thanx for tutorial to

senang sgt

juliati samsuddin said...

ikut tuto nie ~ thanks kak ~

wo jiao hana said...

terime atas ilmu diberi... heeee singgah2 la blog saye ye....

Post a Comment

Terima kaseh drops komen
Esok-esok drops komen lagi oke ! :)