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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhohTecwb_G6TCbx0oEZ1uFQ2n61ZHbYu1GzoXxI5_olKHlhiXxAjI2AGpfSOHCn1V7ZBlNl1QjuPk6oKa_WhoI-M6eVDhSezt1hm7DvT2vQAjx_58TA0xVIPvJkFyjzEo0iEJpn90e0PUx/s1600/facebook.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNogfbusdAOpEY0YasqcEKuEVIWEKnF7Pr925On6pvQae9KYFUKDOkGUfYwz9vwPj7VzrKrnjV4EZuSlEfHlgAtRqaiiFqg0hZxcRuJcMIJni7Pb2JTEzS8YMrUkTlv8Vf0zqHHKS9zc-S/s1600/twitter.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-3sAdVeiI-KLtJJAG7q1oDZuIx_8fk1w0HDFl2src3owT23CGHTAYlqqyApFUliN7LDhFI7wlI-NQyeGi6VthH1HA_C3vb5HwCYSeGZSqA3oNdjqdOpqN9oo_F-m8WRSgrUQS0gpuM-6J/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!