Hello to all the blogger users today i m going to tell you how add an Total Post and Total Comment Widget

Total Post Widget Tells your visitors the post that are having been published to your blog and also shows that how many comments have been done to your blog so it can encourage to other people to comment on your blog

    
Q:   1.Is it difficult to install this hack ?
    A: No its so simple that you have to just add an HTML/JAVASCRIPT widget

1. First login to your Blogger Dasboard .
2. Then Click on Layout.
3. Then click on add HTML/JAVASCRIPT.
4. Add Below Code to it :

   <script style=”text/javascript”>

   function numberOfPosts(json) {
   document.write(‘Total Posts: <b>’ + json.feed.openSearch$totalResults.$t + ‘</b><br>’);
   }

   function numberOfComments(json) {
   document.write(‘Total Comments: <b>’ + json.feed.openSearch$totalResults.$t + ‘</b><br>’);
   }

   </script>

   <script src=”http://Your-Domain-Name/feeds/posts/default?alt=json-in-script&callback=numberOfPosts”></script>

   <script src=”http://Your-Domain-Name/feeds/comments/default?alt=json-in-script&callback=numberOfComments”></script>

5. Then Just Put Custom domain name for Example : www.yoursite.com or yoursite.com
6. For Blog URL for example. riteshsanap4u.blogspot.com
7. Just Click on Save Button

Your Total Post and Total Comments Widget is ready

You would have seen many new modified blogger templates with additional 3 widgets at the bottom (footer) of the blog, and they are very useful for bloggers, as you can place widgets like Recent posts, Recent comments, Top posts and Top commentators etc in these widgets.
It is very important to add these widgets in a blog, as when readers finish reading the post, they may immediately leave the blog if no other interesting article is found. Moreover these widgets help new visitors to understand the blog’s main content.

So if these widgets are not present in your blog, then follow these steps to add them yourself :

First log in to Blogger.com
Go to Layout -> Click on Edit HTML tab

Now search (CTRL+F) for these code line:

<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>

REPLACE the entire red line in the above code, with this new code:

<div id=’footer-column-container’>
<div id=’footer2′ style=’width: 30%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col1′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’footer3′ style=’width: 40%; float: left; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col2′ preferred=’yes’ style=’float:left;’/>
</div>
<div id=’footer4′ style=’width: 30%; float: right; margin:0; text-align: left;’>
<b:section class=’footer-column’ id=’col3′ preferred=’yes’ style=’float:right;’/>
</div>
<div style=’clear:both;’/>
<div id=’footer-bottom’ style=’text-align: center; padding: 10px; text-transform: lowercase;’>
<b:section class=’footer’ id=’col-bottom’ preferred=’yes’>
<b:widget id=’Text2′ locked=’false’ title=” type=’Text’/>
</b:section>
</div>
<div style=’clear:both;’/>
</div>

Now PREVIEW the template, and if no errors are displayed, then carry on:

Find this code:

]]></b:skin>

Then immediately BEFORE / ABOVE it, paste these lines:

#footer-column-container {
clear:both;
}


.footer-column {
padding: 10px;
}

Save the template, go to “Page Elements”, and add content to the three new widgets !

For Adding this Hack Below Header Use Just Find For :

<div id=’Header-wrapper’>
<b:section class=’header’ id=’header’/>
</div>

And Similarly Like How to add Footer Add It Header