Cara kustom total pageviews widget

Terima kasih telah berkunjug ke cara edit blog. Pada posting yang terdahulu cara edit blog telah membuat posting tentang

http://caraeditblogger.blogspot.com/2015/01/menampilkan-total-tayangan-laman.html,
http://caraeditblogger.blogspot.com/2014/09/membuat-widget-total-pengunjung-blog.html,
http://caraeditblogger.blogspot.com/2014/09/membuat-widget-total-pengunjung-blog.html.
Semuanya saling berhubungan, sama-sama berguna untuk melihat pengunjung blog.
Nah, pada posting kali ini "Cara edit blog" juga akan membuat posting tentang widget total halaman / total pageviews. Namun kali ini sedikit berbeda dengan posting-posting sebelumnya. karena Wdiget total pageviews yang ada akan kita kustomisasi menjadi 3 tamilan sekaligus, yaitu Total Posts, Total Comments, Total Pageviews. Nantinya widget ini dapat menampilkan berapa banyak total posting yang ada di blog, berapa banyak Total halaman yang dilihat, dan berapa banyak Total Komentar. Mari kita lihat gambarnya :

dan tampilan yanng asli bawaan blogger adalah seperti gambar berikut:

Modifikasi Tampilan widget total tayang laman.jpg

Setalah kita melihat kedua gambar diatas, maka tampaklah perbedaan pada widget total page views. Dan cara membuat / cara mengubah tampilan widget tersebut adalah :
- Login ke blogger
- Buat buat widget total tayang laman, caranya bisa dilihat di http://caraeditblogger.blogspot.com/2014/09/membuat-widget-total-pengunjung-blog.html
- lanjutkan ke Template > Edit html
- Cari kode widget total halaman, di sana kodenya Stats1. Untuk mempermudah pencarian caranya klik pada Lompat ke Widget, cari Stats1. lihat gambar :

buat widget total tayang laman

Ganti kode Wdiget Stats1 dengan kode berikut :

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

- Kemudian cari kode

]]></b:skin>

- Tambahkan kode berikut diatasnya :

#Stats1 ul{height: 50px;margin:0px 0;border:0;padding:0}
#Stats1 li{display:inline;width:31%;margin:0;border:0;background-color:#808080;background:#999;color:#fff;float:left;text-decoration:none;text-shadow:none;margin:2px;font-size:12px;list-style-type:none}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#808080;text-shadow:none}
#Stats1 span{font-size:12px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px}

- Simpan template dan lihat hasilnya
- Semoga pekerjaan Cara kustom total pageviews widget yang telah dilakukan berhasil. dan tampilan total page views anda telah berubah