Customize Blogger Statistics Widget

Customize Blogger Statistics Widget  - The following tips I made at your request bloggers here on how to create statistics widget like in this blog.

The function of the blogger's default statistics widget serves to bring the number of views of visitors to a blog. Here I slightly modify and add a markup of the number of posts published in a blog.


Immediately, here's how to apply:

First please add statistics widget in Layout your blog, after added please open Template then clicks Edit HTML. Search the HTML widget code below

<b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'>
    <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' 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>
      <b:include name='quickedit'/>
    </div>
  </div>
</b:includable>
  </b:widget>

Then replace all the code above with the code below

<b:widget id='Stats1' locked='false' title='statistics' type='Stats'>
    <b:includable id='main'>
      <b:if cond='data:title'><h2><span><data:title/></span></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 postx'> Total Post &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='https://arbloggerlab.blogspot.com/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
    </div>
  </div>
</b:includable>
  </b:widget>

After that in the widget above please replace  https://arbloggerlab.blogspot.com with your blog URL.

To make it look more interesting, please add CSS below

First, go to Blogger> Template> Click edit HTML> Apply code below just before  ]]></b:skin> or </style>

/* CSS Custom Stats */
#sidebar .Stats img {
    display: none!important;
    background-image: none;
}

#sidebar .Stats .counter-wrapper {
    width: 92%;
    text-align: right;
    margin: 10px;
    line-height: 35px;
    color: #71737f;
    font-family: 'Open Sans',sans-serif;
    font-weight: 700;
    font-size: 16px;
}

#sidebar .Stats .counter-wrapper:after {
    content: 'Page Views';
    font-family: 'Open Sans',Arial, sans-serif;
    float: left;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: #71737f;
}

#sidebar .counts {
    display: inline-block;
    width: 92%;
    margin: 10px;
    font-size: 13px;
    line-height: 35px;
    color: #71737f;
    font-weight: 700;
}

#sidebar .counts .count {
    display: inline-block;
    font-size: 16px;
    height: 30px;
    vertical-align: top;
    direction: ltr;
    float: right;
    color: #71737f;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700!important;
}

#sidebar .counts:hover .titles:before {
    color: #71737f!important;
    border-radius: 2px;
    border-color: rgba(255,255,255,0.1);
}

#sidebar .counter-wrapper.text-counter-wrapper:before,#sidebar .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;
}

#sidebar .counter-wrapper.text-counter-wrapper:before,#sidebar .counts:before {
    display: block;
    background-color: #a5a7b2;
    color: #fff;
    width: 35px;
    height: 35px;
    font-size: 18px;
    line-height: 37px;
    border-radius: 2px;
    margin: 0px 8px 0 0;
}

.counter-wrapper.text-counter-wrapper:before {
    content: '\f201';
    color: #fff;
}

#sidebar .counts.postx:before {
    content: '\f03e';
    background-color: #f0b26f;
}

#Stats1_content {
    width: auto;
    height: auto;
    background-color: #fff;
}

#Stats1 h2 {
    display: none;
}

Re-customize the CSS font and it looks according to your blog, last save the template and see the results.

Quite so, may be useful.