Home
Blogger Code

How To Add Social Media Follow Box Widget To Blogger Website

Step 01: First of all Login to your Blogger Dashboard.

Step 02: On Blogger Dashboard, click Theme.

Step 03: Click the  next to 'customize' button.

Step 04: Click Edit HTML you will be redirected to editing page.

Step 05: Now search the code </head> and paste the following CSS codes just above to it.

.CSS 
<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>
Step 6: Save the html changes by clicking on this icon. 

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.

.HTML 
<!--[ youtube box ]--><a class="scW yt" data-text="Subscribe" href="https://youtube.com/@ITShimul360" target="_blank"><div class="scC"><span>Subscribe our YouTube channel</span><span>@ITShimul360</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 />

<!--[ facebook box ]--><a class="scW fb" data-text="follow" href="https://www.facebook.com/ITShimul360" target="_blank"><div class="scC"><span>Like our Facebook page</span><span>@ITShimul360</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 />

<!--[ facebook box ]--><a class="scW fb" data-text="follow" href="https://www.facebook.com/groups/itshimul360helpcenter" target="_blank"><div class="scC"><span>Join our Facebook Group</span><span>@ITShimul360HelpCenter</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 />

<!--[ Telegram box ]--><a class="scW tg_or_tw" data-text="Join" href="https://t.me/ITShimul3600" target="_blank"><div class="scC"><span>Join our Telegram channel</span><span>@ITShimul360</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 />

<!--[ Telegram box ]--><a class="scW tg_or_tw" data-text="Join" href="https://t.me/ITShimul360HelpCenter0" target="_blank"><div class="scC"><span>Join our Telegram Group</span><span>@ITShimul360HelpCenter</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 />

<!--[ Instragrm box ]--><a class="scW ig" data-text="follow" href="#" target="_blank"><div class="scC"><span>Follow our Instragram account</span><span>@ITShimul360</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 />

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

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

Now the Social Media Follow Box is successfully added to your blogger website. This is fully responsive and works perfectly in all types of devices. You can also adjust this further according to your website.