How to Add Social Media Follow Buttons Blogger

Hi to all, here I am going to tell you all about how to add social media follow widget button on blogger using HTML and CSS easily in just few minutes.

By adding social media follow buttons you can make your visitors into followers, for example, if your visitors like your post then they may follow you in your social media platforms and also you can increase your engagement with your visitors.

And also you can convert your visitor into a regular visitors by adding this social media follow buttons, so in every blogger or any other website, you need to add this social media buttons.

This provided code is responsive and it will not effect your page speed or SEO, so you can use this code in any of the blogger template without any issue.

Read the below provided steps carefully to get clear understanding about how to add social media follow widget in blogger website without any error.

Steps to Add Social Media Follow Buttons in Blogger

Step-1: First of all you all need to login to your blogger website dashboard by using your login credentials.

Step-2: Go to blogger dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download theme.

Step-3: Go to blogger dashboard -> Click on layout section.

Step-4: In side bar widget section click on Add a Gadget.

Step-5: After click on Add a Gadget -> Click on HTML/JavaScript.

Step-6: Now a configure HTML/JavaScript Popup open here.

Step-7: Copy the below provided code and paste it in the content box.

Step-8: Now you need to replace your social media platform URL with the default URL's.

Step-9: Click on Save button.

Step-10: You have successfully added social media follow media follow button in your blogger website in just few minutes.

Social Follow Button Style-1

<div style="display:flex; justify-content: center;"> <a style=" border: 2px solid #ffffff; background: #4297e1; color: white; box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;" class="button outline" href="https://t.me/abc" target="_blank"> <svg style="fill:white;" viewbox="0 0 64 64"><path d="M56.4,8.2l-51.2,20c-1.7,0.6-1.6,3,0.1,3.5l9.7,2.9c2.1,0.6,3.8,2.2,4.4,4.3l3.8,12.1c0.5,1.6,2.5,2.1,3.7,0.9 l5.2-5.3c0.9-0.9,2.2-1,3.2-0.3l11.5,8.4c1.6,1.2,3.9,0.3,4.3-1.7l8.7-41.8C60.4,9.1,58.4,7.4,56.4,8.2z M50,17.4L29.4,35.6 c-1.1,1-1.9,2.4-2,3.9c-0.2,1.5-2.3,1.7-2.8,0.3l-0.9-3c-0.7-2.2,0.2-4.5,2.1-5.7l23.5-14.6C49.9,16.1,50.5,16.9,50,17.4z"></path></svg>   Join Telegram</a> <a style=" border: 2px solid white; background: #d4584b; color: white; box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;" class="button outline" href="https://www.youtube.com/channel/tialwizards?sub_confirmation=1" target="_blank"><svg style="fill:white;" viewbox="0 0 32 32"><path d="M29.73,9.9A5,5,0,0,0,25.1,5.36a115.19,115.19,0,0,0-18.2,0A5,5,0,0,0,2.27,9.9a69,69,0,0,0,0,12.2A5,5,0,0,0,6.9,26.64c3,.24,6.06.36,9.1.36s6.08-.12,9.1-.36a5,5,0,0,0,4.63-4.54A69,69,0,0,0,29.73,9.9Zm-2,12A3,3,0,0,1,25,24.65a113.8,113.8,0,0,1-17.9,0,3,3,0,0,1-2.78-2.72,65.26,65.26,0,0,1,0-11.86A3,3,0,0,1,7.05,7.35C10,7.12,13,7,16,7s6,.12,9,.35a3,3,0,0,1,2.78,2.72A65.26,65.26,0,0,1,27.73,21.93Z"></path><path d="M21.45,15.11l-8-4A1,1,0,0,0,12,12v8a1,1,0,0,0,.47.85A1,1,0,0,0,13,21a1,1,0,0,0,.45-.11l8-4a1,1,0,0,0,0-1.78ZM14,18.38V13.62L18.76,16Z"></path></svg>   Subscribe</a></div>
Copy

Social Follow Button Style-2

<div style="display:flex; justify-content: space-around;"> <a class="social_button" href="https://t.me/abc" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><g><path d="M24,28a1,1,0,0,1-.62-.22l-6.54-5.23a1.83,1.83,0,0,1-.13.16l-4,4a1,1,0,0,1-1.65-.36L8.2,18.72,2.55,15.89a1,1,0,0,1,.09-1.82l26-10a1,1,0,0,1,1,.17,1,1,0,0,1,.33,1l-5,22a1,1,0,0,1-.65.72A1,1,0,0,1,24,28Zm-8.43-9,7.81,6.25L27.61,6.61,5.47,15.12l4,2a1,1,0,0,1,.49.54l2.45,6.54,2.89-2.88-1.9-1.53A1,1,0,0,1,13,19a1,1,0,0,1,.35-.78l7-6a1,1,0,1,1,1.3,1.52Z"></path></g></svg>   Join Telegram</a> <a class="social_button" href="https://www.youtube.com/channel/yourChannelName?sub_confirmation=1" target="_blank"><svg class="c-1" viewbox="0 0 32 32"><path d="M29.73,9.9A5,5,0,0,0,25.1,5.36a115.19,115.19,0,0,0-18.2,0A5,5,0,0,0,2.27,9.9a69,69,0,0,0,0,12.2A5,5,0,0,0,6.9,26.64c3,.24,6.06.36,9.1.36s6.08-.12,9.1-.36a5,5,0,0,0,4.63-4.54A69,69,0,0,0,29.73,9.9Zm-2,12A3,3,0,0,1,25,24.65a113.8,113.8,0,0,1-17.9,0,3,3,0,0,1-2.78-2.72,65.26,65.26,0,0,1,0-11.86A3,3,0,0,1,7.05,7.35C10,7.12,13,7,16,7s6,.12,9,.35a3,3,0,0,1,2.78,2.72A65.26,65.26,0,0,1,27.73,21.93Z"></path><path d="M21.45,15.11l-8-4A1,1,0,0,0,12,12v8a1,1,0,0,0,.47.85A1,1,0,0,0,13,21a1,1,0,0,0,.45-.11l8-4a1,1,0,0,0,0-1.78ZM14,18.38V13.62L18.76,16Z"></path></svg>   Subscribe Now</a> </div> <style> .social_button svg { width: 22px; height: 22px; fill: #ffffff; } .social_button { display: inline-flex; align-items: center; margin: 15px 15px 15px 0; padding: 10px 20px; outline: 0; border: 0; border-radius: 2px; color: #fefefe; /*background-color: var(--link-bgColor);*/ background-color:#6c6cfe; font-size: 14px; font-family: var(--font-body); white-space: nowrap; overflow: hidden; max-width: 100%; } .darkMode .social_button { color: var(--dark-text); } </style>
Copy

Note:

If you get any error in the website then you need to restore your backup code again and follow the above provided steps carefully.

You need to adjust  the CSS code according to your blogger theme especially dark mode class and background color of buttons etc.

Here i have added telegram and YouTube buttons, you can also change the SVG icons with other social media icons like Facebook, Instagram, Twitter, Pinterest etc..

You can change styles and color of the social media follow buttons by modifying CSS code, and for changing colors you need to use color code and to get color codes you can use google color picker.

Conclusion

I hope that you have understood about how to add social media follow buttons in blogger website using HTML and CSS easily in just few minutes.