Gambar widget stats adedansasa.com |
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:
- Masuk ke akun pengaturan Blogger masuk ke Dashboarnya
- Pilih -> Template -> Edit HTML
- 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:
<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'>&hellip;</h4>
<span>Posts</span>
</li>
<li id='totalComments'>
<h4 id='Stats1_totalComments'>&hellip;</h4>
<span>Comments</span>
</li>
<li id='totalCount'>
<h4 expr:id='data:widget.instanceId + "_totalCount"'>&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...
Souce: BloggerSpice : 6 Cool Customs blog Stats...
www.editblogtema.net
Tutorialnya kayaknya bakal banyak diserbu oleh para blogger, sebab bermanfaat.
BalasHapusOhy...dedikasi blog ini untuk urusan blog saya acungi jempol Tangan deh.....
sebenarnya ini hanyalah berbagi pengalaman. Begitu selesai diterapkan langsung dibagikan. supaya tips bisa lebih meyakinkan saya uji dulu melalui halaman editor CodePen.
Hapus