Blogger custom Stats Widget by labnole.com

Blogger custom Stats Widget

Friends, we will discuss how to add Blogger Custom Stats Widget to your website. In the past, we have learned how to create contact forms and contact pages for bloggers and can see the tutorials. We did use the Blogger custom Stats Widget, it's not very nice to see. We will add beautiful Blogger custom Stats Widget and the users will like it very much. We will have a total view of this blog on the Total Stats Widget and the Total View and the Total Posts in the same widget. Users will find it very nice to create custom status with HTML, CSS and XML are used by Blogger.

Through this custom Stats Widget, users' total view and total posts and overall comments will increase the confidence of the users. If the website has a good response to websites, it is very convenient for users. This widget supports every template in Blogger and it looks very nice. Its live demo can be seen on this website on the labnole.com website.

Blogger custom Stats Widget image

We will provide all the code of custom status widget in Blogger and follow the steps by step by step, and you can easily add a custom status widget to your website. Hopefully, after watching this tutorial, there will be no problem in adding a custom status widget to the blogger's website.

Blogger custom Stats Widget All steps

Follow all the steps below and add the Custom Stats Widget to your website.

Step1:

Log in your Blogger account ➤➤ Click Layout option ➤➤ Sidebar add a gadget ➤➤ Choose Stats Widget.
See Configure Stats Widget Image.
Stats Widget Image
➤➤ And Save it.

Step2:

Click Theme option ➤➤ Click Edit HTML ➤➤
See Demo image.
Theme option  image
Then Click Control+F Button.

Paste this CSS Code <head> to </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 labnole.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:&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>  
Step3:
Next, Find ( 'Stats1' ) ➤➤
<b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'>...</b:widget>    ------------> ( Delete )
And Paste this Code.


Edit  code custom Stats Widget

Custom Stats Widget Source code
 <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='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 + &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> 

Click Save theme every work complete and you can refresh your webpage, see custom Stats Widget looks.

See the Demo Image of custom Stats Widget.
Image of custom Stats Widget
Hope everyone likes this tutorial.
If you like this tutorial, Subscribe to the share and don't forget to comment.
Have any question ask me.

Learn other Tutorials

Post a Comment

0 Comments

Follow by Email

Get all latest content delivered straight to your inbox.