April 8, 2010

Show Off Follower Counts For RSS, Twitter and Facebook Followers


Follower Counter for facebook, twitter and  feedburnerYou have seen many mind blowing widgets on wordpress blogs but its now time to make Blogger a better place! Presenting to you just another beautiful and yet useful widget that displays the current number of your blog subscribers, twitter and facebook followers. This widget is based solely on pure CSS and HTML with no JavaScript involved therefore you just need to update the counts manually. At present I am learning programming too so as soon as I develop some good command in programming, I will automate all MBT widgets but at present bear with me as a designer only :p

 

Take a look on how the widget will look like on a blog with narrow sidebar (The screenshot above is taken on a blog with wide sidebar)

Follower Counter

 

Follow the Steps Below To Add The Follower Counter To Your Blogger Blogs

  1. Go To Blogger > Layout
  2. Choose Add a Gadget or Add a Page element
  3. Select HTML/JavaScript widget
  4. Paste the code below inside it,

<style>
.rss-mbt {
    background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/S7wwAxlnAsI/AAAAAAAAC_g/9s74YaAwpls/s800/RSS1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}

.twitter-mbt {
    background: url(http://3.bp.blogspot.com/_7wsQzULWIwo/S7wv1yUhrdI/AAAAAAAAC_Y/_yw-vTwlc7g/s800/TWITTER1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}

.facebook-mbt {
    background: url(http://1.bp.blogspot.com/_7wsQzULWIwo/S7wwExG3-MI/AAAAAAAAC_o/37FdJ2lDUUY/s800/FACEBOOK1.png) no-repeat;
    height: 64px;
    padding: 0px 20px 0px 80px;
    margin-top: 20px;
}

.follower-rss, .follower-twitter, .follower-facebook {
    font-family: Georgia,  sans-serif, Times;
    font-size: 1.1em;
        font-style:italic;
        color:#289728;
}

.follower-rss span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#FFB93C;    
}

.follower-twitter span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#6DB6E6;    
}

.follower-facebook span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#3889BA;    
}

</style>

<div class="rss-mbt">
<div class="follower-rss"> <span>515</span> loyal readers
</div>
<a href="ADD-RSS-FEED-URL-HERE" rel="nofollow">RSS feed</a>
| <a href="ADD-RSS-EMAIL-FEED-URL-HERE" target="_blank" rel="nofollow">E-mail</a>
</div>

<div class="twitter-mbt"><div class="follower-twitter"><span>1058</span> followers</div>                           
<a href="ADD-YOUR-TWITTER-URL-HERE" target="_blank" rel="nofollow" title="I definitely follow you back">Follow us on Twitter!</a>
</div>                       

<div class="facebook-mbt">                       
<div class="follower-facebook"><span>260</span> followers                            </div>                           
<a href="ADD-YOUR-FACEBOOK-URL-HERE" target="_blank" rel="nofollow">Join us on Facebook!</a>
</div>

 

NOTE:- Make sure to replace the bolded text with the required details (links of your Feedburner, twitter and facebook accounts) and replace the bolded numbers with your current follower counts. For example replace 515  with your current number of Subscribers, replace  1058 with the number of your twitter followers and replace 260 with the number of your facebook followers

     5.    Save and you are done! Now view your blog to see a stunning widget hanging on your sidebar :D

Customization:

I hope it was not difficult to add :). You can replace the images used in this widget with the image links of your choice. Below are some MBT Social Media Icons that you can use,

Kindly let me know how useful do you find this new stylized widget. I would be more than happy to help you with any query you may have. Take good care of your selves and of your dearest ones. Enjoy! :>

 





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

29 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Oh Great I am gonna try it in my new blog

    ReplyDelete
  2. was as easy as you explained dear mohammd. thank you again and everytime.
    sorry for bad english

    ReplyDelete
  3. @Poras @javoff

    You are always welcomed bros. Glad you found the integration guide easy.

    ReplyDelete
  4. Nice programming done, can i try it in my wordpres blog?

    ReplyDelete
  5. @Khalid

    Yes you can if you have an upgraded version of wordpress server because free wordpress doesn't support style sheet editing.

    ReplyDelete
  6. Thumbs up mohammad! wnet like 11 22 33 :DD

    ReplyDelete
  7. thank you so very very the much ;p

    ReplyDelete
  8. james

    hello

    at my blogger blog my blog's favicon shows only on home page not on other pages please tell me why its happening

    ReplyDelete
  9. this amazing..!! i will try this..

    http://www.phycrewz.com

    ReplyDelete
  10. @Jacob @linglung

    I am Glad you liked it! :D

    @james livingstone

    I guess you are on a wring page :> Kindly ask off-topic questions here ->Blogger Help

    But since you have asked a question then Its my responsibilty to asnwer. Follow these steps,
    1. Go To Blogger > Layout > Edit HTML
    2. Search For
    3. And just above it paste the code below,
    <link href='IMAGE-LINK' rel='icon' type='image/gif'/>
    4. Replace IMAGE-LINK with the image URL of your favcion. Save your favicon in gif format.
    5. Save your template and Enjoy!

    The icon will appear everywhere now! :>>

    @phycrewz

    Sure go on!

    ReplyDelete
  11. worked like charm mohammad! Thk you so much Muua'h ;p

    ReplyDelete
  12. hi there bro your blog is plenty full of blogger tricks
    but in this entry especially i can ask something??

    why in in the code is the line rel no follow?
    we can remove the "rel no follow line in the code???
    how afect my page rank if i leave intac this lines??
    sorry for a lot of questions but im naab in blogger already :D

    ReplyDelete
  13. @gerardo

    Dear social media icons are always tagged as nofollow for the reputation of your blog in the eyes of search engines. When you link to major sites relevantly then it is a good practise but if you link to social media sites using dofollow tag then your content will loose its PR strength because all individual posts will link to these sites irrelevantly. Hope that was clear! :>

    ReplyDelete
  14. How do you find out the numbers of RSS followers you have?

    ReplyDelete
  15. Awesome. Thanks!!!!
    www.allnaturale.org

    ReplyDelete
  16. i want to know about "how to add Facebook followers in my blog as a gadget pls reply immediately

    ReplyDelete
  17. I just added the widget in my blogspot account and I was surprised with the number of my subscribers. Thanks for the tutorial.

    ReplyDelete
  18. Very Nice trick...Thanks a lot..my blog http://www.taanu51.blogspot.com/

    ReplyDelete
  19. thanks for the dis trick , i like it , but sir it is static , when new follower follow us , the number will not be changed automatically , we have to manually change it , every time , sir in this blog you have included in the end some dynamic counter icons , of fb and twitter , i like them , ie (fb 555+) and twitter (1088+) if you make a tutorial on them i will be really thankful to you!!

    ReplyDelete
  20. eeeeeeccccccccccccccccccccckkkaallleeennntt

    ReplyDelete
  21. Get more Twitter follower counter at my blog. Thanks Mohammad for your this lovely widget.
    My Blog: Visit Shine Mat

    ReplyDelete
  22. AOA,
    I am really an amateur just trying to create and update my blog. I used the above mentioned and it worked. Just one little problem. Is there a way the RSS feed tab can be removed coz I havent used it on my blog. and I dont even know how to get it. Sorry if I sound stupid:(

    ReplyDelete
  23. my widget is not showing how many followers do my blog have...so i removed the widget..is this widget works fine when any 1 clicks and follows?do anyone observed this widget reply...

    ReplyDelete
  24. I Would like to add google plus, can you please tell me how to add.... waitong for your reply

    ReplyDelete
  25. Can u tell me how to get this same think in horizontal. i want to add my fb and twitter count in my header besides my site name. horizontal. waiting for ur reply...

    ReplyDelete
  26. Amiable articles and the blogs really helped me a lot, thanks for the valuable information.
    cheap facebook likes for sale

    ReplyDelete