Before proceeding farther delight banking concern jibe the demo of the widget hither (you volition abide by the widget at the transcend of the sidebar).
The real start affair y'all must exercise is to login into your Blogger account. Once y'all are successfully logged inwards from Blogger dashboard become to Your Blog ›› Layout ›› Add a Gadget ›› Add HTML/JavaScript ›› in addition to glue the next slice of JavaScript coding inwards the HTML Text Box.
<script style="text/javascript">
// Total Published Posts Counts for Blogger
// =============================
// Author: Syed Faizan Ali
//Version:2.0
utilisation numposts(json) {
document.write('<div id="totalposts">');
document.write('<div id="titlep">MyBloggerLab was launched on<br/> Jan 5, 2012.</div>');
document.write('<div id="descriptionp">Quality Blogger Tutorials in addition to articles<br/> in addition to 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 y'all accept successfully added the higher upwards code, press “Save Button” at the bottom in addition to this makes y'all 2 steps closer to the complete business then deed to the adjacent pace ahead.
Now glue the next CSS coding higher upwards the ]]></b:skin> tag acquaint inwards the template. You tin shipping away alter its style, color, fonts according to your wish needs. Once done, salvage your template.
div#totalposts {
font-size: 14px;
text-align: center;
float: left;
border: 1px company #d2d2d2;
padding: 20px;
background: #FCFCFC;
}
div#titlep {
float: left;
width: 100%;
border-bottom: 1px company #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 company #d2d2d2;
margin-bottom: 15px;
padding-bottom: 15px;
}
div#postcopy {
float: left;
width: 100%;
text-align: center;
margin-top: 5px;
}
Congratulations: You accept successfully added a plugin to your website that displays sum published post service counts inwards your blogger BlogSpot site. Go in addition to banking concern jibe your weblog in addition to bask the accurate counting of the widget. The widget is automatic then y'all don’t accept to worry most updating it over again in addition to again.
We promise this tutorial mightiness plough out useful for y'all in addition to y'all tin shipping away utilisation it inwards your adjacent project. This widget could last useful to allow your novel readers know that how useful data or articles your site accept covered. If y'all liked this widget, delight exercise us a favor in addition to percentage it amongst your friends at Facebook, Google or twitter.
Comments