Latest News :

Merubah Tampilan PageViews Menjadi Berwarna

Posted by at Friday, July 25, 2014

Dalam widget ini tidak hanya menunjukkan jumlah tayangan dari pengunjung saja tetapi juga akan menunjukkan jumlah komentar dan postingan di blog Anda. Nah jika Anda ingin menambahkan kode ini silahkan ikuti langkah-langkah di bawah ini :


1. Buka Blogger > Tata Letak > Tambah Gadget > Pilih statistik Blog dan tekan Simpan
2. Backup template Anda (jika diperlukan)
3. Klik Template > Edit HTML, dan cari kode ini ]]></b:skin> atau </style> 
4. Lalu tambahkan kode css di bawah ini tepat diatas kode ]]></b:skin> atau </style>


#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{
display:inline;
width:30%;
border:0;
color:#fff;
float:left;
text-decoration:none;
margin:0;font-size:12px;
list-style-type:none
}
#Stats1 li:hover{
opacity: 0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;padding: 0 5px 0 5px;}
#Stats1 span{font-size:12px;color:#fff;padding: 0 5px 0 5px;}
#totalposts{
background: #0090D5;
}
#totalComments{
background: #FFB200;
}
#totalCount{
background: #FF3300;
}

5.Kemudian cari kode widget ini <b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'>...</b:widget>  dan ganti dengan kode dibawah ini :


<b:widget id='Stats1' locked='false' title='' type='Stats'>
  <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <li id='totalposts'>
          <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 totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(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=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
      </script>
    </div>
  </b:includable>
</b:widget>



6.Terakhir, simpan template. Maka tampilan widget pageviews akan terlihat seperti ini :




Selesai. Cukup mudah kan



Terima kasih dan semoga bermanfaat.





Sumber : http://www.oqzigen.com/2013/07/customize-total-pageviews-blogger-more-colorful.html

Share this Post :

0 comments: