How to add social media icons to your blog // Blog Restyle



Hi everyone, a reader asked me for tips to personalize a blog, one of them is the social media icons. Most of  the icons and links you see on the web are not that hard to install as it seems, so here is how you can add your own icons on the blogger side bar.



1. First step is to personalize your icons, decide what size you want the icons to be, and what colors are best fitted for your blog. When you're done, save the images separately in your computer.

2.Upload your images to a photo hosting site like photobucket, flickr or tinypic.



3. Go to your blogger site and open the layout section, select add a widget, and choose HTML/JavaScript. 

4. Copy this code: <a href="http://linkgoeshere.com" target="_blank"><img src="http://imageurlhere.png" border="0"/></a> and paste it in the widget window, put the link to you social media where it says linkgoeshere, and the image url where it says imageurlhere.

If you can't find the image url, in most sites the link is near the picture if not, try searching in the share section

5. Do the same steps for the rest of your icons and test to see if everything is working properly.

Not that hard right? This post is a preparation for my next freebie that will be published on Monday, and I really like how it is turning out. Come back then if you're in a need for new icons.


Talk to you soon,

10 comments

  1. What a lovely tutorial! Social media icons can totally transform your blog for the better. :)
    Amy xx

    catscraftsncritters.blogspot.ca

    ReplyDelete
  2. true, I love how you can personalize something that simple in so many different ways, to fit your blog theme better

    ReplyDelete
  3. That's how I do it as well c:
    The selfmade icons are lovely!
    Xx http://icepandora.blogspot.com

    ReplyDelete
  4. Thank you :D Loved your swiss roll post, what do you do with these knitted foods?

    ReplyDelete
  5. I used your directions and added the icons to my blog! It was so easy! Thank you !! :) http://aspeckofalex.blogspot.ca

    ReplyDelete
  6. You're welcome, your blog looks awesome :D

    ReplyDelete
  7. For some reason it just wont let me copy the code, which is why I think it's not working for me :( very sad and frustrating. I just typed it all out myself but it did not add a link or icon to my blog.. I'm so confused. HELPPP

    ReplyDelete
  8. okay, so I got the code to copy, and the link works, but the icon/picture isnt working. It just shoes a broken image.. http://prettyinpowderedsugar.blogspot.com/

    ReplyDelete
  9. the problem can be from the site where you uploaded the picture, but I can see your 4 icons just fine

    ReplyDelete
  10. Bluehost is ultimately one of the best web-hosting company with plans for any hosting requirements.

    ReplyDelete