Mempercantik tampilan Blog' Stats

Blog's Stats merupakan tampilan jumlah artikel yang dibaca oleh pengunjung. Biasanya Blog's Stats hanya jumlah Pageviews saja akan tapi pada posting ini saya akan tambahkan dengan jumlah Post dan Comment pada blog sobat.

Caranya :

• Tambahkan A Gadget Blog' Stats di layout blog sobat misalnya dengan nama Statistik

• Masuk Template - Edit HTML dan copy kode script berikut dan taruh di atas  ]]></b:skin>

#Stats1 ul{margin-left:6px;border:0;padding:3px;}
#Stats1 li{display:inline;width:27%;margin:0;border:0;background-color:#fff;background:#bb3b3b;color:#fff;float:left;padding:5px 7px;text-decoration:none;text-shadow:none;margin:0 1px 1px 0;font-size:12px;list-style-type:none}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;text-shadow:none;}
#Stats1 h4 :hover {
    transform: rotate(10deg) scale(1.4);}
#Stats1 span{font-size:12px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px} 

• Cari nama label widgetnya dengan CTRL+F ketikan Statistik atau sesuai nama label yang sobat buat.

sehingga akan ketemu kode seperti berikut

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

• Ganti semua warna merah di atas dengan kode berikut

<ul>
<li><h4 id='Stats1_totalPosts'>&amp;hellip;</h4> <span>Posts</span></li>
<li id='totalComments'><h4 id='Stats1_totalComments'>&amp;hellip;</h4> <span>Comments</span> </li>
<li id='totalCount'> <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4> <span>Pageviews</span> </li> </ul>
<script type='text/javascript'> //<![CDATA[
function numberOfPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};
function numberOfComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=numberOfPosts"><\/script> <script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=numberOfComments\"><\/script>'); //]]> </script>

• Sehingga akan menjadi seperti ini:

<b:widget id='Stats1' locked='false' title='Statistik' type='Stats'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
<ul>
<li><h4 id='Stats1_totalPosts'>&amp;hellip;</h4> <span>Posts</span></li>
<li id='totalComments'><h4 id='Stats1_totalComments'>&amp;hellip;</h4> <span>Comments</span> </li>
<li id='totalCount'> <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4> <span>Pageviews</span> </li> </ul>
<script type='text/javascript'> //<![CDATA[
function numberOfPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};
function numberOfComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=numberOfPosts"><\/script> <script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=numberOfComments\"><\/script>'); //]]> </script>
  </div>
</b:includable>
  </b:widget>

• Kemudian Simpan template dan lihat hasilnya :14::14: