Follow Me

Customize Blogger Statistics Widget

Customize Blogger Statistics Widget

Customize Blogger Statistics Widget - The following tips I made at the request of a blogger friend here about how to create a statistical widget like this blog.

The function of the blogger default statistics widget serves to bring up the number of views of visitors on 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 it:

First, please add a statistics widget in your blog layout, after adding it, please open the template then click Edit HTML. Look for the HTML widget statistics code below
<b:widget id='Stats1' locked='false' title='Total Tayangan Laman' 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 above code 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://stressthinking.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://stressthinking.blogspot.com with the url of your blog.

To make it look more attractive, please add CSS below

First, open Blogger> Template> Click edit HTML> Apply the 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-adjust the CSS font and display it according to your blog, last save the template and see the results.

That's enough, hopefully useful.
Next Post Previous Post
No Comment
Add Comment
comment url