Tuesday 22 November 2011

Toturial : Float Icon Twitter and Facebook

Assalamualaikum...

Hye.. dah lama rasa nya  tak buat tutorial.. hee.. oklah.. actually tuto nie ade request dari someone.. dia tanya  tahu tak camna nak buat tuto nak letak icon facebook and twitter kat tepi blog.. sapa 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)

No comments:

Post a Comment