Blogger Tutorial: How to Add Social Icons to Your Blog


Blogger Tutorial: How to add social media icons to your blog. It's pretty easy to do. GradeONEderfulDesigns.com

Trying to figure out how to place some social icons into your sidebar? I have just the tutorial for you.


Blogger Tutorial: How to add social icons to your blog 

It's actually easier than you might think.
 
The first thing you need to do is upload the image you want to use to photobucket or any other free photo hosting site of your choice.  After you've uploaded your image, copy the source url.
 
In photobucket, all you need to do is click on "Direct" (far right).  It will look something like this:
 
http://i1230.photobucket.com/albums/ee496/yourusername/Post.png


UPDATE (2019): I don't recommend photobucket anymore. They're having lots of problems on their site right now. Just upload your icon images to your blog in an unpublished post and go into the html text editor and find the source image code there.


It will look similar to this:

https://1.bp.blogspot.com/-SwgqE6kbs6E/XXQ78Is949I/AAAAAAABJZM/bij5SUn6zX4t9F0ZUZx4-okJC05_3-NNgCLcBGAs/s1600/adding-social-icons-blogger-tutorial.png


Now paste that code somewhere you can easily grab later.
 
Go back to your blog, into layout, and add an HTML gadget.
 
In that gadget, paste the following:
 
<a title="Follow Me on XXX"
 
href="LINK TO SOCIAL MEDIA" target="_blank"><img src="ICON IMAGE URL" /></a>

 
Replace "Follow Me on XXX" with the title you want when your cursor hovers over the icon, eg., "Follow Me on Bloglovin'".
 
Replace "LINK TO SOCIAL MEDIA" with the url to your social media page.
 
Replace "ICON IMAGE URL" with the url for your image source (remember? the one you saved earlier).
 
That's it! Click save and your new icon will be sitting there in your sidebar.
 
If you'd like a few of them, then just go back into the same gadget and repeat for each social media link.
 
Have fun!


No comments

Post a comment

Thanks for leaving a comment :)