How to Add Social Media Buttons to Blogger

If you want to link all your social profiles to your blog sidebar e.g Facebook, Twitter, Instagram, Tumblr, Pinterest, youtube etc. Here’s a simple tutorial on how to do that.

Firstly, you’ll need all social icons which you want to add. You can make your own, or you can search and download it.

                                         

Once you have downloaded or made the icons that you want to use , upload them and wherever you upload your images, just copy each image url. (you can upload your images to your bloggers or flickers account to get image url).

For each icon which you want to add to your blogger / site, you have required the following HTML.

<a href="YOUR SOCIAL MEDIA ID"><img alt="YOUR TEXT" src="SOCIAL ICON IMAGE LINK" width="60px"></a>

Now you can replace the “Your social media id” part with whichever social profile (like-fb, twitter, Instagram etc.) you want to link. Then put the social icon image link that relates to your social profile. Replace “Your text” to "Follow us" or whatever you want you can write it. This will help readers to understand what is that icon's.

For example, you can see what i have written to link the Instagram icon below to my Instagram profile:

<a href="http://www.instagram.com/jawedvt"><img alt="Follow us!" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAnEYGw92UGjWyA_7YA_I_jc3KsoQXGkDA-WR0N_5miMKvt0SUMZwrxg_gD8OWuaSe4ADHPEiR186OAUrdmkMT-iXAYfZRLwkBmJIryBsNJSKs0bt5jAlp-X20AWP3fbF39e1d78xwWw/s1600/instagram.png" width="60" height="60" /></a>

You can repeat the same method as above for your each profile. put it all together, If you want all icons to appears in row, then should not leave spaces between it. 

How to add in your blog : First go to Layout, 

and click on add a gadget. When it will open then click on “HTML/Javascript”.




In the title, write whatever you like to appear as the title – For example “Follow us!” In the Content section, simply paste the all HTML you’ve made for your blogger / site.

Finally, You can check out how its looking. If you feel the size of icons is bigger or smaller for your sidebar, you can adjust the size by changing the width and height of the image in the HTML, (Example, you can see image size in HTML - width="60" height="60").

I hope the above information is useful to you. Please let me know if you have any questions.

Thank you...