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


#1

I searched on my bloggertricks but that is not changing numbers accordingly. it has fixed no of followers or shares. as it is here http://www.mybloggertricks.com/2010/04/show-off-follower-counts-for-rss.html


#2

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


#3

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.


#4

this is where I found that .http://www.muhammadniaz.net/ I need the same like that here is pinterst and comment too


#5

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


#6

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


#7

thanks I am waiting for your customization.


#8

Wait lemme type this thing 5 mins more please


#9

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>
                </a>
            </div>
        </div>
        <!-- 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>
                </a>
            </div>
        </div>
        <!-- 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>
                </a>
            </div>
        </div>
        <!-- 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>
                </a>
            </div>
        </div>
        <!-- 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>
                </a>
            </div>
        </div>
        <!-- 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>
                </a>
            </div>
        </div>
    </div>
</div>

<style>
  .nfs-social-counter{
clear: both;
  text-decoration:none;
}
.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{
  text-decoration:none
}
.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 {
  background:#D44E55;
}
.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 {
  background:#46CAB2;
}
.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;
}
</style>

#10

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


#11

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


#12

fcourse yes I can understand :slight_smile: your problem


#13

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

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

#14

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='http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

#15

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


#16

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:


#17

ahan check out this

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


#18

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


#19

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


#20

His name is Mohammad Mustafa Ahmadzai. :grin: