How to Add Social Media Follow Button for Blogger Sites?

Social Media Follow Button is very important for any Website. There are so many Social Media Plugins on the WordPress platform but there is no social media follow button for blogger sites. We have to set up all features manually. Social Media Icons help us to connect our Website Visitors with our Social Media Pages or Social profiles. You can put in popular Social Icons like Facebook, Twitter & Instagram.

In this post, I am going to share how to add Social Media Follow Button for the Blogger site. This post gives you some Social Follow Widget Code, which is designed in HTML and CSS and is 100% Responsive. Some Blogger Templates also come with Social Media Follow Button, they are very simple and Unattractive. That is why you can use this widget and add your blog website.

Social Media Follow Button for Blogger Sites

Follow the below Process to Add a Responsive and Attractive Social Media Follow Button to your Blogger Website. There are two main settings: 

Setting 1 – Theme Section

  1. Go to the Theme Section of the Menu Bar in Blogger Dashboard, and click on the Edit HTML option.
  2. Press Ctrl + F Button in HTML Code Section and the Top Side Search Bar will be visible then type “</head>” in a Search Bar and Press ENTER.
  3. Now Copy the CODE below and Paste it before </head>Code and click on the Save Theme.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

Our Theme Section Setting is now completed, now it comes to Layout Setting.

Setting 2 – Layout Section

  1. Now go to the Layout Section of the Menu Bar in the Blogger Dashboard, and click on “Add a Gadget” in the Sidebar. 
  2. Now Scroll down to the Popup Window Show that will be “HTML/javascript” Click on the Gadget.
  3. Now copy the following social media button code whichever you like and Paste the Code in this HTML/Javascript Gadget.

Last, Click on the “SAVE” option and click on the Save Arrangement also.

You’re Done with Your Work..!! 

Now you go to the Blog Dashboard and Reload the Window, you will see that Social Widget has Live on your Blog Website.

List of Social Media Follow Buttons HTML Codes

There are Responsive and Attractive Social Media Follow Buttons for Blogger Platforms. Select any Social Widget Design you like below, Copy the CODE, and Follow the Layout Section Setting.

Style 1

COPY THE STYLE 1 CODE >

<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>

Style 2

COPY THE STYLE 2 CODE >

<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 3

COPY THE STYLE 3 CODE >

<style> 
ul.techornate-social-share{padding:0;margin:0;overflow:hidden}
ul.techornate-social-share li{list-style:none;float:left;margin-right:4%;width:48%;margin-bottom:10px;background:#fafafa;overflow:hidden}
ul.techornate-social-share li a{text-decoration:none;display:inline-block;float:left;color:#fff;height:40px;width:40px;text-align:center;font-size:14px;line-height:40px;margin-right:16px;position:relative;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out}
ul.techornate-social-share li a:after{height:0;width:0;top:50%;left:100%;content:'';margin-top:-4px;position:absolute}
ul.techornate-social-share li a.facebook{background:#436feb}
ul.techornate-social-share li a.facebook:after{border:4px solid #436feb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}
ul.techornate-social-share li a.twitter{background:#43c9eb}ul.techornate-social-share li a.twitter:after{border:4px solid #43c9eb;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}
ul.techornate-social-share li a.instagram{background:#f14133}ul.techornate-social-share li a.instagram{border:4px solid #f14133;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}
ul.techornate-social-share li a.youtube{background:#b00}ul.techornate-social-share li a.youtube:after{border:4px solid #b00;border-top-color:transparent;border-bottom-color:transparent;border-right-color:transparent}
ul.techornate-social-share li a:hover{opacity:.7}ul.techornate-social-share li span{font-size:12px;margin:0;line-height:15px;color:#999;font-weight:700;display:block}
ul.techornate-social-share li span.scount-number{margin-top:5px;color:#333}ul.techornate-social-share li:nth-child(2n){margin-right:0}
</style>

<ul class="techornate-social-share">
<li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a><span class="scount-number">#</span> <span>Fans</span></li>
<li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a><span class="scount-number">#</span> <span>Followers</span></li>
<li><a href="#" class="instagram"><i class="fa fa-instagram"></i></a><span class="scount-number">#</span> <span>Followers</span></li>
<li><a href="#" class="youtube"><i class="fa fa-youtube"></i></a><span class="scount-number">#</span> <span>Subscribers</span></li>

</ul>

 

Style 4

COPY THE STYLE 4 CODE >

<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>

 

  • Replaced Every Highlighted “#” with Your Own Social Profile or Social Page URL.
  • You can also delete that code if you do not need Social Media Icons

 

I hope you like the post on how to add Social Media Follow Button to Blogger Website and you will start using them on your Website from today itself. If you have any queries or advice regarding this post, feel free to write in the comment box, we respect your every comment and are committed to answering your asked questions. If you think this knowledge should be shared with someone else, share it in all your groups, thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *

error: Content is protected !!