New Custom Blogspot or 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 the 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).
Steps to Install a Custom Blogger Stats Widget…
Before doing necessary changes please learn more about the basics of Blogger template editing
Step 1. Add the following CSS code before ]]></b:skin> in your template and Save template
#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 Blogspot/Blogger template/HTML so search for the similar code given below. Here is a complete guide on how to edit Blogger template/theme.
<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'>&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>
Not have a blogspot blog and read here how to create a free blog on Blogspot.
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.
this not work for my blog.
We will fix it very soon! You can share your blog address.
hi, is it working?
Yes it is working. Please check your inbox for reply.
hi, i think the widget has a problem..
i tried many times but it works but it is corrupted.
it is behind my other widget… plelase help me out
It is not a bug in my widget it is in your template. I have fixed it according to your template. I will suggest you buy a premium template from us, we’ll customize it for you.
I really appreciate it^^
Thank you
We fixed this widget again working, Sorry for delay.
Please make sure your blog is public. Otherwise widget will not work.
We have made some changes in code. So please use new javascript.
Thanks! this is awesome!
can u please update a demo video??
Hello sir how to change background color white
good bro