20 March 2014

Total Posts, Comments & Page Views Counter Widget for Blogger

In Blogger by Debarpan Mukherjee // March 20, 2014 // 5 comments

Today we again came with another attractive widget for blogger.This widget contains both HTML and CSS code in it.It do have a very easy loading feature also,so don't need so to worry so much about your blog loading speed after placing the widget into your blog.Basically this widget will use to track your blog's traffic,which is definitely a good news for any webmasters as well it also help your blog's popularity on the eye of your blog visitor.This widget will show your blogs total Post,Comments & Pageviews to your blog's reader.We guess it's such an attractive feature with cool lookin style will definitely make your blog more beautiful.For demo you can take a look at the below screenshot as well.

Must Read : Create Blogroll On Blogger

Add This On Blogger

Log onto Blogger dashboard>>template>>edit html
Add the following CSS code before ]]></b:skin> code in your template and Save template

/*Custom Blogger Stats by TTH http://www.techtrickhome.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}

Now go to Layout (Page Elements) and add Stats Gadget widget after that save the position of the gadget
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'/>

Then 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>

Now save the template and you're done.

Must Read : Customize Related Post Widget

Now go to your blog and take a look at your newly added widget.Don't forget to share your view about this widget.Thanks for visiting.Happy blogging guyz!!!!