[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!