Tuesday 31 March 2015

How To - Social Media Icons



How to add Social Media Icons for your blog.
For Blogger Blogspot.

First, you may already have your icon choice ready.
You can either upload the icon from your PC to this blog,
or save the icon in any free image hosting site i.e,
Photobucket/ Flicker or even Facebook will do.

If you upload icon from PC, you will get link like this :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZkWg11zK1BbGqyhJ11aBW7tWbHlEwwfynH5oJeAMHgPO7okQVSuJaiRV7j_h3Yeml2yFdHGAx9PGxG9FITIkB1NRV8FvtcnjGeKfMBsXUUYy6sSUCXpitt-l_QKylpJDiEuqjWXEDrs/s1600/Youtubesakura.png" imageanchor="1" >
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZkWg11zK1BbGqyhJ11aBW7tWbHlEwwfynH5oJeAMHgPO7okQVSuJaiRV7j_h3Yeml2yFdHGAx9PGxG9FITIkB1NRV8FvtcnjGeKfMBsXUUYy6sSUCXpitt-l_QKylpJDiEuqjWXEDrs/s1600/Youtubesakura.png" /> </a>

Now delete the a href link tag
which is like the highlighted in blue above.
Now the only left is the image URL/ tag.
Copy the image tag and decide where do you want
to put your icon, at the top/ bottom or sidebar.
Then, add a HTML/JavaScript widget Click How To.
Paste the code that you copied earlier and add a link to it.

     

How to link :
Copy the (1) tag given below, paste it before the image URL and
replace the highlighted text with your Facebook/ Twitter etc. url.
Lastly, copy the (2) tag and paste it after the image URL, and save.

(1) <a href="FACEBOOK URL" title="Facebook" target=”_new”>
(2) </a>

Your tag should be look like this:
<a href="http://www.facebook.com" title="Facebook" target=”_new”>
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGZkWg11zK1BbGqyhJ11aBW7tWbHlEwwfynH5oJeAMHgPO7okQVSuJaiRV7j_h3Yeml2yFdHGAx9PGxG9FITIkB1NRV8FvtcnjGeKfMBsXUUYy6sSUCXpitt-l_QKylpJDiEuqjWXEDrs/s1600/Youtubesakura.png" /> </a>


*Do these steps again to add more icons, and you are done!

Now if you use Photobucket, you will get the option to copy
the image URL - Copy the "Direct" one and use it for image tag,
and link it using the same method above.
<img src="IMAGE URL">


How To Copy Code: Highlight code, press CTRL + C
If you find this helpful, please like, share, tweet - support me. Thank you!


0 comments:

Post a Comment