How to Add a Social Follow widget in Blogger website

 In this article, you will learn how to add a social follow widget to your Blogger website. I have designed these Social follow buttons using HTML and CSS code only. 

How to Add a Social Follow widget in Blogger website

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

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>
&nbsp; 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>
&nbsp; 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>
&nbsp; 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>
&nbsp; 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>

Here, note that you need to adjust the CSS code according to your theme especially the darkmode class, background color of buttons etc.

If you have any doubts, you can ask me on Telegram or twitter.

You can Get SVG icons of different social media platforms from here.