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
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'>&hellip;</h4>
<span>Posts</span>
</li>
<li id='totalComments'>
<h4 id='Stats1_totalComments'>&hellip;</h4>
<span>Comments</span>
</li>
<li id='totalCount'>
<h4 expr:id='data:widget.instanceId + "_totalCount"'>&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.
Thus tutorial on statistical widget modification blogger version 2, do not forget to read the tutorial Modification blog stats widget version 1
