Cara Membuat Tampilan Pageviews, Total Post dan Comment Keren

Cara Membuat Tampilan Pageviews, Total Post dan Comment Keren - Hy, apa kabar sobat blogger? udah lama saya tidak posting dan membuat artikel diblog saya ini, karna belakangan ini saya sudah tidak memiliki banyak waktu untuk mengolah dan membuat artikel untuk blog saya lagi. Walau kadang saya terasa kangen dengan menulis artikel, tapi ya.. mau bagaimana lagi.

Akhirnya setelah beberapa waktu saya tidak terkoneksi dengan internet, :) pada kesempatan kali ini saya masih berkesempatan untuk berbagi kepada anda semua, sobat blogger. Pada artikel kali ini saya masih berbagi tips tentang memodifikasi tampilan total postingan dan komentar namun ditambah dengan total pageviews juga secara bersamaan.

Mungkin bagi anda yang belum tahu atau belum membaca artikel saya sebelumnya tentang: 'Cara Menampilkan Total Postingan dan Total Komentar', anda juga dapat membacanya terlebih dahulu.

Baiklah, untuk mempersingkat waktu dan menghemat kuota internet saya :) langsung saja kita mempraktekan tutorial kali ini tentang bagaimana Cara Membuat Tampilan Pageviews, Total Post dan Comment Keren diblog sobat.

Cara Membuat Tampilan Pageviews, Total Post dan Comment Keren

1. Masuk ke Dashboard Blog sobat
2. Lalu Tambahkan Widget 'Total Pageviews' dibagian Tata Letak
3. Selanjutnya, merubah tampilan pageviews sekaligus menambahkan fitur total postingan dan total komentar di widget yang sama, dengan cara:
4. Buka Template Editor > Lalu edit HTML
5. Lalu salin kode CSS dibawah 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;}

Custom: Anda dapat mengganti warna background masing2 widget sesuai keinginan anda.

6. Langkah selanjutnya yaitu menambahkan script pada widget pageviews untuk dapat menampilkan total postingan dan total komentar blog sobat, untuk itu sobat harus mencari kode berikut: <b:widget id='Stats1' locked='false' title='Total Pageviews' type='Stats'>...</b:widget> dan menggantinya kode tersebut 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>

7. Selesai, anda dapat menyimpan template anda dan lihat hasilnya.

Bagaimana? cukup mudahkan tutorial kali ini, saya rasa cukup itu yang dapat saya bagikan untuk kali ini. Semoga artikel singkat nan sederhana ini dapat bermanfaat bagi anda yang telah lama menunggu update dari blog saya ini. Saya ucapkan terima kasih dan sampai jumpa.