Cara Merubah Tampilan Pageviews Menjadi Lebih Berwarna

  

    Selamat pagi, sekarang kita akan belajar bersama tentang Cara Merubah Tampilan Pageviews Menjadi Lebih Berwarna dan ini akan terlihat lebih berbeda dari tampilan standarnya. 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.

Selesai. Cukup mudah kan

Terima kasih dan semoga bermanfaat.