Custom Navbar

Thursday 9 October 2014

How To Add Social Media Icons to Your Blog (Blogger)


Hey guys!! I'm back with another blog tutorial! This is the fourth blog post in this series, so if you haven't read the others yet, here they are: Creating and Adding a Header, Adding a Background, and How to Add the Follow Me on Bloglovin Button to the End of Each Blog Post. Today, I will be showing you how to add social media icons to your sidebar.

1. So the first thing you do is find free social media icons online. If you are more digitally skilled then you can design your own icons yourself, but this tutorial is for people who aren't that great at graphic design. Once you find the ones you like, make sure to save or download them for the next step. Here are the ones I chose for this tutorial:
2. Next you open the image you saved in paint. Crop the icons individually like in the pictures below and save them individually.

3. After you have done this to each of the icons, log in to Blogger and click to write a new blog post. You don't ever publish this blog post and you probably shouldn't delete it either in-case you ever need to edit your social media icons. Now insert the images of the icons that your saved individually, one after the other, until you have them all in the blog post.
4. Next, in another tab,  go to the first social media site that you want to link in the icons and copy the link to your page.

5. Go back to blogger and click on the first icon that you want to do. Once it is highlighted, click the link button (this usually takes two tries for some reason so if nothing happens the first time, highlight the icon image again and click the link button again). 

6. A box should appear with the title "edit link". Paste the link to your social media site into the box the says "which URL should this link go to?" and then click OK.

7. Do the last step for each of your social media icons using the link to the corresponding social media link. Basically, do the same for Google Plus with the link to your Google Plus page and the same for Twitter with the link to your Twitter page. Once you are done this, click HTML in the upper left corner.

8. Once you click HTML, the blog post will change to a code. Copy this entire code.

9. Next save the blog post or just go to another tab and click "Layout" in the Blogger menu. Once you are in the layout page, click "Add a Gadget".


10. Once you have clicked "Add a Gadget" a box/other window will appear showing you the type of gadgets you can add. Click to add the HTML/JavaScript gadget as shown below.

11. When the "Configure HTML/JavaScript" box is open, paste the HTML code that you copied from the blog post containing your social media icons into the content box. Then click save.

12. You can move the position of your gadget in the layout page if you aren't happy with it at the top. Go to your blog once you have saved the ideal position (ie. under your about me section or followers). You will now see something like the picture below with the icons on your blog that, when clicked brings you to your corresponding social media sites.
13. If you aren't happy with the way your social media icons are arranged (ie. two beside each other and one on its own), then go back to the draft social media icons blog post that you saved earlier and play around with the position of the icon. You can do this using the space button or by click on the images and clicking right, left or centre. Then go back to step 8 and continue on from there with the new HTML code for the blog post copied.

You might not be able to get the icons in the perfect arrangement that you want (ie. I had to settle for two icons across instead of three for my real icons on my blog) because this depends on the size of the images and the size of your sidebar but you can try adjust those if you really want them a certain way.

I hope you liked this blog post. If you have any questions or were a bit confused about a certain step then make sure to leave a comment below and I will do my best to help :)