[Tutorial] Button FB, Twitter di tepi blog

Salam...


Hari nie nak buat tuto macam mana nak letak ikon social network such as FB n Twitter la kan kat bahagian tepi blog. Macam gambar di atas tu.

1. DESIGN > ADD A GADGET > HTML/JAVASCRIPT

2. copy code di bawah


<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='MASUKKAN URL FACEBOOK ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='facebook'><img border="0" src="MASUKKAN URL ICON FB ANDA" /></a><br />

<a class='linkopacity' href='MASUKKAN URL TWITTER ANDA' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="MASUKKAN URL ICON TWITTER ANDA" /></a><br />

<a class='linkopacity' href='http://www.blogger.com/home' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='go to dashboard'><img border="0" src="MASUKKAN URL ICON BLOG" /></a><br />

</div>

3. Pastekan kat ruangan kosong tu.

4. Warna merah tu korang faham kan camne.. Yang warna BIRU tu, korang masukkan URL ICON SOCIAL NETWORK yang ada di bawah nie..

http://3.bp.blogspot.com/_PK5f-bkuqSc/TQpE9T7OPyI/AAAAAAAABKA/Owt1uPloSf0/s1600/facebook.png

http://1.bp.blogspot.com/_PK5f-bkuqSc/TQpE-xelCAI/AAAAAAAABKI/mNh_hSt2Dhs/s1600/twitter.png

http://3.bp.blogspot.com/_PK5f-bkuqSc/TQpE8tZQqSI/AAAAAAAABJ8/A_MmJwleya0/s1600/blogger.png

icom-icon nie sebenarnya korang boleh design sendiri kalau kreatif. Mira tahu ramai yang kreatif. hehehe.

5. Kalau nak tambah social network lain atau apa-apa pages

<a class='linkopacity' href='URL PAGES/SOCIAL NETWORK' imageanchor='1' rel='nofollow' style='margin-left: 1em; margin-right: 1em;' target='_blank' title='twitter'><img border="0" src="URL ICON SOCIAL NETWORK/PAGES /></a><br />

6. Kalau dah siap, tekan SAVE.

Selamat mencuba dan semoga berjaya ya rakan-rakan blogger.

credits to: whitey mommy


Sign up HB!Affiliate to enjoy free gift!

23 budak baik!:

ɴɑɴɑ senget said...

kita amek taw :3

Niza Rockin said...

tq dear...niza amik k..:)

Ain Nurfitrah Aidrul Hisham said...

guna yee . tenkiu :)

Erin Baiduri said...

button ym tak jadi la cmne?

Eyqa Carissa said...

follow kite tau..kita da dollow :)

SabrinaNurAisha said...

@ɴɑɴɑ senget kak ,macam mana akak tukar blogger punya icon tu ? yang kat atas ?

Syuhada said...

assalamu'alaikum..
sy amek ye..^^
makasih..^^

fatin bulat said...

saya amek ya :) TQ

Anie Roslezah said...

saya ambil ya....tq

Nuyue Lockheart said...

awk kite ambik tau tq

Cik Syiera said...

syiera ambik yew..tq.

diera_nadiera ulalaaa~ said...

salam si jelita.diera sggh blog glamour yg cantik spt owner nih ^_^ subhanaALLAH. indahnya! ^_^
btw, diera amek juga yaa....terima kasih si cntik mnis ^__^

Syaheera Saharudin said...

thnx taw kak..
syera ambik taw tuto ni..
:)

miszNita said...

Nita amk ye..tq..

ameerah zulfa said...

Tenkiu 4 de great info..
nnt join blog saya jg k..

visit : My LuRve Iman

ilani yuliq said...

lani amik yeee. thanks :*

miss97 said...

thanks for this tuto
saya guna icon awak :)

Cahaya Kehidupan said...

tengs sooo much miss! sy amik ye.hehe

Nur Amalina Maisarah said...

saya ambik :) tengss a lot

Cahaya Hassan said...

Macehh buat tutor ni ! amek tau tau ! heee

nurfazira azhar said...

salam, trima kasih atas ajaran itu :)
sya ambil apa yg ada :) sila kunjung :)

Mizz Yana said...

tq sharing :)

Huda Mashudi said...

ana ambil tau

Related Posts Plugin for WordPress, Blogger...