Adding Social Media Buttons to your Blog

I'm ok using HTML to design and code my blog but I do have to read tutorials made by other bloggers most of the time. I think the main difficulty with designing your blog and using HTML is that the slightest mistake could mean that what you're trying to do wont work. Today I decided to share with you a tutorial for adding social media buttons to your blog, I hope it helps!

First you need to get your buttons, the website I used is Icons DB it is really easy to use. If you want to get your icon in the colour that matches your blog go on to Template and click on customize and find the colour you want. so i wanted the colour of my social media buttons to match the colour of my links. e.g.

You can see that the colour I picked is circled in red, you have to have the colour you want in the form of a hashtag. I then copied this colour and pasted it in the colour bar on the Icons DB website:

After you have picked your colour you need to pick your company/website (instagram, bloglovin, pinterest). To do this you search for the company/website in the search bar on the right of the screen.

The search results should come up with a few possible options click on the one you want.
NOW LEAVE THIS WINDOW OPEN BUT OPEN A NEW TAB, GO TO BLOGGER AND OPEN THE THE LAYOUT OPTION. Click on add gadget in the side bar and scroll down until you find the text widget.

 Open the text widget, click edit HTMl in the top right hand corner and copy and paste this code:

<a href="SOCIAL MEDIA WEB ADDRESS"><img border="0" height="48" src="LINK TO ICON IMAGE" width="48" / /></a>

The parts you need to change are in red for your social media web address you need to put the web address for the page that you want your icon to link to. For example if it were an instagram button you would have the web address: instagram.com/YOUR INSTAGRAM USER NAME


The link to the Icon image is the harder part, this is where we go back to the icons db website. All you have to do is right click on the image you picked earlier and click View image info.

 You should then get a list of addresses that looks something like this:

They will be one address highlighted and that is the address you need to copy and paste into your html code. Repeat the same steps for any other icons you want to add, save your text widget and you're done!

I hope you found this useful, if you have any questions do not hesitate to ask!

Ella x