Create a post counter widget for Blogger

You think you have enough post to show off? Well, Blogger developers have provided the solution to display the total number of post published on a blog in Blogger. It is quite easy so lets get start with it.

• Go to Template > Edit HTML
• Find </head>
• Paste the following code above it.

<script type='text/javascript'>
//<![CDATA[
function getposts(json){
var totalposts=json.feed.openSearch$totalResults.$t;
document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">Posts</span></div>');
}
//]]></script>

• Find //]]></b:skin>
• paste the following code above it

.totalposts{
  background:#eee;
  color:#222;
  padding:10px 15px;
  display:inline-block;
  box-shadow:0 1px 1px rgba(0,0,0,0.2);
  text-align:center;
}
.totalposts .totalnumber{
    font:700 18px 'open sans','Segoe Ui',sans-serif;
  display:block;
}
.totalposts .totallabel{
  display:block;
  font:700 12px 'open sans','Segoe Ui',sans-serif;
  color:#00bfff;
} 

Save Template

• Go to Layout > Add Widget > Javascript/HTML
• Paste the following code in it

<script src="http://www.bloggerever.com/feeds/posts/default?alt=json-in-script&callback=getposts"></script>

Replace bloggerever.com with your blog domain.