Cara memodifikasi tampilan pageviews (stats) menjadi lebih keren

widget stats adelinasasa
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
    widget stats
    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


Comments

  1. Tutorialnya kayaknya bakal banyak diserbu oleh para blogger, sebab bermanfaat.

    Ohy...dedikasi blog ini untuk urusan blog saya acungi jempol Tangan deh.....

    ReplyDelete
    Replies
    1. sebenarnya ini hanyalah berbagi pengalaman. Begitu selesai diterapkan langsung dibagikan. supaya tips bisa lebih meyakinkan saya uji dulu melalui halaman editor CodePen.

      Delete

Post a Comment

Ajukan pertanyaan dan berikan detailnya.

Jika ingin komen dengan menyisipkan kode HTML, parse terlebih dahulu kodenya di :
Blogcrowds
Lalu hasil parse pastekan ke dalam kotak komentar. Terimakasih!

pilih pola label berikut:

Show more