Wadah Madrasah Pengalaman: tutorial nak letak floating icon link for twitter , facebook , flick , youtube and Geng Blogger


Thursday, July 15, 2010

tutorial nak letak floating icon link for twitter , facebook , flick , youtube and Geng Blogger


Salam korang


So arinie Wan kongsi icon comel nie..tengok kat gambar tu..Wan tak pakai koz Wan tak de acc untuk semua tu k..


Jangan risau bende nie ringan and tak load page lame sangat...




Mula mula

Bagi pengguna Layout


Log in blog => Design => Page Elements => Add A Gadget => HTML/Javascript. pastekan kod yang korang copy kat dalam nie..


macam biasa lah kan...


Bagi pengguna Template

Log in blog => Template and korang copy kod kat bawah nie lepas tu korang paste kat bawah

<HTML>
Law tak jumpe tekan je CTRL+F lepas tu cari
<HTML> 


L
angkah kedua plak


Salin dan edit kod kat bawah dengan menggantikan URL akaun anda pada tulisan yang di sengetkan..Korang copy and paste kat notepad/text document dulu k..lepas tu baru paste ke blog bagi mengelakkan kod tulisan senget tercopy sekali..





<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:40px; right:-12px;'>

<a class='linkopacity' href='http://gengblogger.com/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='gengblogger'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgWITd8u0EN59le5osRqIUrBEivexLI92eJhU2NO0vgTvMh4qRR5Kh-6p-P1KYV1zcTfMJ4otTYUdMVwTW-PVbFgT38ISaJ6JJfEQaxxfRqXW5Z9TIhnYdpCW9cUhlzxR99Fhi79fCxef_/s320/icongb.PNG" /></a><br />

<a class='linkopacity' href='http://facebook.com/akaun facebook anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDlOx1HRoZqAZMyf8aAUoH9x-hrjqWwQ0mrJSQlReera9kax8tOmDi7jGShIfTtgQzBe_-pHhyzzyz4MHtZ7_TSCCf0Va6tgxXhsUgPKh6uaM9L3cKJgJzOjxd7d9C5xRs4FdMT1sdl6ir/s320/facebook.png" /></a><br />

<a class='linkopacity' href='http://twitter.com/akaun twitter anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsFiT1kNSjN2NLPqWJNJRpP7ZhHYG65ZP99hQEaaeOUozXS2lqTIf5wgmtH43rJYlULInWSJq29WMUNBinPqKKgZk4Q-Bg2xZAh4HAxL_j-R08SXE4U0Ft5UEyLYpWatJP9QGtGrItJnmE/s320/twitter.png" /></a><br />

<a class='linkopacity' href='http://wanhazel.blogspot.com/search/label/tutorial' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='feed'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghkrGS-qS-SR1EoTIPPLwkree_E1ec7iWnQVlCTrzHcOAxa1CljBuea2HjqOANsqvDjNT-UUvgagZIsKkKf16EuDyNSu1IC4y39x-G_MzofdUhEK9DcrXudkkZ4nSoJ0kKiPQI4y6YXqjD/s320/feedblogger.png" /></a><br />

<a class='linkopacity' href='http://youtube.com/akaun youtube anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='youtube'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM66HnSxMxVOwkWz3RDlwwBBRJ_qF3lvb2_P1jbWQYmRxHRVno-SSHBc44g_sMa1ZNJDLX_M-X6YRqLkaw65Ppt_kap2xFe2f28j4W7WdYXnqMAFONym-eCzXBvi3rgIE0hTcHSJ9ODIJD/s320/youtube.png" /></a><br />

<a class='linkopacity' href='http://flickr.com/akaun flickr anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='flickr'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWZdQgMWdYm1uYc3ohjb8X77v382LyFYdoHetcswbS44cBFvlgecy_yZHJ-38QgupmhmB8qfgX6wcaLRSfeFzxWqmdQjyqwNP6C_W_3zIOhzElhnAb1kmaSPJ4bNq31tn3kLBNsAUAvQXG/s320/flickr.png" /></a><br />



</div>






tu je.


selamat mencuba






.



54 comments:

Umie Nadhirah said...

Makaseh ^^

Wan_hazel said...

sama sama umie

Saya Adalah 'Cik Putet' said...

Wannnnnnnnnnnnnnnnnnnnn!!!
thanx sgt tlg wat kan tutorial ni..
uwaaaa~ terharu sgt..put tak cube lagi..
mlm ni put cube..
mekaceh wan

:) ----->bg katak sekor kat wan (katak betol :p)

Saya Adalah 'Cik Putet' said...

erk..
wan maner nak cr coding tok icon formspring.me dan 'warung' put?

warung = blogshop (nak icon omel2)

Wan_hazel said...

cik put nie nape lah tak cakap awal...nak icon ape utk shop put tu???


alahai katak betul yg put bagi...nanti kasi k...wan nak yg warne pink(adeke??)..hahaha

Anonymous said...

nsib ktk post tutorial tok..mek mok juak molah icon fb ngn twitter ya..p asa malas eh..

magnoliapert said...

Salam wan, hehehe, nice blog, smart gila.
Eh nape kte xboleh nak copy code tutorial ni??
Disable right klik la.
:'(

Wan_hazel said...

cylia chel


hahha...kyk polah lah mun da masa k...

Wan_hazel said...

magnoliapert


tengs,,,magnoliapert tekan je CTRL+C...utk copy k

magnoliapert said...

Thank Sifu~ :D

Saya Adalah 'Cik Putet' said...

erk..
nak icon formspring.me
pastu nak icon 'warung' tp mane la put tau nak icon pe..
gambo pon takda nk tgk..

:p

katak pink?takda..katak merah ada..tp beracun owh..mau ka?

magnoliapert said...

Wan! Thanx ya, Its working tapi boleh ke nak pekatkan warna benda alah tu?? cam xnampak lah :)

Wan_hazel said...

magnoliapert

law nak terang kan opacity tu

tukar kod nie

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


ke

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=100);
-moz-opacity: 1.5;
opacity: 1.0;
-khtml-opacity: 0.5;}

Wan_hazel said...

Saya Adalah 'Cik Putput'


nanti wat wan k...law suke gune law tak suke..tak yah..hehehe

Wan_hazel said...

cik putput..



nah kod nye...

letak sederet ngan link yg len k...tukar yg tulisan besar tu nanti k,,


<a class='linkopacity' href='UR WARUNG LINK' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='NAMA WARUNG CIKPUTPUT'><img border="0" src="http://i429.photobucket.com/albums/qq15/wan_hazel/wan/Pet_Frog.gif" /></a><br />

<a class='linkopacity' href='UR FROMSPRIBG LINK' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='ask me anything'><img border="0" src="http://i429.photobucket.com/albums/qq15/wan_hazel/fspringblogger.png" /></a><br />

magnoliapert said...

dah berjaya, hehe, thanx thanx :)

suzie rahman said...

wah...maseh krn info tu

Wan_hazel said...

suzie

welkam...peace

zuhaidazunairi said...

salam wan .
zu nak tanya .
mcamana nak dapat icon utk myspace eh ? wan boleh carikan utk zu tak ? thanks :)

zuhaidazunairi said...

haa wan . satu lg . nak mintak code utk icon formspring.me sbb yg wan bg kat atas tu image dia dah delete lah .

zu nak icon utk myspace & formspring.me eh . thanks :)

Wan_hazel said...

ok..yang nie utk

my space

http://www.iconarchive.com/icons/fasticon/web-2/32/MySpace-icon.png

twitter

http://www.iconarchive.com/icons/fasticon/web-2/32/Twitter-icon.png

formspring

http://www.iconarchive.com/icons/fasticon/web-2/32/Technorati-icon.png

zuhaidazunairi said...

wan , nape zu tak boleh buat pun ? :(
zu buat yg myspace . keluar gambar lain . ;((

Wan_hazel said...

zuhaidazunairi

zu...wan cek tadi betulah tu icon myspace...warne biru cam ade 3org..

zuhaidazunairi said...

wan boleh bg code penuh utk link icon myspace & formspring ?
zu act tak tahu nak letak mane code yg wan bg tu :|

Wan_hazel said...

<a class='linkopacity' href='UR MYSPACE LINK' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='MySpace'><img border="0" src="http://www.iconarchive.com/icons/fasticon/web-2/32/MySpace-icon.png" /></a><br />



<a class='linkopacity' href='UR ForMSPRING LINK' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='FormSpring'><img border="0" src="http://www.iconarchive.com/icons/fasticon/web-2/32/Technorati-icon.png" /></a><br />

zuhaidazunairi said...

wan , zu dah buat .
tp still tak jd , wan tgok la kat belog zu tu :(

Anonymous said...

thanksssss tutorial ini! i dah lama cari benda ini :)

Wan_hazel said...

Ailyl Rozanna

welkam..law ade icon yg tak ok tu..ambek je kot yg kat komen2 atas tu k..

Anaz Tiffany said...

waaaah !! sgt2 shantek...
wana dh try dh..hehe
thnx Wan.. :D

Wan_hazel said...

wana

welkam.wana

fiesha said...

mcm mne klu nak buad utk tumblr ? fomspring . andd yahoo ? i da try butt link yg bwh skli tuhh ta tw laa .

Wan_hazel said...

tuka je image link tu ngan nie..nie utk formspring

http://www.iconarchive.com/icons/fasticon/web-2/32/Technorati-icon.png

yahoo wan tak de

fiesha said...

how about tumblr ?

Wan_hazel said...

tumblr??/ape tu erk???

fiesha said...

laa , ta tw kea ? something like blog . tpy bkn blog .

Wan_hazel said...

owh..ok gune kod nie k..

gantikan yang..img border="0" src="http://4.bp.blogspot.com/_LZtXSNcp76A/TBIPhuMVmKI/AAAAAAAABFo/6YC2J5UAXp0/s320/flickr.png"

yg nie..

http://4.bp.blogspot.com/_LZtXSNcp76A/TBIPhuMVmKI/AAAAAAAABFo/6YC2J5UAXp0/s320/flickr.png


tuka kepada

http://3.bp.blogspot.com/_LhHZAifMoFE/TPZH0HiuwLI/AAAAAAAADS0/3SSY14xQo7M/s1600/tumblr.png

ok...

fiesha said...

ouhh , okeyy .thanx wan :)

Farah said...

eh..thnks eh..da lame cari..finally jmpe gk..thnks wan ^^

Wan_hazel said...

welkam..hehehe..jgn lupe vote wan...ehhehe

✿ cik atie said...

kod utk myspace xde kew??

Wan_hazel said...

owh..ok gune kod nie k..

gantikan yang..img border="0" src="http://4.bp.blogspot.com/_LZtXSNcp76A/TBIPhuMVmKI/AAAAAAAABFo/6YC2J5UAXp0/s320/flickr.png"

yg nie..

http://4.bp.blogspot.com/_LZtXSNcp76A/TBIPhuMVmKI/AAAAAAAABFo/6YC2J5UAXp0/s320/flickr.png


my space

http://www.iconarchive.com/icons/fasticon/web-2/32/MySpace-icon.png

cupcake said...

saye ambik banner awk taw

Wan_hazel said...

cupcake

ok..tengs taw

Hazim Ismail said...

wan..mcm mane kalu nak letak kt bawah skit..bile letak kat atas,ianya bertindan ngn button shutbox..

Wan_hazel said...

Kerusi Bangku

ok care nye..care kod top:..ubah jumlah dlm tu...tu je...letak 200 ke 120 ke..ok

yuhainienayusof said...

thanx abg wan. lama dah niena cari tutorial ni. hehe. kalau friendster camne pulak? huhu

Wan_hazel said...

yuhainienayusof

leh cari icon freindster ganti masuk je...

yuhainienayusof said...

owhh...ok abg wan. thanx~ =)

yuhainienayusof said...

emm...niena x pndai buatlah abg wan. bleh carikan utk niena x?..huhu. thanx~ :)

Wan_hazel said...

ganti masuk yg nie je k..hehehe

<a class='linkopacity' href='http://freindster.com/akaun freindster anda/' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='flickr'><img border="0" src="http://1.bp.blogspot.com/_LhHZAifMoFE/TUvnyAIrwVI/AAAAAAAAEuo/terSInjCeSA/s1600/friendster.png" /></a><br />

yuhainienayusof said...

owwhh...hehe thanx abg wan~ ;)

Wan_hazel said...

welkam...peace..

nur anis shuhada said...

nk amek kat ne account fb erk ?

Wan_hazel said...

ambek dekat link profile FB awak k