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

16 comments:

  1. kalau diikutkan cantik juga buat macam tu

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

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

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

    ReplyDelete
  5. @Yatie Awang

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

    ReplyDelete
  6. @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.. ;)

    ReplyDelete
  7. @Pendamba Mawar

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

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

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

    ReplyDelete
  10. @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.... ;)

    ReplyDelete

Terima kasih sudi komen :)
kerana 1 komen amat bernilai dan
mampu buat ieyza tersenyum ^_^