Adding Social Media Icons on Blogger Website

 

In this article we will see how we can add social media icons on our blogger website.

 

 

Well, instead of providing a direct social media icons Gadget in the Gadget section like “contact  me”, “Search”, “Follow by Email” etc, blogger provides “HTML/JavaScript” Coding Gadget which helps us to add customized Gadget by writing HTML/JavaScript code and if you don’t know how to write a code like me, we can copy the HTML/JavaScript code after creating the new-post and then paste it to HTML/JavaScript Gadget so that it can be added with the help of HTML Coding and if its not making any sense at this point in time, plz! bear with me.

So, to add social media icons in your blogger website, First, download the social media icons images and resize them and remove their background if needed. I have used the “Paint App” that comes free with the windows to resize them and Photoshop to remove the background then give the icons images proper name and then sign-in to your blogger website.

 

 Now, to add the social media icons, click on create a “new-post” and upload your social media icons images by clicking on this “insert image” button and re-arrange them carefully and Remember “keep a space among them otherwise the added links will not work properly”. Then select an image and click on the “Insert or Edit Link” button to add the relevant link and select this option if you want the link to be opened in a new window or tab and then click on “Apply” to save the changes. After adding the links to your icons images, click on “insert image” button again and give the images proper names.

 

 And, resize the images by dragging them from the corners so that they can be adjusted properly in the side-bar of your blogger website. Then click on this “pencil drop-down” icon and select “HTML View” and here is the HTML code of all the images we have just worked on. Just copy the code by selecting it  and instead of adding any other setting and publishing just go back to the main page of your blog by clicking on the back arrow and click on “Layout” and then click on “Add a Gadget” in the side bar section and select “HTML/JavaScript” here in this field give it a title and then pasts the HTML code in the “Content section” we have copied earlier then click on save button and then re-arrange the gadget according to your need. And then save the changes again by clicking on this “Floppy disc” icon. 

 

Now, refresh your website to see the social media icons and here you can see that they have been added in the side bar but not exactly the way we wanted them too.

 

 

Now what we can do here is to change the layout setting of the website. So to change the layout of your website, go to the layout setting and click on “Theme Designer” link and here under “adjust width”, we can adjust the “sider bar” width according to our need and then save the changes by clicking on the “floppy disc” icon.

 

And then refresh the website again and here you can see that the icons images have been adjusted accordingly and that’s how the icons will look like on your blogger website and now open your website into another browser to see whether the added images have been working properly or not! And they all are working properly.

And, this is how you can add social media icons in your blogger website and I hope this will be helpful for someone out there and thanks for watching.