In this post, I will share How To Install Custom Stats Widget For Blogger. When you use this ?., you can see the overall view of your blog page, the total number and also page views ls posts, and the total number of who are visits your website. have a complete overview of the pages. After that, I changed some CSS and included the Professional design in this.
The looking is beautiful and clean. I use the icon using spectacular fonts. Installing custom statistics widgets is a very useful for you. In my case, I also share full procces in this article. But this is only the complete view of pages .
It is a very unique and intelligent design. Some friends have asked me to share this widget with my website. Then I share a new look and more with another feature. This allows you to show all your thoughts, comments and posts on your blog on your total page. People who want to become more attractive and beautiful . make the blogging widget easily set up.
Code author by :- msdesign
Also check :- True Blog Professional Blogger Template
Code author by :- msdesign
Also check :- True Blog Professional Blogger Template
how to add visitor counter to blogger
GO TO BLOGHER DASHBOARD 👉 LAYOUT OPTION 👉 ADD GADGET 👉 BLOGS STATE .
Add this intall custom stats widget and save it.
Then you goto THEME OPTION. 👉 EDIT HTML.👉SEARCH BELLOW HTML CODE.👇
<b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>...</b:widget>
Now you will be replace this html coding. :-
<b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <!-- Content is going to be visible when data will be fetched from server. --> <div expr:id='data:widget.instanceId + "_content"' style='display: none;'> <!-- Counter and image will be injected later via AJAX call. --> <b:if cond='data:showSparkline'> <img alt='Sparkline' expr:id='data:widget.instanceId + "_sparkline"' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/> </b:if> <b:if cond='data:showGraphicalCounter'> <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/> <b:else/> <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/> </b:if> <script type='text/javascript'> function postCount(json){ document.write("<span class='counts post2'> Total Posts "); var count = json.feed.openSearch$totalResults.$t; document.write("<span class='count'>" + count + "</span>"); document.write("</span>") } function numberOfComments(json){ document.write("<span class='counts comment'> Total Comments "); var count = json.feed.openSearch$totalResults.$t; document.write("<span class='count'>" + count + "</span>"); document.write("</span>") } </script> <script src='/feeds/posts/default?alt=json-in-script&amp;max-results=0&amp;callback=postCount' type='text/javascript'/> <script src='/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=numberOfComments'/> </div> </div> </b:includable> </b:widget>
blogger visitor counter widget
You are set up and done. Now you want looking this state more beautiful?. So copy this code bellow here. And paste it before </HEAD> tag.
<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/> <link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> <style type='text/css'> /* Blogger Custom Stats widget by gourabdesign.com */ .Stats img {display:none!important;background-image:none;} .Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;} .Stats .counter-wrapper:after {content:"Page Views";float:left;text-align:left;font-size:13px;font-weight:700;color:#333;} .counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;} .counts .count {display:inline-block;font-size:16px;height:30px; vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;} .counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);} .counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;} .counter-wrapper.text-counter-wrapper:before, .counts:before { display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;} .counter-wrapper.text-counter-wrapper:before {content:"\f06e";} .counts.post2:before {content:"\f044";} .counts.comment:before {content:"\f0e6";} #Stats1_content {width:auto;height:auto;background-color:#fff;} </style>
Now finally all is done.save your theme. And go to your website. Refresh your blog. Now see the results.
I hope you are understand.that adding optimized skills to a personalized blog on your blogspot wbsite. If you have facing any problems, ? So share your prblm through the comment box. If you like my post?.so, be sure to share this with your friends also social site. Your help is our future. Thank you my sweet readers.