Cara memodifikasi tampilan pageviews (stats) menjadi lebih keren

Gambar widget stats adedansasa.com

Ini adalah tentang cara merobah tampilan pageviews atau stats bawaan blogspot supaya terlihat keren dan beda. Template buatan saya masih memiliki semua widget blogger namun ketika dipasang tampilannya jauh berbeda dengan aslinya.

1. Langkah pertama pasang terlebih dahulu widget stats (pageviews-nya)

Masuk kepengaturan blogger

• Pilih layout atau tataletak
• pilih tambahkan widget
• Pilih widget stats atur tampilannya

  

  mengkonfigurasikan widget stats

• Save template

2. Cari kode ]]></b:skin> tambahkan kode css berikut tepat diatasnya:
Caranya masuk ke dalam pengaturan blogger:

1. Masuk ke akun pengaturan Blogger masuk ke Dashboarnya
2. Pilih -> Template -> Edit HTML
3. Pada halaman editor HTML yang telah terbuka temukan kode dibawah agar lebih cepat menemukannya tekan Ctrl+F (Windows, Android) atau CMD+F (Macbook)

#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{
display:inline;
width:auto;
box-shadow:4px 4px 0px rgba(33,33,33,0.45);
border:0;
color:#fff;
float:left;
text-decoration:none;
margin:0;font-size:auto;
list-style-type:none
}
#Stats1 li:hover{
opacity: 0.7;
filter:alpha(opacity=70); /* For IE8 and earlier */
}
#Stats1 h4{margin:0;font-size:auto;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: #0290E2;
}
#totalComments{
background: #309FDF;
}
#totalCount{
background: #4FACE1;
}

3. Masih dalam halaman editor HTML temukan kode:

<b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'>...</b:widget>

perhatikan titik 3 buah kalau di klik 2x akan menampilkan banyak lagi kode HTML widget, pokoknya hapus itu sampai ke ...</b:widget>

pada templat baru kode ini mirip saja seperti ini:

Setelah kode diatas dihapus ganti dengan kode berikut 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>

Save template. Buka atau sentuh navigasi menu awal adedansasa.com untuk melihat hasilnya.
Souce: BloggerSpice : 6 Cool Customs blog Stats...

www.editblogtema.net