How to Display Total Published Posts Counts in Blogger

Happy New Year buddies! You may be occupied with showing the total number of posts you have distributed on your online diary? You may need to tell your followers that what amount of worth perusing articles or posts your site has created for them? As of late, one of our supporters tweet us getting some information about an approach to show the total number of posts distributed on his site. Then again, Blogger don't permit you to show the Total Published Post Count of course, yet joyfully we have created a plugin that precisely shows the aggregate distributed post check in blogger. Today in this article, we will demonstrate to you best practices to show aggregate distributed posts numbers in Blogger.
You can see the demo here to know what we are trying to accomplish for.

 Displaying  Total Published Posts Counts in Blogger

Step 1.  Go to Blogger Dashboard  >> Lay-out.
Step 2.  Add a  Gadget >> Click HTML/Javascript.
Step 3. Paste the code below inside the blank space.

<script style="text/javascript">

// Total Published Posts Counts for Blogger

// =============================

// Author: BTAT

//Version:2.0

function numposts(json) {

document.write('<div id="totalposts">');

document.write('<div id="titlep">Codes2tipsandtricks was launched on<br/> February 25, 2013.</div>');

document.write('<div id="descriptionp">A Demo blog for Bloggingtipsandtrix<br/> My Mother Blog!</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>

Step 4.  Click the save button and go back to Blogger Dashboard.
Step 5. From the Blogger Dashboard click Template  and hit the HTML button Click anywhere in the HTML template editor and press (CTRL+F), this will enable a search box. Now search for the tag below.

]]></b:skin>

Step 6.  And just above it paste the following CSS style sheet coding.

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

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: #168eca;
    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;
}
div#postcopy {
display:none;}

Short Customization:

You can replace the hexadecimal color  ddd to change the background color of the widget.
Change 168eca to change the color of  your number in the  total number of posts.

Step 7. Save your work and finish.
Have a Nice Day.