How To Add Social Media Follow Icon Widget To Blogger

In today's digital age, social media has become an integral part of our lives, both personally and professionally. As a blogger, it is crucial to leverage the power of social media to connect with your audience and expand your online presence.

Social Media Follow Icons for Blogger

One effective way to do this is by adding a social media follow box widget to your Blogger site. This widget allows you to display your social media profiles in a prominent and easily accessible manner, encouraging visitors to follow you on various platforms.

In this blog post, we will guide you through the process of adding a social media follow box widget to your Blogger site, empowering you to enhance your social media engagement and grow your online community.

Explaining the social media follow box widget

The social media follow box widget is a customizable element that can be added to your Blogger site. It typically appears as a small box or sidebar section prominently displaying social media icons or buttons, along with corresponding links or handles. This widget allows your visitors to easily connect with you and follow your social media profiles directly from your blog.

The follow box widget can be tailored to include icons or buttons for various social media platforms such as Facebook, Twitter, Instagram, YouTube, LinkedIn, Pinterest, and more. Each icon or button is linked to your respective social media profile, enabling visitors to click on them and be redirected to your profiles or pages.

The widget can be placed in a strategic location on your blog, such as the sidebar, footer, or header, ensuring its visibility across all pages. Its design and appearance can be customized to match your blog's theme, colors, and style, creating a cohesive and visually appealing look.

By incorporating a social media follow box widget, you provide a convenient and accessible way for your readers to connect with you beyond your blog. It encourages them to engage with your content on different platforms, stay updated with your latest posts and news, and become part of your social media community.

Overall, the social media follow box widget is an effective tool to enhance your blog's reach, improve user engagement, and strengthen your brand presence across various social media channels.

Benefits of adding social media follow box widget to Blogger

The importance of a social media follow box widget lies in its ability to enhance the user experience and boost social media engagement. Here are some key reasons why adding a social media follow box widget to your Blogger site is of great benefits:

Increased Social Media Following: By adding a social media follow box widget to your Blogger site, you make it convenient for visitors to connect with you on different social media platforms. This can lead to a significant increase in your social media following, allowing you to reach a wider audience and engage with your readers beyond your blog.
Improved User Engagement: The follow box widget serves as a visual cue for visitors to engage with your social media profiles. By prominently displaying your social media handles, you encourage users to click through and explore your content on various platforms. This helps to foster a sense of community and keeps your audience engaged with your brand.
Enhanced Brand Visibility: Integrating social media icons and links through the follow box widget increases the visibility of your brand across different social media channels. This can lead to increased brand recognition and exposure, as well as drive traffic back to your blog from social media platforms.
Easy Access to Updates: By following your social media profiles through the widget, readers can stay up-to-date with your latest blog posts, news, promotions, and announcements. This ensures that your audience is informed and connected with your blog, even when they are not actively visiting your site.
Cross-Promotion Opportunities: The follow box widget provides an opportunity to cross-promote your social media channels and blog. By showcasing your social media handles on your blog, you can drive traffic from your blog to your social media profiles, and vice versa. This creates a cohesive online presence and strengthens your overall branding.

Incorporating a social media follow box widget into your Blogger site offers numerous benefits that can enhance your online presence, expand your reach, and deepen your connection with your audience. It is a simple yet powerful tool to leverage the power of social media and maximize the impact of your blogging efforts.

Important! 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-by-step guide: Adding social media follow box widget to Blogger

Step 1: Go and login to your Blogger Dashboard

Step 2: In Blogger Dashboard, Go to Themes section

Step 3: Now click on the drop down icon just beside the 'Customize' button

Step 4: Click on 'Edit HTML', now you'll be redirected to the editing page

Step 5: Search for </head> and paste the following Code Just above it and Click on the save theme.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

Step 6: Now to go layout section of the Menu Bar in the Blogger dashboard, and click on "Add a gadget" in the sidebar or wherever you want to display the social media follow box.

Step 7: In the window that opens, choose "HTML/JavaScript" and click Add.

Step 8: Now copy your desired social media follow icon code and paste the code in this HTML/JavaScript gadget.

Step 9: Lastly click of save option to save the arrangement.

List of Social Media Follow Icons HTML Codes

Below I have provided some responsive and attractive Social Media Follow Icons that is suitable for any Blogger Theme. Select any Social Media icon of your choice below, copy the HTML Code and paste it on the HTML JavaScript gadget Code box.

Style 1

COPY THE CODE FOR STYLE 1 BELOW 👇

<div class="icons">    <a class="fb" href="#"><i class="fab fa-facebook-f"></i></a>    <a class="twitter" href="#"><i class="fab fa-twitter"></i></a>    <a class="insta" href="#"><i class="fab fa-instagram"></i></a>    <a class="Telegram" href="#"><i class="fab fa-telegram"></i></a>    <a class="WhatsApp" href="#"><i class="fab fa-whatsapp"></i></a>  </div> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); *{   margin: 0;   padding: 0;   box-sizing: border-box;   font-family: 'Poppins', sans-serif; }  .icons a{   background: #fff;   position: relative;   height: 60px;   width: 60px;   margin: 0 10px;   display: inline-flex;   text-decoration: none;   border-radius: 50%;   transition: all 0.3s;   box-shadow: -3px -3px 7px #ffffff,               3px 3px 5px #ceced1; } .icons a:hover:before{   content: "";   position: absolute;   top: 0;   left: 0;   bottom: 0;   right: 0;   border-radius: 50%;   background: #ecf0f3;   box-shadow: inset -3px -3px 7px #ffffff,               inset 3px 3px 5px #ceced1; } .icons a i{   position: relative;   z-index: 3;   text-align: center;   width: 100%;   height: 100%;   font-size: 25px;   line-height: 60px; } .icons a:hover i{   transform: scale(0.9); } .icons a.fb i{   color: #4267B2; } .icons a.twitter i{   color: #1DA1F2; } .icons a.insta i{   color: #E1306C; } .icons a.git i{   color: #333; } .icons a.yt i{   color: #ff0000; }   </style>

Style 2

COPY THE CODE FOR STYLE 2 BELOW👇

<style>

.center {

text-align: center ;

}

.fab {

padding: 15px ;

font-size: 15px ;

width: 43px;

height: 43px;

text-align: center;

text-decoration: none;

margin: 15px 10px ;

}

.fab:hover {

opacity: 0.7 ;

}

.fa-facebook {

background: #3B5998;

color: white;

}

.fa-twitter {

background: #55ACEE;

color: white;

}

.fa-google {

background: #dd4b39;

color: white;

}

.fa-linkedin {

background: #007bb5;

color: white;

}

.fa-youtube {

background: #bb0000;

color: white;

}

.fa-instagram {

background: #125688;

color: white;

}

.fa-pinterest {

background: #cb2027;

color: white;

}

.fa-tiktok {

background: #bb0000;

color: white;

}

</style>

<div class='center'>

<a href= "#" ; class="fab fa-facebook"></a>

<a href="#" class="fab fa-twitter"></a>

<a href="#" class="fab fa-google"></a>

<a href="#" class="fab fa-linkedin"></a>

<a href="#" class="fab fa-youtube"></a>

<a href="#" class="fab fa-instagram"></a>

<a href="#" class="fab fa-pinterest"></a>

<a href="#" class="fab fa-tiktok"></a>

Style 3

COPY THE CODE FOR STYLE 3 BELOW👇

<style> 

   .techornate-social-buttons ul{padding-left:0;list-style:none}

   .techornate-social-buttons li a{text-transform:uppercase;text-decoration:none;padding:10px 1px 10px 10px;letter-spacing:2px;font-size:10px;color:#fff;display:block;border-radius:3px}

   .techornate-social-buttons ul li{margin-bottom:10px;width:100%}

   .techornate-social-buttons li a i{width:35px;height:14px;float:right;padding:0 0 0 10px;margin:0;font-size:14px;line-height:14px;border-left:1px solid #B1B1B1} 

   .techornate-social-buttons li a.social-btn-facebook{background:#3b5998}

   .techornate-social-buttons li a.social-btn-twitter{background:#1da1f2}

   .techornate-social-buttons li a.social-btn-youtube{background:#cd201f}

   .techornate-social-buttons li a.social-btn-instagram{background:#405de6}

</style>

<div class="techornate-social-buttons"><ul class="sidebar-social clearfix"> 

    <li><a href="#" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li> 

    <li><a href="#" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li>

    <li><a href="#" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li> 

    <li><a href="#" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li> 

</ul> </div>

Style 4

COPY THE CODE FOR STYLE 4 BELOW👇

<style>

 .s-text strong,.social-counter {font-weight: 900;}

 .techornate-socials a {display: block;color: #fff;padding: 12px 15px;position: relative;margin-bottom: 5px;text-decoration: none;}

 .techornate-socials a span,.techornate-socials a:before {z-index: 2;position: relative;}.social-counter {position: absolute;font-size: 14px;line-height: 1;padding-top: 4px;}.s-text {float: right;}

 .techornate-socials a:after {content: ” “;height: 100%;width: 0;top: 0;left: 0;position: absolute;background: #252b42;z-index: 1;}

 .fa-facebook:before,.fa-youtube:before,.fa-twitter:before {display: inline-block;width: 16px;font-family: fontawesome;margin-right: 10px;padding-right: 10px;font-size: 18px;border-right: 1px solid rgba(255, 255, 255, 0.3);}

 .fa-facebook {background: #1c3e67;} .fa-facebook:before {content: ”\f09a”;}

 .fa-twitter {background: #28a6c5;} .fa-twitter:before {content: ”\f099″;}

 .fa-youtube {background: #d2002c;} .fa-youtube:before {content: ”\f167″;}

 </style>

<div class="techornate-socials">

      <a target="_blank" href="#" class="fa-facebook"><span class="social-counter">#</span><span class="s-text">Follow us on <strong>Facebook</strong></span></a>

      <a target="_blank" href="#" class="fa-twitter"><span class="social-counter">#</span><span class="s-text">Follow us on <strong>Twitter</strong></span></a>

      <a target="_blank" href="#" class="fa-youtube"><span class="social-counter">#</span><span class="s-text">Subscribe us on <strong>youtube</strong></span></a>

 </div>

Style 5

COPY THE CODE FOR STYLE 5 BELOW👇

<style>

   .to-social-follow{width:300px;padding:10px;margin:0}.to-social-follow 

   .fa{font-size:18px;padding:16px;text-align:center;margin:5px 2px;width:20%;text-decoration:none;color:#fff}.to-social-follow 

   .fa:hover{opacity:.7}.to-social-follow .fa-facebook{background:#3B5998}.to-social-follow 

   .fa-twitter{background:#55ACEE}.to-social-follow .fa-instagram{background:#125688}.to-social-follow 

   .fa-linkedin{background:#007bb5}.to-social-follow .fa-youtube{background:#b00}.to-social-follow 

   .fa-pinterest{background:#cb2027} 

</style> 

<div class="to-social-follow"> 

    <a href="#" class="fa fa-facebook" target="_blank"></a> 

    <a href="#" class="fa fa-twitter" target="_blank"></a> 

    <a href="#" class="fa fa-instagram" target="_blank"></a> 

    <a href="#" class="fa fa-linkedin" target="_blank"></a> 

    <a href="#" class="fa fa-youtube" target="_blank"></a> 

    <a href="#" class="fa fa-pinterest" target="_blank"></a> 

</div>

Replace Every Highlighted "#" Social Media Profile or Social Media Page URL.

Final Thought

Don't miss out on the opportunity to boost your social media presence and connect with your audience on a deeper level. By implementing a social media follow box widget on your Blogger website, you can make it easier for visitors to follow you on various social media platforms.

This not only expands your reach but also allows you to engage with your audience outside of your blog. Imagine the possibilities of building a strong online community and increasing your followership.

With the step-by-step guide provided in this blog post, adding the social media follow box widget to your Blogger website is a breeze. Don't hesitate to take advantage of this powerful tool to enhance your blogging journey. Strengthen your online presence, amplify your content, and establish meaningful connections with your audience.

Embrace the potential of social media and watch your blog flourish as you engage, inspire, and grow your online following. It's time to take your blogging game to the next level with a robust social media presence!

Warning!

All Our Posts Are Protected by DMCA. Therefore Copying Or Republishing Of The Contents Of This Blog Without Our Permission Is Highly Prohibited!

If Discovered, Immediate Legal Action Will Be Taken Against Violator.

That's All

Thanks for reading our blog

Have a great day ahead!😍

Report Abuse

Ultimate Guide on How to Add Social Media Icon in Blogger

Win Up to N100,000 with Glo New Reward Lucky Number

How to Add Custom Permalink on Blogger for Better SEO

TechBrainaic