Sunday, 25 October 2015

social media icon di sidebar blog

Assalammualaikum
Terlebih rajin! Apa yang saya tahu utk dikongsi..
Nah!.. saje nak share tutorial saya..untuk sape2 yang berminat..ramai je yang dah tahu kan..tapi takpe kita share juga :) ..mana  la tau boleh membantu. Ni salah satu cara paling senang .hihi

Ni social media icon di sidebar blog saya



Untuk letak social icon macam ni boleh ikut step bawah:

STEP 1: Open Dashboard--> Layout--> Add a Gadget--> HTML/JavaScript
STEP 2 : Copy kod di bawah ni dan pastekan di ruang HTML/JavaScript anda



<center><table border="0"><tbody><tr><td>
<a href=" LINK FACEBOOK ANDA " target="_blank"><img alt=" Add Me" src="URL ICON" style="width:40px;height:40px" /></a></td><td>
<a href=" LINK INSTAGRAM ANDA " target="_blank"><img alt=" Follow Me" src="URL ICON" style="width:40px;height:40px" /></a></td><td>
<a href=" LINK TWITTER ANDA " target="_blank"><img alt=" Follow Me" src="URL ICON" style="width:40px;height:40px" /></a></td><td> <a href=" LINK GOOGLE+ ANDA " target="_blank"><img alt=" Follow Me" src="URL ICON" style="width:40px;height:40px" /></a></td></tr></tbody></table></center>
  


STEP 3 : Yang berwarna tu masukkan Link URL anda dan URL ICON tu boleh copypaste yang saya sertakan kat bawah ni ye.
STEP 4 : Save and Done!

Hasilnya anda akan dapat social media icon kat atas..tapi html code di atas ni untuk icon statik sahaja - just point cursor and klik..Kalau nak icon berpusing 360 bila point cursor mcm saya tu..sila guna code yang saya dah adjust kat bawah ni..:)


<style>
‪#‎social‬ a:hover { background-color: transparent;opacity:0.7; }
#social img { -moz-transition: all 0.7s ease-in-out; -webkit-transition: all 0.7s ease-in-out; -o-transition: all 0.7s ease-in-out; -ms-transition: all 0.7s ease-in-out; transition: all 0.7s ease-in-out; }
#social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
</style>
<center>
<div id="social">
<a title="AddFacebook" href="LINK FACEBOOK ANDA" target="_blank"><img border="0" src="URL ICON" style="width:40px;height:40px"  /></a>
<a title="FollowIG" href="LINK INSTAGRAM ANDA" target="_blank"><img border="0" src="URL ICON" style="width:40px;height:40px"  /></a>
<a title="FollowTwitter" href="LINK TWITTER ANDA" target="_blank"><img border="0" src="URL ICON" style="width:40px;height:40px"  /></a>
<a title="FollowG+" href="LINK GOOGLE+ ANDA" target="_blank"><img border="0" src="URL ICON" style="width:40px;height:40px"  /></a>
</div>
</center>

Save and Done! Boleh review hasilnya..

Incase nak tambah icon lain,contohnya nak letak icon pinterest so copy code bawah ni..


<a title="Nama ICON" href="LINK LAMAN SOSIAL ANDA" target="_blank"><img border="0" src=" HTML ICON " style="width:40px;height:40px"  /></a> 

dan pastekan di ATAS </div>

Yang BOLD HITAM tu ialah URL ICON PIC YANG ANDA PILIH..Kalau nak lagi senang kat bawah ni ada yang saya dah siapkan..just copypaste je..kalau nak yang bentuk dan color lain , boleh juga buat icon sendiri atau google je k.



Facebook: http://2.bp.blogspot.com/-IIa6Mc7ojoo/VivRO4phWQI/AAAAAAAACKo/BEcMdZWg0M4/s1600/fb44.png
Instagram: http://3.bp.blogspot.com/-C_teQRxwvVs/VivRRxIj-zI/AAAAAAAACKw/Jv80a2pnk94/s1600/ig44.png
Twitter: http://3.bp.blogspot.com/-zQw2ACwuIFo/VivRT2j6HTI/AAAAAAAACK4/AGUMXBGbnsU/s1600/twt44.png
Google+: http://2.bp.blogspot.com/-UAf6kw--cjo/VivRWU7-loI/AAAAAAAACLA/Os1Yhyu5Juo/s1600/g%252B44.png
Pinterest: http://3.bp.blogspot.com/-rqdOP1PDyHY/VivNJ63tuRI/AAAAAAAACJo/ItzU_6-c28Q/s1600/pint.png    Subscriber: http://4.bp.blogspot.com/-L7HIX9EP5rM/VivMuaGVxbI/AAAAAAAACJg/s_-3SmTnqlA/s1600/subs.png

 
  
 
Facebook: http://1.bp.blogspot.com/-DfxIbPSup4s/VivO5ncJ6gI/AAAAAAAACJ8/8NXOA5h5uXU/s1600/fbgray.png
Instagram: http://4.bp.blogspot.com/-Rte-z6C6yJU/VivO8eXxH8I/AAAAAAAACKE/vEcSaZX9a08/s1600/IGgray.png
Twitter: http://1.bp.blogspot.com/-_04zENIuOZc/VivPAfwb7qI/AAAAAAAACKM/0MJ0_MNc_5E/s1600/TWTgray.png
Google+: http://3.bp.blogspot.com/-2uo1GrMHIjs/VivPDpetKCI/AAAAAAAACKU/Qek-60LXd4c/s1600/G%252Bgray.png

Pinterest: http://1.bp.blogspot.com/-0P2FwdidmdQ/VivO3PNvmeI/AAAAAAAACJ0/iYaGD4CMFy8/s1600/pintgray.png 
Subscriber: http://4.bp.blogspot.com/-7pU_oZOMnxo/VivPH1iWbHI/AAAAAAAACKc/BRdPc01Doe8/s1600/subsgray.png 



Facebook: http://4.bp.blogspot.com/-2GrAX0bNMDY/Vix07e1qfCI/AAAAAAAACME/qsSeuWt0oA8/s1600/fb3.png
Instagram: http://2.bp.blogspot.com/-7G0_sT2OIks/Vix0_kkpAfI/AAAAAAAACMM/6WQCK_YYjuk/s1600/ig3.png
Twitter: http://3.bp.blogspot.com/-OeYJTJBSkiM/Vix1CjaFFsI/AAAAAAAACMU/zUOaELAjZvs/s1600/twt3.png
Google+:
http://4.bp.blogspot.com/-a6Jnk_24Enk/Vix1E1cyQdI/AAAAAAAACMc/8FWaCMt6Hng/s1600/g%252B3.png
Pinterest: http://4.bp.blogspot.com/-_mjlPJMc-xE/Vix1G3ckX9I/AAAAAAAACMk/RZM3-UURTRA/s1600/Pint3.png
Subscriber: http://1.bp.blogspot.com/-i70Yf8-XrWQ/Vix1NSlwvLI/AAAAAAAACMs/-TCZRe0StuI/s1600/Subs3.png


OK.yang ini ekslusif vintage dari saya untuk anda. url each icon pun saya sertakan :)
Tinggal copypaste je..


Facebook: http://1.bp.blogspot.com/-wDkq0GL912o/ViyctkkgbLI/AAAAAAAACNE/5p7xMdi30lE/s1600/rosfbd.png
Instagram: http://3.bp.blogspot.com/-l4A70XLsdS0/ViycvrXW4ZI/AAAAAAAACNM/nSHaI5qjlZ0/s1600/rosigd.png
Twitter: http://2.bp.blogspot.com/-UCPB9ud-qnI/ViycxhMD4ZI/AAAAAAAACNU/dWN5hatK-o0/s1600/rostwtd.png
Google+: http://1.bp.blogspot.com/-yeCCvs87gdY/Viyc0nsTWxI/AAAAAAAACNc/w-letYqBSrs/s1600/rosg%252Bd.png
Pinterest: http://1.bp.blogspot.com/-874MwCccSCA/Viyc3FZ3GGI/AAAAAAAACNk/kHO0awz7WDk/s1600/rospd.png
Subsriber: http://1.bp.blogspot.com/-CdLe39BBVtY/Viyc5UrZbRI/AAAAAAAACNs/Ij-lY5GXnNg/s1600/rossd.png

BERJAYA TAK ? Semoga Dipermudahkan! 

13 comments:

  1. Wah! Awesome entry. Terima kasih sangat2 sebab memang tengah carik tutorial ni :D

    ReplyDelete
  2. thanks utk tutorial ni.. sgt membantu :)

    ReplyDelete
  3. wow..thanks..nk buat jgk..ehek

    ReplyDelete
  4. yayy terima kasih akak dah letak -nnakhairudin.blogspot.my

    ReplyDelete
    Replies
    1. Alhamdulillah..:D

      Akk dah stalk..kihkih..yaayy..match plak ngan color blog eh..kipidap dik..caiyok2- hepi akk :)

      Delete
  5. Terima kasih banya2, Ros. Kebetulan saya memang tengah cari tutorial utk media icon ni. Sangat2 membantu!

    ReplyDelete
  6. terima kasih untuk tutorial yang bagus ini. Saya guna yang warna kelabu tu ye ^^

    ReplyDelete