How to Display Total Published Posts Counts in Blogger

Advertisements
You might be interested in displaying the total number of posts you have published on your blog? You might want to let your readers know that how much worth reading articles or posts your blog has produced for them?  Recently, one of our followers tweet us asking about a way to display total number of post published on his site. However, Blogger do not allow you to display the Total Published Post Count by default, but happily we have developed a plugin that accurately displays the total published post count in blogger. Today in this article, we will show you how to display total published posts counts in Blogger.

Before proceeding further please check the demo of the widget here (you will find the widget at the top of the sidebar).

The very first thing you must do is to login into your Blogger account. Once you are successfully logged in from Blogger dashboard go to Your Blog ›› Layout ›› Add a Gadget ›› Add HTML/JavaScript ›› and paste the following piece of JavaScript coding in the HTML Text Box.

<script style="text/javascript">
// Total Published Posts Counts for Blogger
// =============================
// Author: Syed Faizan Ali
//Version:2.0
function numposts(json) {
document.write('<div id="totalposts">');
document.write('<div id="titlep">MyBloggerLab was launched on<br/> January 5, 2012.</div>');
document.write('<div id="descriptionp">Quality Blogger Tutorials and articles<br/> and counting!</div>');
var _0x13e7=["\x57\x65\x20\x68\x61\x76\x65\x20\x61\x20\x74\x6F\x74\x61\x6C\x20\x6F\x66\x3C\x62\x72\x2F\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x63\x6F\x75\x6E\x74\x70\x22\x3E\x20","\x24\x74","\x6F\x70\x65\x6E\x53\x65\x61\x72\x63\x68\x24\x74\x6F\x74\x61\x6C\x52\x65\x73\x75\x6C\x74\x73","\x66\x65\x65\x64","\x20\x50\x6F\x73\x74\x73\x20\x3C\x2F\x64\x69\x76\x3E\x20\x3C\x62\x72\x2F\x3E\x3C\x64\x69\x76\x20\x69\x64\x3D\x22\x70\x6F\x73\x74\x63\x6F\x70\x79\x22\x3E\x41\x20\x57\x69\x64\x67\x65\x74\x20\x62\x79\x3A\x20\x3C\x61\x20\x68\x72\x65\x66\x3D\x22\x68\x74\x74\x70\x3A\x2F\x2F\x77\x77\x77\x2E\x6D\x79\x62\x6C\x6F\x67\x67\x65\x72\x6C\x61\x62\x2E\x63\x6F\x6D\x22\x3E\x4D\x79\x42\x6C\x6F\x67\x67\x65\x72\x4C\x61\x62\x2E\x63\x6F\x6D\x3C\x2F\x61\x3E\x3C\x2F\x64\x69\x76\x3E\x3C\x2F\x64\x69\x76\x3E","\x77\x72\x69\x74\x65"];document[_0x13e7[5]](_0x13e7[0]+json[_0x13e7[3]][_0x13e7[2]][_0x13e7[1]]+_0x13e7[4]);
}
</script><script src="/feeds/posts/default?alt=json-in-script&callback=numposts"></script>

Once you have successfully added the above code, press “Save Button” at the bottom and this makes you two steps closer to the finish line so move to the next step ahead.
Now paste the following CSS coding above the ]]></b:skin> tag present in the template. You can change its style, color, fonts according to your desire needs. Once done, save your template.

div#totalposts {
  font-size: 14px;
  text-align: center;
  float: left;
  border: 1px solid #d2d2d2;
  padding: 20px;
  background: #FCFCFC;
}

div#titlep {
    float: left;
    width: 100%;
    border-bottom: 1px solid #d2d2d2;
    padding-bottom: 15px;
    margin-bottom: 14px;
}

div#countp {
    font-size: 40px;
    font-weight: bold;
    color: rgb(241, 126, 0);
    float: left;
    width: 100%;
    line-height: 40px;
    margin-top: 10px;
    margin-bottom: 10px;
}

div#descriptionp {
  float: left;
  width: 100%;
  border-bottom: 1px solid #d2d2d2;
  margin-bottom: 15px;
  padding-bottom: 15px;
}

div#postcopy {
    float: left;
    width: 100%;
    text-align: center;
    margin-top: 5px;
}

Congratulations: You have successfully added a plugin to your website that displays total published post counts in your blogger BlogSpot site. Go and check your blog and enjoy the accurate counting of the widget. The widget is automatic so you don’t have to worry about updating it again and again.

We hope this tutorial might turn out useful for you and you can use it in your next project. This widget could be useful to let your new readers know that how useful information or articles your site have covered. If you liked this widget, please do us a favor and share it with your friends at Facebook, Google or twitter.

Advertisements

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).

Comment With:
OR
Choose Wisely!

14 comments

April 21, 2014 at 12:46 PM

Great Post and awesome Plugin Faizan! I always expect something new from you and you prove my expectations right. Keep it up :-)

Editorial Team MOD
April 21, 2014 at 6:05 PM

Thanks!

April 22, 2014 at 12:30 AM

hello admin geat post and very well coded can i share your post in my blog with a link back to your site regards. http://withbloggerhelp.blogspot.com

April 22, 2014 at 5:27 AM

Great post :) I have a question about something else:
How did you make the subscription box for E-mails in your blog (that one on the side bar) how to get E-mail box exactly like it ?

Editorial Team MOD
April 22, 2014 at 8:24 AM

Here's a Tutorial

http://www.mybloggerlab.com/2012/11/how-to-add-tabbed-email-subscription.html

Editorial Team MOD
April 22, 2014 at 8:30 AM

Yes, Feel free to share it with proper credits :)

April 22, 2014 at 10:05 AM

Hi, great widget. Can you share template of demo site? Or sell it?

April 22, 2014 at 10:06 AM

Great widget!
Can you share template of demo site?

May 4, 2014 at 10:25 PM

OMG I love you! Thank you for this awesome widget!

December 15, 2014 at 10:13 AM

It should be possible to edit the text "We have a total of" to use in any language.

Editorial Team MOD
December 21, 2014 at 2:26 AM

That's only avaliable in Premium Version (PAID).

December 21, 2014 at 4:20 AM

Pagar para poder expresarme en mi idioma? Muy amable, gracias.

Editorial Team MOD
December 21, 2014 at 9:03 AM

No, the scripts are encrypted and you can only edit them when you buy the script:) Peace

January 8, 2015 at 9:15 AM

NOT WORKING HOW TO FIND <

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.