Monday, 30 July 2018

How To Install Custom Stats Widget For Blogger

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

how to install custom stats widget for blogger

how to add visitor counter to blogger


blogs stats widget image

Add this intall custom stats widget and save it.


<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 + &quot;_content&quot;' 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 + &quot;_sparkline&quot;' height='30' src='' title='Sparkline' width='75'/> </b:if> <b:if cond='data:showGraphicalCounter'> <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/> <b:else/> <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/> </b:if> <script type='text/javascript'> function postCount(json){ document.write(&quot;<span class='counts post2'> Total Posts &quot;); var count = json.feed.openSearch$totalResults.$t; document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;); document.write(&quot;</span>&quot;) } function numberOfComments(json){ document.write(&quot;<span class='counts comment'> Total Comments &quot;); var count = json.feed.openSearch$totalResults.$t; document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;); document.write(&quot;</span>&quot;) } </script> <script src='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/> <script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;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='//,700' rel='stylesheet' type='text/css'/> <link href='//' rel='stylesheet'/> <style type='text/css'> /* Blogger Custom Stats widget by */ .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:&quot;Page Views&quot;;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:&quot;\f06e&quot;;} .counts.post2:before {content:&quot;\f044&quot;;} .counts.comment:before {content:&quot;\f0e6&quot;;} #Stats1_content {width:auto;height:auto;background-color:#fff;} </style>

Now finally all is 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.

Gourab Das is a young and challanging web, graphic and logo designer.Gourab Design is Personal Blogger Templates site is a provider High Quality Premium Blogger Templates and Also Technology tips and latest tech news.

0 Please Share a Your Opinion.: