Saturday 11 August 2012

Tutorial Button FB dengan Twitter di tepi blog

Assalamualaikum Blogger :) 

Hari ni terdetik nak buat tutorial mcm mn nk letak icon di tepi blog y mcm dalam gambar tu . 


Fb, Twitter dengan Blog 
  1. DESIGN  -> ADD A GADGET -> HTML / JAVA SCRIPT 
  2. Copy code kat 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 HTML tu.

4. Replace colour PURPLE dengan URL FB korang. Replace colour BIRU tu dengan URL ICON SOCIAL NETWORK yang ada di bawah ni 


5. RED colour depends pada korang if nak tukar left or right side :) 

http://4.bp.blogspot.com/-nHdZDcUuaTM/UCX85enJnNI/AAAAAAAAA2k/x3WeXM-w9Fo/s1600/facebook.png

http://1.bp.blogspot.com/-CIVBs3Te3CY/UCX86CgD3ZI/AAAAAAAAA2s/S0qSpE0s5jQ/s1600/twitter.png

http://4.bp.blogspot.com/-PFMOuI_umQE/UCX843ryvTI/AAAAAAAAA2c/0WgHCvCkKRc/s1600/blogger.png


5. Kalau nak tambah social network lain atau apa-apa pages just copy code kat bawah ni :)


<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 Preview and SAVE :)


* if nak copy code tu sila tekan Ctrl + C then baru boleh paste kat html korang :D  

No comments:

Post a Comment

Kindly drop some comment here. i'll reply once you comment. Please avoid from comment harsh words :)