New Custom Blogger Stats widget on your blog will show Total Posts, Total Comments and Total Pageviews. This widget is originally developed by Duy Pham and here I am just presenting his widget with a new look after some changes in cascade style sheets (CSS). I hope my readers will love Duy Pham’s wonderful effort and my design. This script is very light and does not slow down your blog’s page speed. This widget works by fetching necessary data from your blog feed. So make sure your feed is open for public access. If you have any further query please communicate via comment(s).

Custom Blogger Stats

Click Here to See Live Virtual Demo

Installing Custom Blogger Stats Widget…

Before doing necessary changes please learn more about basics of Blogger template editing

Step 1. Add the following CSS code before ]]></b:skin> in your template and Save template

/*Custom Blogger Stats by Duy Pham and Tech Prevue; https://www.techprevue.com*/
/*Image's Credit to FatCow; http://www.fatcow.com*/
#Stats1 ul{margin:0;border:0;padding:0;height:32px;background:url(//goo.gl/ZHG881) 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(//goo.gl/ZHG881) no-repeat}
#totalCount{height:32px;background:url(//goo.gl/ZHG881) no-repeat 0 -68px}

Step 2. Now go to Layout (Page Elements) and add Stats widget after that save the position of the widget

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='' type='Stats'>
<b:includable id='main'>
<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:
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.