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.
Post a Comment