Click Here to See Live Virtual Demo
Installing Custom Blogger Stats Gadget...
Before doing necessary changes please learn more about basics of Blogger template editingStep 1. Add the following CSS code before ]]></b:skin> in your template and Save template
/*Custom Blogger Stats by Duy Pham and Tech Prevue; http://www.techprevue.com
//Distributed under Creative Commans License; CC BY-NC-ND 3.0 International
http://creativecommons.org/licenses/by-nc-nd/3.0/deed.en_US
//Image's Credit to FatCow; http://www.fatcow.com*/
#Stats1 ul{margin:0;border:0;padding:0;height:32px;background:url(http://techprevue.googlecode.com/files/tpl-stats.png) no-repeat 0 -34px}
#Stats1 li{margin:10px 0;border:0;padding:0 0 0 40px;list-style-type:none}
#totalComments{height:32px;background:url(http://techprevue.googlecode.com/files/tpl-stats.png) no-repeat}
#totalCount{height:32px;background:url(http://techprevue.googlecode.com/files/tpl-stats.png) no-repeat 0 -68px}
Step 2. Now go to Layout (Page Elements) and add Stats Gadget after that save the position of the gadget
Step 3. Now again we'll edit the Blogger template / HTML so search for similar code given below
<b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'/>and change this searched code with the following code
<b:widget id='Stats1' locked='false' title='My Blog Stats' type='Stats'>
<b:includable id='main'>
<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>
Note:
1. Do not Expand Widget Templates for changes
2. Depending on the primary language of your blog title 'Total Pageviews' in Step 3 can be different.
Post a Comment