Thursday, October 13, 2011

Toturial : Float Icon Twitter and Facebook

Assalamualaikum...

Hye.. dah lama rasa nya ieyza tak buat tutorial.. hee.. oklah.. actually tuto nie ade request dari someone.. dia tanya ieyza tahu tak camna nak buat tuto nak letak icon facebook and twitter kat tepi blog.. sapa yang request ? ok ieyza bagi backlink ok. sis CCI yang request.. 

Step:

Dashboard > Design > Add Gadget > Html/Javascript

copy code kat bawah paste kat box html/javascript tu..



<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:200px; left:0px;'>

<a class='' href='http://www.facebook.com/USERNAME'target='_blank' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="URLICONFB" /></a><br />

<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:265px; left:0px;'>

<a class='' href='http://twitter.com/USERNAME'target='_blank' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="URLICONTWIT" /></a><br /></div></div>


Kat bawah ni ada beberapa url untuk icon.. pilih yang mana suka :)

blue-dark-facebook.png (64×64) blue-dark-twitter.png (64×64)
blue-light-facebook.png (64×64) blue-light-twitter.png (64×64)
green-facebook.png (64×64) green-twitter.png (64×64)
pink-facebook.png (64×64) pink-twitter.png (64×64)
hotpink-facebook.png (64×64) hotpink-twitter.png (64×64)
red-facebook.png (64×64) red-twitter.png (64×64)
yellow-facebook.png (64×64) yellow-twitter.png (64×64)
purple-facebook.png (64×64) purple-twitter.png (64×64)
turqoise-facebook.png (64×64) turqoise-twitter.png (64×64)
Gray-facebook.png (64×64) gray-twitter.png (64×64)
brown-facebook.png (64×64) brown-twitter.png (64×64)
oranges-facebook.png (64×64) oranges-twitter.png (64×64)

p/s: sila drag pic yang  yang korang nk ke new tab,copy url dia kat bar adress k.. :)
credit 
Photobucket

17 000 kuceng marie:

Yatie Awang said...

kalau diikutkan cantik juga buat macam tu

yen(toka ziizokukuto) said...

thankz coz sharing :)

Nafisah Ruslan said...

pernah buat dulu.. sekali nampak semak je terus buang.. hahaha..
tapi bagus betul tutorial ni

EyqaLuvender said...

sharing is caring..bgs ieyza ni ta kedekut ilmu...hehe

Pendamba Mawar said...

smart gak.tapi xbminat..haha
awal blogging dulu da pasang

ieyza afieyna said...

@Yatie Awang

memang cnti.. tapi ikut la owner blog nak letak atau xmau.. :)

ieyza afieyna said...

@yen(toka ziizokukuto)

u're welcome.. ;)

ieyza afieyna said...

@Nafisah Ruslan

hee.. yela betul tu,, ikut la diri nak letak ke tak kn. ade stengah ckp menyemak kn.. ade setangah suka. so, depend kat diri sendiri.. ;)

ieyza afieyna said...

@EyqaLuvender

yup ! sharing is caring.. hee ^^

ieyza afieyna said...

@Pendamba Mawar

hee... xpe2 nie khas untuk org yg berminat je .. ^^

Colattachocolates said...

ieyza tq bebanyak k...love ulah.. ^_^ ehehe

ieyza afieyna said...

@Colattachocolates

welcome.. hee :)

fana said...

cantik..
tapi xsempat nk edit2, make up blog..
tggu nt ye..nt nk try..fana sibuk sikit skrg ni..

cerita best said...

NICE BLOG....pakjoe nk bg tau nie pakjoe ada byk lg tip blog yg nk bg kt tuan blog jemput siggah ke laman blpg pakjoe jgn lpa tau sbb pakjoe dh follow

Sabrina Sahrani said...

bar address ?? mana ??

ieyza afieyna said...

@Sabrina Sahrani

maaf ye,, blogger dah tukar care muncul gmbar tu.. selalu nye klik akn muncul tab naru, dan ade code kt bar adress.. xpe , try drag ye ke tab baru ye.... ;)

ShaheeraLala said...

@Yatie Awang
thankyouuuuu :) really nice <3