Learn the latest website design tips and tricks! Explore our newest articles now.

Social Media Wedget Box For Blogger Style 1

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
Hello! Welcome to Tecky AaryaN. 

You are looking for Social Media Follow Box For Blogger then this post is just for you.

Social Media Follow Box

You can see the demo here⤵
You may want to read this post:

Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: Go to Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme. 

Step 3: Click the arrow down icon next to 'Customize' button. 

Step 4: Now click on Edit HTML 

Step 5: Now search the code ]]></b:skin> or /*]]>*/</style>Paste the following Codes just above to it.
/* Sidebar Social by Tecky AaryaN*/
.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}

Step 6: Now Click on Save Button

Step 7: Then go to the Layout or place which you want to add Social Media Follow Box

Step 8: Now edit the HTML code and change the svg icons, Title and text and add your own link in it.

<!--[ Telegram box ]--><a class="scW tg_or_tw" data-text="Join" href="#" target="_blank"><div class="scC"><span>Join our Telegram channel</span><span>@teckyaaryan</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 ]--><a class="scW yt" data-text="Subscribe" href="#" target="_blank"><div class="scC"><span>Subscribe our YouTube channel</span><span>@teckyaaryan</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 ]--><a class="scW ig" data-text="follow" href="#" target="_blank"><div class="scC"><span>Follow our Instragram account</span><span>@teckyaaryan</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 ]--><a class="scW fb" data-text="follow" href="#" target="_blank"><div class="scC"><span>Like our Facebook page</span><span>@teckyaaryan</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 ]--><a class="scW tg_or_tw" data-text="follow" href="#" target="_blank"><div class="scC"><span>Follow our Twitter account</span><span>@teckyaaryan</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>

Here we have added svg codes according to social media symbol you can change your svg code.

Step 9: Now save the code and publish the widgets.

Conclusion

I hope you have successfully added your social media follow Button. If you are facing any problem in any section or you have any question then ask us in the comment box. 

Copyright: 

About the Author

Student | Developer | Blogger

Post a Comment

Please don't share any sensitive or personal details here.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.