Create Social Media Follow Buttons In The Bloggers

Social media platforms have given people an enormous number of benefits. Being an easy and flexible medium for providing a number of benefits to people and also to businesses. Social media has allowed people to share their views, likes etc openly with other people. This platform has given people an opportunity to reach out to a large number of people at the same time. It has also given people an opportunity to get information from the things shared by other people. Social media follow buttons for blogger will help in allowing your readers to follow your social media pages and profiles with just a single click. All these widgets have some amazing social follow buttons for bloggers of facebook, twitter, google plus etc. Each widget contains the icon of the social media. These widgets are designed in such a way that they connect social pages and profiles with your blog. Some of these widgets can also show the total number of followers for a specific social media service. These HTML and CSS social follow buttons have a response rate of 100%. In addition, for a better user experience, these are modified for different screen resolution. In fact, many custom blogger templates also come with social follow buttons and social media widgets.

As these widgets are designed with HTML and CSS, which can also be used for other CMS including WordPress. In this article, there’s a process of adding social media follow buttons for the blogger in your blog. But, before getting started with all that let us know why social media icons and widgets are important for blogging.

Why there is a need to use social media follow buttons?

Building a strong community of readers is the elevator to the success for bloggers. For every blogger, it is necessary to improve user engagement of their blog also it is very important to build a strong community on social media because social activity is also important for search engines. Adding these social media follow buttons and icons in blogger will help in letting your reader follow your business directly from your website. I will also provide them with an update which you have shared on your profile. To build a strong social community on social media you need to post amazing content so that people know that you share valuable information and then they will follow you. You must utilize this opportunity by adding social media follow buttons on your blog.

When you have built a strong reader community you must always add a social media share button below every post of yours. Adding share button will ensure that the content which your readers like can be shared by them, which will help in building your community even larger. This share button will allow your readers to share their favourite content with their friends, family etc. in this way, when people share the content they like, will be a kind promotion of your blog for free.

How to add social media follow buttons in blogger?

Below is the process of adding social media widgets, which is pretty easy. Let us see how to add these widgets:

  • Firstly we will have to log in our blogger account. Then go to the template section and click on the HTML. Copy paste the below code & click the save button.
    <link rel="stylesheet" href="https://www.ineedaweb.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
  • Go to the Layout section.
  • find the add gadget button In the sidebar. You can add social media follow buttons anywhere, but I suggest you add in the sidebar.
  • Scroll & select “HTML/JavaScript” gadget. Click to add it.
  • Select your social media widget for the blogger from below 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-google{background:#dd4b39}
.to-social-follow .fa-linkedin{background:#007bb5}
.to-social-follow .fa-youtube{background:#b00}
.to-social-follow 
.fa-instagram{background:#125688}
.to-social-follow 
.fa-pinterest{background:#cb2027}
</style>
  • NOTE: You must change the “#” with your social & page URL.
  • Click on the save button. You will see the social media share button on your blog sidebar.
  • change all highlighted “#” with your own social media page or profile URL like (https://facebook.com/techornate)
    you will have to change all highlighted “numbers” with your own social followers, fans and YouTube subscriber numbers.
<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-subscribe: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,.3)}
.fa-facebook{background:#1c3e67}
.fa-facebook:before{content:"\f09a"}
.fa-twitter{background:#28a6c5}
.fa-twitter:before{content:"\f099"}
.fa-subscribe{background:#d2002c}
.fa-subscribe:before{content:"\f167"}
</style>
<div class="techornate-socials">
<a target="Ineedaweb" href="https://www.facebook.com/profile.php?id=100016887013925" class="fa-facebook"><span class="social-counter">146,200</span><span class="s-text">Follow us on <strong>Facebook</strong></span></a>
<a target="_blank" href="#" class="fa-twitter"><span class="social-counter">50,748</span><span class="s-text">Follow us on <strong>Twitter</strong></span></a>
<a target="Ineedaweb" href="https://twitter.com/joshiabhi4?lang=en" class="fa-subscribe"><span class="social-counter">33,175</span><span class="s-text">Subscribe us on <strong>YouTube</strong></span></a>
<div class="clear"></div>
</div>

Leave a Reply

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