How to Display Total Published Posts Counts in Blogger

Socialize It →

Tweet

14

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

About the Editorial Team

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