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.0function 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.
About the Author:
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
No comments :
Post A Comment!
Post A Comment!
We love to hear your feedbacks and suggestions. We will try our best to reply to your queries as soon as time allows. Please keep in mind that all comments are moderated manually by our editors team to minimize spamming, and all the links are nofollow.
Note:
1. To add HTML code in the box, please use our HTML editor generator.
2. Please do not spam. Those type of comments will be deleted upon our review.
3. We should appreciate an individual and suggestive discussion.
Best Regards,
GOLDEN WORKS TV