How To Add Stylish Responsive Blogger Stats Widget

How To Add Stylish Responsive Blogger Stats Widget

Hello Guys Today We Share A New Topic About Blogger Total Page-view Widget. We Also Known This Widget Have All Blogger Templates But There Only Showing Page-views, But Here We Shown How To Add Stylish Responsive Blogger Stats Widget Where You Can Seen Not Only Page-views ,Include There 2 More Options Likes Total Posts & Total Comments Of Your Blog. Ha Ha 😃😄.

How To Add Stylish Responsive Blogger Stats Widget

So Friends Lets Doing Our Below Methods:👇

Please Note *  - 

➤Need To Be Added Blogger Stats or Total Page View Widget On Layout Section.
➤This Tricks Made With Css & Js Widget .
➤This Widget Is Light & Optimized Js & Css That Mean No Effect On Your Blog Loading Speed.

Step To Adding 👀

Add the given bellow CSS code before ]]></b:skin> Tag in html area of your template

#Stats1 ul{margin:0;border:0;padding:0;height:32px;background:url(https://2.bp.blogspot.com/-PqK-GJ2YxIA/W1NyB4sZ6MI/AAAAAAAAEjo/KnBBFEQBHrQk_fuu6oTxG3cPhMMhp9HggCLcBGAs/s1600/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(https://2.bp.blogspot.com/-PqK-GJ2YxIA/W1NyB4sZ6MI/AAAAAAAAEjo/KnBBFEQBHrQk_fuu6oTxG3cPhMMhp9HggCLcBGAs/s1600/tpl-stats.png) no-repeat} #totalCount{height:32px;background:url(https://2.bp.blogspot.com/-PqK-GJ2YxIA/W1NyB4sZ6MI/AAAAAAAAEjo/KnBBFEQBHrQk_fuu6oTxG3cPhMMhp9HggCLcBGAs/s1600/tpl-stats.png) no-repeat 0 -68px}

Now Save Template .

Next Go to Again Edit the Blogger template / HTML .

Then Press ''Ctrl + F'' Search For Below Tag

<b:widget id='Stats1' locked='false' title='Total Pageviews 
Or 
Total Pageviews

You Will Seen That Then Replace That With Given Below 👇

<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 src='https://cdn.rawgit.com/Rashmibhabi/webduniya.ooo/c4aface4/webduniya%20stats.js'> </script> </div> </b:includable> </b:widget>

That's It Then Press Save Button. ☝

Conclusion *   Never Expand Widget Template, Just Select <B:WIDGET> ---</B:WIDGET> Replace That Our Above Tag.

Voila ; Enjoy This Tricks .👍 Please Share This Awesome Tricks To Your Social Friends We Hope Your Friends Likes This Post.