Home » » Modifications Display Statistics Blogger Widget Version 2

Modifications Display Statistics Blogger Widget Version 2

Posted by Ran Dreamer on 21 Apr 2015

Back again with tutorial "modification stats widget blogger", and this modification is the second version. The difference with the first version Modifications Display Statistics Blogger, only lies in the CSS code as for the design aspects: The first uses icons and background images is vertical, while the second version is only using color background with horizontal style. Or like the screenshot in addition: Read : Most Commented Posts Widget for Blogger
 Display Statistics Blogger Widget

The feature of this blog stats widget:
feature
  • Displays Total posts
  • Displays Total Comments
  • Displays Total Active Pages

Interested to add it to your blog? Okay, please follow the steps below:

How to add widgets statistical bloggers to blog

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

Note :In 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
Press 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}
Press Ctrl + F and find the following code:
<b: widget id = 'Stats1' locked = 'false' title = 'Total pageviews' type = 'Stats' />
After that, 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>
Save the template and see the results of your blog.

Share This Post :
 
Copyright © 2015 LABSTON | Adsense, Blogger, Android, Backlink, SEO, Template. All Rights Reserved
Template Johny Wuss Responsive by Creating Website and CB Design