Fauzi Blog

Dec 6, 2014

By Bertuah on December 06, 2014 Labels: Tutorial No comments:

Blogspot Stats Posts Comments Widget

Widget statistik visitor counter dan pageviews pada blogspot adalah widget yang powerful dan akurat dalam mencatat jumlah kunjungan dan klik pada blog maupun artikel di blog engine blogspot. Agar widget tersebut dapat tampil dengan lebih apik dan menarik, dapat dilakukan sedikit modifikasi dengan menambahkan jumlah published posts dan comments counter. Untuk melakukan hal tersebut, cukup dengan mereplace widget Stats1 pada template, dengan code script berikut:

<b:widget id='Stats1' locked='false' title='Blog Stats' type='Stats'>
    <b:includable id='main'>
<style>.Stats .counter-wrapper{display:inline;font-size:18px;padding:5px;}.Stats .post-count{padding:0}.Stats .comment-count{padding:5px}.icon{font-size:2em;line-height:100%;width:1em;height:1em;position:relative;display:block;float:left;}.icon-comment{position:absolute;top:0;left:0;width:1em;height:.75em;background-color:#666;border-radius:.125em;}.icon-comment:after{content:"";position:absolute;border-style:solid;}.icon-comment:after{top:.75em;left:.25em;width:0;height:0;border-width:.125em;border-color:#666 transparent transparent #666;}.icon-file{position:absolute;top:0;left:.125em;width:.5em;height:.75em;border-width:.125em;border-style:solid;border-color:#666;background-color:#f9f9f9;border-radius:.0625em;}.icon-file:before{content:"";position:absolute;top:-.125em;left:-.125em;width:0;height:0;border-width:.15625em;border-style:solid;border-color:#fff #666 #666 #fff;}.icon-stats,.icon-stats:before{position:absolute;width:.3125em;border-width:0 .1875em;border-style:solid;border-color:#666;}.icon-stats{top:0;left:0;height:.875em;}.icon-stats:before{content:"";top:.3125em;left:.0625em;height:.5625em;}.icon-stats:after{content:"";position:absolute;top:.875em;left:-.1875em;width:1em;height:.125em;background-color:#666;}</style>
  <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="icon"><span class="icon-stats"></span></span>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/> <span class='counter-wrapper pageviews-title'> Clicks</span>
      </b:if>
<span class='counter-wrapper posts-comments-counter'>
<!--:[ BLOG STATS START ]:-->
<script style='text/javascript'>
//<![CDATA[
function numberOfPosts(json) {
document.write('<hr><span class="post-count"><span class="icon"><span class="icon-file"></span></span>' + json.feed.openSearch$totalResults.$t + ' Posts</span><hr>');
}
function numberOfComments(json) {
document.write('<span class="comment-count"><span class="icon"><span class="icon-comment"></span></span>' + json.feed.openSearch$totalResults.$t + ' Comments</span><hr>');
}
//]]>
</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;callback=numberOfPosts'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;callback=numberOfComments'/>
<!--:[ BLOG STATS END ]:-->
</span>
      <b:include name='quickedit'/>
    </div>
  </div>
</b:includable>
  </b:widget>