How to add a social follow widget in blogger website

If you have built your website already on blogger.com but you wish to add your social media accounts or pages so that visitors of your website can easily get in touch with you on your social media e.g Facebook, Instagram, etc, this article is for you.

All you need to do is paste the code below into your website HTML area you will see changes immediately.

I am going to show you how to add a social follow widget to your website when landed on it. Stay with me.

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/techyleafgroup" 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/UC7Lunv3M_7GRHIagA7erLtg?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>

Social follow button (style 2)

<div style="display:flex; justify-content: space-around;"> <a class="social_button" href="https://t.me/techyleafgroup" 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/UC7Lunv3M_7GRHIagA7erLtg?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>

Conclusion

That is all for now.

Kindly comment in the section below in case you have questions or you need guidance or you want to add some points. 

Feel free to comment below.

Thanks