Hello Guys! How are you? I hope you are all good. Welcome Freemium Tech Website. Today I will share how to add Social Media Follow or share Widget in your blogger website. So, If you are searching a beautiful social media widget for your site then this post help you must.
Social media button widget in Blogger
Whenever you open a site, you will definitely get a social media button widget on top, bottom, right or left, by clicking on which you can go to the social account of the owner of that site.
And anyway, it is necessary to add Social media account to your site because without this you cannot even get AdSense approval and if you will put professional social media button widget on your site, then your site will look even more professional. I will share two beautiful style.
Before Add This Widget let's see a Preview
How to Add Social Media Widgets Buttons in Blogger?
You can add this widget Just through some simple steps given below.
Step 1: First of all you go to the layout of your blogger.
Step 2: Now here you click on add a gadget in the sidebar or in the bottom wherever you want to install Social Media Buttons Widgets in the site.
Step 3: Now select HTML/JavaScript.
Step 4: Now paste the code in the content that you have liked Social Media Buttons Widgets, whose code I have given below.
Style 1
<!--[ Telegram box by Freemium Tech ]--><a class="scW tg_or_tw" data-text="Join" href="https://telegram.me/FreemiumTech" target="_blank"><div class="scC"><span>Join our Telegram channel</span><span>@FreemiumTech</span></div><div class="scI"><svg viewbox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><g><path d="M28.59,4.29a2.23,2.23,0,0,0-2.27-.36L3.41,13.1a1.83,1.83,0,0,0,0,3.38l1.48.61a1,1,0,0,0,1.31-.53,1,1,0,0,0-.54-1.31L4.56,14.8l22.51-9a.22.22,0,0,1,.23,0,.24.24,0,0,1,.08.23L23.27,25.21a.4.4,0,0,1-.26.3.39.39,0,0,1-.39-.06l-8-6.24,7.83-7.91a1,1,0,0,0-1.22-1.56L9.75,16.54a1,1,0,1,0,1,1.72l4.83-2.85L13.23,17.8a2,2,0,0,0,.2,3.08l8,6.15a2.4,2.4,0,0,0,1.47.5,2.47,2.47,0,0,0,.83-.15,2.37,2.37,0,0,0,1.52-1.75L29.33,6.47A2.23,2.23,0,0,0,28.59,4.29Z"></path></g></svg></div></a><br>
<!--[ youtube box by Freemium Tech ]--><a class="scW yt" data-text="Subscribe" href="#" target="_blank"><div class="scC"><span>Subscribe our YouTube channel</span><span>@FreemiumTech</span></div><div class="scI"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><g><path d="M30,12a5.71,5.71,0,0,0-5.31-5.7C18.92,6,13.06,6,7.33,6.28,4.51,6.28,2,9,2,12a43.69,43.69,0,0,0,0,8.72,5.32,5.32,0,0,0,5.28,5.33h0q4.35.24,8.72.24t8.67-.23A5.34,5.34,0,0,0,30,20.8,31.67,31.67,0,0,0,30,12Zm-2,8.63a.49.49,0,0,0,0,.12,3.36,3.36,0,0,1-3.39,3.34,166,166,0,0,1-17.28,0A3.36,3.36,0,0,1,4,20.65a42,42,0,0,1,0-8.47.45.45,0,0,0,0-.11A3.78,3.78,0,0,1,7.38,8.28c2.86-.13,5.74-.19,8.62-.19s5.76.06,8.62.19h.05c1.71,0,3.33,1.84,3.33,3.79a.76.76,0,0,0,0,.15A30.11,30.11,0,0,1,28,20.61Z"></path><path d="M20.79,15.51l-7.14-3.68a1,1,0,1,0-.92,1.78l5.43,2.79-4,2.07V16.4a1,1,0,0,0-2,0v3.72a1,1,0,0,0,1,1,1,1,0,0,0,.46-.11l7.14-3.72a1,1,0,0,0,.54-.89A1,1,0,0,0,20.79,15.51Z"></path></g></svg></div></a><br>
<!--[ Instragrm box by Freemium Tech ]--><a class="scW ig" data-text="follow" href="https://Instagram.com/asmaulhoqueneil" target="_blank"><div class="scC"><span>Follow our Instragram account</span><span>@FreemiumTech</span></div><div class="scI"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M20.45,13.32a1,1,0,0,0-.57,1.3,4,4,0,1,1-2.31-2.3,1,1,0,1,0,.71-1.87,6,6,0,0,0-6.37,9.85,6,6,0,0,0,8.48,0,6,6,0,0,0,1.36-6.41A1,1,0,0,0,20.45,13.32Z"></path><circle cx="23" cy="9" r="1"></circle><path d="M28,9a5,5,0,0,0-4.9-5h0A77.11,77.11,0,0,0,9,4,5,5,0,0,0,4,8.92,91.91,91.91,0,0,0,4,23a5,5,0,0,0,4.9,5h0c2.36.22,4.73.34,7.1.34s4.71-.11,7.05-.34A5,5,0,0,0,28,23.08,87.09,87.09,0,0,0,28,9ZM26,23a3,3,0,0,1-3,3h-.1A71.73,71.73,0,0,1,9,26a3,3,0,0,1-3-3.08A92.4,92.4,0,0,1,6,9,3,3,0,0,1,9.09,6q3.44-.31,6.9-.32T23,6a3,3,0,0,1,3,3.08A85.13,85.13,0,0,1,26,23Z"></path></svg></div></a><br>
<!--[ facebook box by Freemium Tech ]--><a class="scW fb" data-text="follow" href="#" target="_blank"><div class="scC"><span>Like our Facebook page</span><span>@FreemiumTech</span></div><div class="scI"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M24,3H8A5,5,0,0,0,3,8V24a5,5,0,0,0,5,5h8a1,1,0,0,0,1-1V20a1,1,0,0,0-1-1H15V17h1a1,1,0,0,0,1-1V12.5A2.5,2.5,0,0,1,19.5,10H22v2H21a2,2,0,0,0-2,2v2a1,1,0,0,0,1,1h1.72l-.5,2H20a1,1,0,0,0-1,1v4a1,1,0,0,0,2,0V21h1a1,1,0,0,0,1-.76l1-4a1,1,0,0,0-.18-.86A1,1,0,0,0,23,15H21V14h2a1,1,0,0,0,1-1V9a1,1,0,0,0-1-1H19.5A4.51,4.51,0,0,0,15,12.5V15H14a1,1,0,0,0-1,1v4a1,1,0,0,0,1,1h1v6H8a3,3,0,0,1-3-3V8A3,3,0,0,1,8,5H24a3,3,0,0,1,3,3V24a3,3,0,0,1-3,3H20a1,1,0,0,0,0,2h4a5,5,0,0,0,5-5V8A5,5,0,0,0,24,3Z"></path></svg></div></a><br>
<!--[ Twitter box by Freemium Tech ]--><a class="scW tg_or_tw" data-text="follow" href="https://Twitter.com/asmaulhoqueneil" target="_blank"><div class="scC"><span>Follow our Twitter account</span><span>@FreemiumTech</span></div><div class="scI"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M28.77,8.11a.87.87,0,0,0-.23-.2A4.69,4.69,0,0,0,29,6.54a1,1,0,0,0-.44-1,1,1,0,0,0-1.1,0,6.42,6.42,0,0,1-2.28.92,6.21,6.21,0,0,0-7.08-1A6.07,6.07,0,0,0,15,12.2a1,1,0,0,0,2-.4A4.08,4.08,0,0,1,19,7.28a4.24,4.24,0,0,1,5.12,1,1,1,0,0,0,.88.28l.25,0a1,1,0,0,0,.34,1.62,1,1,0,0,0-.36.88,13.07,13.07,0,0,1-4.89,11.24A12.75,12.75,0,0,1,7.69,24.61a9.06,9.06,0,0,0,4.54-2.18,1,1,0,0,0,.15-1.09,1,1,0,0,0-.93-.57,4,4,0,0,1-3-1.39,3.63,3.63,0,0,0,1-.35A1,1,0,0,0,10,18a1,1,0,0,0-.76-.84,4.42,4.42,0,0,1-3-2.48c.24,0,.48.05.74.06a1,1,0,0,0,1-.62A1,1,0,0,0,7.67,13C6,11.48,5.59,9.85,5.83,8.7a13.88,13.88,0,0,0,7,4,1,1,0,1,0,.38-2A12.1,12.1,0,0,1,6.39,6.31a1,1,0,0,0-.75-.38,1,1,0,0,0-.78.33,5.34,5.34,0,0,0-.31,6l-.09,0a1,1,0,0,0-.52.81,5.84,5.84,0,0,0,1.95,4.47,1,1,0,0,0-.18,1,6.63,6.63,0,0,0,3.18,3.57A13.89,13.89,0,0,1,4,23a1,1,0,0,0-.5,1.86A16.84,16.84,0,0,0,12,27.35a15.16,15.16,0,0,0,9.6-3.57,15.12,15.12,0,0,0,5.69-12.42,4.62,4.62,0,0,0,1.62-2.25A1,1,0,0,0,28.77,8.11Z"></path></svg></div></a>
<style>
/* Sidebar Social */
.scW{position:relative;display:flex;align-items:center;justify-content:center;width:100%;background-color:white;padding:10px;box-shadow:0 0 25px rgba(0,0,0,.07);border-radius:8px;color:inherit;overflow:hidden} .widget-content .scW:not(:first-child){margin-top:25px} .scW::after{content:attr(data-text);position:absolute;right:0;bottom:0;background:var(--linkC);color:#fff;font-size:11px;font-weight:600;padding:4px 10px 4px 20px;border-radius:30px 0 0 0} .scC{width:calc(100% - 50px);margin-left:8px} .scW.ig::after{background:#e1306c} .scW.yt::after{background:#ff0000} .scW.tg_or_tw::after{background:#229ed9}
.scW.fb::after{background:#3b5998}.scC >*{display:block;font-size:13px;padding:1px 0} .scC >*:first-child{font-weight:600} .scI{width:50px;height:50px;background:var(--transB);border-radius:10px;display:flex;align-items:center;justify-content:center} .scI >svg{width:28px;height:28px} .scW.ig svg.svgC, .scW.ig svg .svgC{fill:#e1306c} .scW.ig svg.line.svgC, .scW.ig svg.line .svgC{stroke:#e1306c} .scW.yt svg.svgC, .scW.yt svg .svgC{fill:#ff0000} .scW.yt svg.line.svgC, .scW.yt svg.line .svgC{stroke:#ff0000} .scW.tg svg.svgC, .scW.tg svg .svgC{fill:#229ed9} .scW.tg svg.line.svgC, .scW.tg svg.line .svgC{stroke:#229ed9}
.drK .scW{background-color:#242424;color:white} .drK .scI{background-color:#303030}
</style>
Style 2
<div class="Social_follow_icons">
<!--Facebook-->
<a href="#">
<div class="Social-icons">
<svg viewbox="0 0 64 64"><path d="M20.1,36h3.4c0.3,0,0.6,0.3,0.6,0.6V58c0,1.1,0.9,2,2,2h7.8c1.1,0,2-0.9,2-2V36.6c0-0.3,0.3-0.6,0.6-0.6h5.6 c1,0,1.9-0.7,2-1.7l1.3-7.8c0.2-1.2-0.8-2.4-2-2.4h-6.6c-0.5,0-0.9-0.4-0.9-0.9v-5c0-1.3,0.7-2,2-2h5.9c1.1,0,2-0.9,2-2V6.2 c0-1.1-0.9-2-2-2h-7.1c-13,0-12.7,10.5-12.7,12v7.3c0,0.3-0.3,0.6-0.6,0.6h-3.4c-1.1,0-2,0.9-2,2v7.8C18.1,35.1,19,36,20.1,36z"></path></svg>
</div>
<div class="name">Facebook</div>
</a>
<!--twitter-->
<a href="#">
<div class="Social-icons">
<svg viewbox="0 0 64 64"><path d="M11.4,26.6C11.5,26.6,11.5,26.6,11.4,26.6c-0.9,0-1.8-0.2-2.6-0.4c-1.3-0.4-2.5,0.8-2.1,2 c1.1,4.3,4.5,7.7,8.8,8.6c-1,0.3-2,0.4-3,0.4c-1,0-1.7,1.1-1.2,2c1.9,3.5,5.6,5.9,9.7,6h1c1.1,0,2,0.9,2,2c0,1.1-0.9,2-2,2 c-1.3,0-2.9-0.1-4.5-0.5c-1-0.2-2-0.2-2.9,0.1c-1.7,0.6-3.5,1.1-5.4,1.3C8.5,50.2,8,50.7,8,51.4v0c0,0.5,0.3,1,0.8,1.2 c3.9,1.7,8.3,2.7,12.9,2.7c21.1,0,32.7-17.9,32.7-33.5v0c0-0.9,0.4-1.8,1.1-2.4c1.2-1,2.3-2.1,3.3-3.4c0.4-0.5-0.1-1.2-0.7-1 c-1.2,0.4-2.4,0.7-3.7,0.9c-0.2,0-0.3-0.2-0.1-0.4c1.5-1.1,2.8-2.6,3.6-4.3c0.3-0.6-0.3-1.2-0.9-0.9c-1.1,0.6-2.3,1-3.5,1.4 c-1.2,0.4-2.6,0.1-3.6-0.7c-1.9-1.5-4.4-2.4-7-2.4c-5.3,0-9.8,3.7-11.1,8.8c-0.2,0.9,0.5,1.7,1.4,1.7c1.6-0.1,3.2-0.3,4.4-0.5 c1-0.2,2,0.3,2.4,1.2c0.5,1.2-0.2,2.4-1.3,2.7c-4.6,1.3-9.7,0.4-9.7,0.4l0,0C21.2,21.8,14.3,18,9.3,12.5C8.6,11.7,7.3,12,7,12.9 c-0.4,1.2-0.6,2.5-0.6,3.9C6.4,20.9,8.4,24.5,11.4,26.6z"></path></svg>
</div>
<div class="name">Twitter</div>
</a>
<!--Telegram-->
<a href="#">
<div class="Social-icons">
<svg 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>
</div>
<div class="name">Telegram</div>
</a>
<!--Youtube-->
<a href="#">
<div class="Social-icons">
<svg viewbox="0 0 24 24"><path fill="currentColor" d="M10,15L15.19,12L10,9V15M21.56,7.17C21.69,7.64 21.78,8.27 21.84,9.07C21.91,9.87 21.94,10.56 21.94,11.16L22,12C22,14.19 21.84,15.8 21.56,16.83C21.31,17.73 20.73,18.31 19.83,18.56C19.36,18.69 18.5,18.78 17.18,18.84C15.88,18.91 14.69,18.94 13.59,18.94L12,19C7.81,19 5.2,18.84 4.17,18.56C3.27,18.31 2.69,17.73 2.44,16.83C2.31,16.36 2.22,15.73 2.16,14.93C2.09,14.13 2.06,13.44 2.06,12.84L2,12C2,9.81 2.16,8.2 2.44,7.17C2.69,6.27 3.27,5.69 4.17,5.44C4.64,5.31 5.5,5.22 6.82,5.16C8.12,5.09 9.31,5.06 10.41,5.06L12,5C16.19,5 18.8,5.16 19.83,5.44C20.73,5.69 21.31,6.27 21.56,7.17Z" /></path></svg>
</div>
<div class="name">YouTube</div>
</a>
</div>
<style>
.Social_follow_icons svg {
width: 22px;
height: 22px;
fill: black;
}
.Social_follow_icons {
display: flex;
gap: 15px;
font-family: "Roboto", sans-serif;
margin: 32px 0;
justify-content: center;
}
.Social-icons {
margin: 8px;
}
.Social_follow_icons a {
display: flex;
gap: 8px;
font-size: 50px;
text-decoration: none;
align-items: center;
width: 40px;
height: 40px;
line-height: 0;
overflow: hidden;
box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.2);
transition: all 400ms ease;
border: 1px solid;
}
.Social_follow_icons a:hover {
width: 138px;
}
.Social_follow_icons a .name {
font-size: 16px;
font-weight: bold;
}
.Social_follow_icons a:nth-of-type(1) {
color: #4267b2;
}
.Social_follow_icons a:nth-of-type(2) {
color: #1da1f2;
}
.Social_follow_icons a:nth-of-type(3) {
color: #e1306c;
}
.Social_follow_icons a:nth-of-type(4) {
color: #ff0000;
}
</style>
Before pasting the code, don't forget to copy that code and put your social link in it as you have been instructed below that code.
Step 5: After that click on save.
That's done.. 👍 you successfully add Social Media Follow Widget.
CONCLUSION
In this article, I shared with you How to Add Social Media Follow Widget in Blogger? I hope you have liked It. Please do share it with your friends and follow our blog for more.
Join our Telegram Channel to get the lastest posts updates daily.
Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.
©Copyright: FreemiumTech™