How Can I Get Counter Widget With Comments Count On My Blogger Blog?


I searched on my bloggertricks but that is not changing numbers accordingly. it has fixed no of followers or shares. as it is here


If you want that widget, then you have to tell us the URL of the blog from which you got or took the snapshot.


Not promoting just helping

Hey there I too created a social counter widget you can check it out here its not the same but it is almost.


this is where I found that . I need the same like that here is pinterst and comment too


yes your also very nice . I want to add comment count, pinterest too


wait for couple of mins I will customize the code and give you


thanks I am waiting for your customization.


Wait lemme type this thing 5 mins more please


paste this in your html/javascript widget from layout tab

<div id="nfs_social_count-2"  class="nfs-social-counter">
    <div class="sc-wrapper clearfix">
        <!-- Facebook -->
        <div class="fb-like-button sc-item">
            <div class="sc-item-inner">
                <a href="Your url" title="Facebook" target="_blank">
                    <span class="fa fa-facebook sc-icon"></span>
                    <span class="like-count">31758</span>
        <!-- RSS -->
        <div class="rss-button sc-item">
            <div class="sc-item-inner">
                <a href="Your url" title="comments" target="_blank">
                    <span class="fa fa-comments sc-icon"></span>
                    <span class="like-count">4445</span>
        <!-- Twitter -->
        <div class="twitter-like-button sc-item">
            <div class="sc-item-inner">
                <a href="Your url" title="twitter" target="_blank">
                    <span class="fa fa-twitter sc-icon"></span>
                    <span class="like-count">739</span>
        <!-- Linkedin -->
               <!-- Vimeo -->
        <div class="vimeo-linke-button sc-item ">
            <div class="sc-item-inner">
                <a href="Your url" title="pinterest" target="_blank">
                    <span class="fa fa-pinterest sc-icon"></span>
                    <span class="like-count">83</span>
        <!-- Google Plus -->
        <div class="gplus-like-button  sc-item">
            <div class="sc-item-inner">
                <a href="Your url" title="Google plus" target="_blank">
                    <span class="fa fa-google-plus sc-icon"></span>
                    <span class="like-count">76</span>
        <!-- Instagram -->
        <!-- Sound Cloud -->

        <div class="dribbble-like-button  sc-item ">
            <div class="sc-item-inner">
                <a href="Your url" title="youtube" target="_blank">
                    <span class="fa fa-youtube sc-icon"></span>
                    <span class="like-count">9000</span>

clear: both;
.nfs-social-counter .sc-wrapper{
margin: 0 -7px;
.nfs-social-counter .sc-wrapper .sc-item{
padding: 0 7px;
float: left;
margin-bottom: 22px;
width: 28.8%;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner{
text-align: center;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon{
display: block;
background: #4968a9;
margin: 0;
padding: 12px 0;
font-size: 24px;
color: #fff;
position: relative;
transition: all 0.2s ease-out 0s;
-webkit-transition: all 0.2s ease-out 0s;
-ms-transition: all 0.2s ease-out 0s;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a:hover .sc-icon{
opacity: 0.9;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon:after{
content: "";
border-top: 7px solid #4968a9;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
position: absolute;
left: 50%;
bottom: -7px;
margin-left: -7px;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .like-count{
color: #333;
padding: 6px;
display: block;
clear: both;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
border-left: 1px solid #ddd;
position: relative;
letter-spacing: 0px;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .like-count:after{
content: "";
position: absolute;
bottom: -3px;
border-width: 0 1px 1px;
border-style: solid;
border-color: #ddd;
left: 2px;
right: 1px;
height: 3px;
.sc-item-inner a{
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a:hover .like-count{
color: #eb6b56;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-rss{
background: #fd9f13;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-rss:after{
border-top-color: #fd9f13;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-twitter{
background: #24e0f1;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-twitter:after{
border-top-color: #24e0f1;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-linkedin{
background: #0097BD;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-linkedin:after{
border-top-color: #0097BD;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-youtube{
background: #ce322e;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-youtube:after{
border-top-color: #ce322e;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-pinterest {
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-vimeo{
background: #5BC8FF;
min-height: 48px;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-comments {
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-comments:after {
  border-top-color: #46CAB2;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-pinterest:after{
border-top-color: #D44E55;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-google-plus:after{ border-top-color: #ec3939; }

.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-google-plus{
background: #ec3939;
.sw-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-google-plus:after{
border-top-color: #ec3939;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-dribbble{
background: #eb4c89;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-dribbble:after{
border-top-color: #eb4c89;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-instagram{
background: #2f689b;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-instagram:after{
border-top-color: #2f689b;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-soundcloud{
background: url(../images/fa-sound.png) no-repeat center center #FE7C00;
min-height: 48px;
.nfs-social-counter .sc-wrapper .sc-item .sc-item-inner a .sc-icon.fa-soundcloud:after{
border-top-color: #FE7C00;


I can also give you that one but it will be illegal because that is a premium plugin for wordpress licensed to person name arqam. sorry can’t provide you in this forum :smiley: hope you understand


thanks man it’s workinh but it’s shown like this


fcourse yes I can understand :slight_smile: your problem


This is because you have not installed Font Awesome. Please search for <head> in your template and below it, paste following code:

<link href='' rel='stylesheet' type='text/css'/>


Add this below your template’s <head> (sorry we were typing at the same time)

this is the updated link add this one instead

<link href='' rel='stylesheet' type='text/css'/>


yahoooo it’s really working. this is my first problem resolved here. thanks man :smile: Shivansh you too thanks :smile:


always welcome brother! I and Shivansh and more members like @rohan @Mohammad @mybloggertricks @ngtechzone and many more are active on this forum to always help you! Feel free to share more problems and queries here on the forum :wink: :blush:


ahan check out this

this was my first problem not resolved yet. Even I have sent to the Muhammad Ahmed Also


Okay! in that sense @Shivansh can help you better :smiley: Btw who is Muhammad Ahmed?


let me wait for Shivansh than. I thin Muhammad Ahmed is admin :stuck_out_tongue:


His name is Mohammad Mustafa Ahmadzai. :grin: