Modifications Display Statistics Blogger Widget

A wide variety of widgets for blogger statistics provided by third parties. Whether the widget from Sitemeter, Histats, Statcounter, Feedjit, Hitwebcounter and other statistics widget service. The default statistics widget blogger though it still has shortcomings as yet provide a complete statistical data such as the number of visitors because it only displays the total number of page views, but enough to monitor the progress of your blog. Read : How to Make Flat UI Label Cloud

This tutorial explores the way I want to modify the default statistics blogger widget to make it look more beautiful than the design aspect. Of course with knowledge of CSS you can develop further the design of this widget.

Feature

1. Displays Total posts
2. Displays Total Comments
3. Displays Total Pageviews
4. The use of CSS Sprites

CSS sprites is a cool technique that is used to speed up the loading blog when doing HTTP request images. In this widget you might think there are 3 pictures icons used. Actually there is only one image is used which contains all the icons. This technique is not commonly diblogger but very often used in worpress blog.

Okay, please follow the steps below:

How to add widgets statistical these bloggers to blog

On the dashboard select the Layout menu
Add a Gadget -> Select widget Statistics blog / blog statics

Note: In the column configure widgets, you do not need to change the name or choose the look, just click save and then click save settings

Now enter the Template menu -> Select Edit HTML
Click Ctrl + F and search for the code]]> </ b: skin>
Then place the following CSS code above code]]> </ b: skin>

#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{display:inline;width:28%;margin:0;border:0;background-color:#fff;background:#0090D5;color:#fff;float:left;padding:5px 7px;text-decoration:none;text-shadow:none;margin:0 1px 1px 0;font-size:12px;list-style-type:none}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1 span{font-size:12px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px}

Note: You can change the background, font color in the CSS code above statistics widget to match the design of your blog template.

press Ctrl + F and find the following code:
<b: widget id = 'Stats1' locked = 'false' title = 'Total pageviews' type = 'Stats' />
Once you can, replace the code with the following code:

<b:widget id='Stats1' locked='false' title='' type='Stats'>
  <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <li>
          <h4 id='Stats1_totalPosts'>&amp;hellip;</h4>
          <span>Posts</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'>&amp;hellip;</h4>
          <span>Comments</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>
          <span>Pageviews</span>
        </li>
      </ul>
      <script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
      </script>
    </div>
  </b:includable>
</b:widget>

Note: You can change the background color of the text has above with your own words
Save the template and see the results of your blog.
Thus this tutorial, on another occasion I will be sharing also modify the default widget blogger different statistics. Thank You. Read : How to Make Page Peel Effect For Blogger With JQuery