Adding a Statistics Widget on the Blog - BLOGHINT

Adding a Statistics Widget on the Blog

Encrypting your link and protect the link from viruses, malware, thief, etc! Made your link safe to visit.



When you add a statistical widget on your blog, in general, the statistical display is just that, aka it's still the default view from Google, and you're tired of being seen by others.
Here I found this custom statistical widget, and it looks like the image below.

Or for the demo you can see on my blog.
With time I can just remove this widget.

Since I am not a blogger who likes to make articles with a minimum of 500 words, so without further ado, I just got to the point.

The first stage


1. Login to your blog
2. Select Layout> Add a Gadget
3. Select Blog Stats, then select image no.2 and save. (See Figure below)

statistics-blog

Second Stage


4. Go to Template / Theme> Edit HTML
5. Then find the tag below.

<b:widget id='Stats1' locked='false' title='Total Penayangan Laman' type='Stats' version='1' visible='true'>...</b:widget> 

6. Replace the widget tag with the tag below.

   <b:widget id='Stats1' locked='false' title='Statistik' 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 Artikel &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 Komentar &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> 


7. And add the CSS below before </head>

<style type='text/css'>
/* Statistik widget www.myabdurrahim.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>

8. These statistics use fontawesome to display the icon, so if you don't have fontawesome on your blog yet, you can add fontawesome below to your blog.
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

9. Save and view your blog.
You can also modify the appearance by changing the CSS only.

Ok, just here this article, if there are problems related to the discussion in this article, please leave your questions in the comments column, Thank you.

0 Response to "Adding a Statistics Widget on the Blog"

Post a comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel