Cara Membuat Tampilan Keren Statistik Blogger
4 minute read
Tampilan blog sering kali menjadi sebuah ciri khas dari sebuah blog. Memiliki tampilan blog yang bagus tentulah akan membuat pengunjung makin betah mejelajahi blog yang kalian miliki.
Salah satu hal yang sering dieluh-eluhkan adalah penggunaan data statistik blog kita, karena data statistik blog biasanya menjadi tolak ukur tingkat kepercayaan para pengunjung. Saat ini banyak sekali layanan dari pihak ketiga yang menyediakan layanan penampilan statistik, diantaranya HitStats, StatCounter, dan lainnya. Namun, banyak sekali kekurangan dari layanan pihak ketiga tersebut, salah satunya yakni data awal bisa dimanipulasi.
Untuk itu, kali ini saya akan membagikan cara membuat atau memodifikasi tampilan statistik menjadi lebih keren dan enak dipandang.
Langkah Menambah Widget Statistik
Pertama
Masuk ke dashboard atau beranda blogger
Kedua
Pilih tata letak
Ketiga
Tambahkan Gadget
Keempat
Pilih Statistik
Kelima
Pada menu Konfigurasi Widget, jangan diubah dan langsung simpan setelan.
Langkah Mengubah Tampilan Statistik
Pertama
Pilih tema
Kedua
Pilih sesuaikan kemudian edit HTML,
Ketiga
Cari kode berikut
<b:widget id='Stats1' locked='false' title='total tayang laman' type='stats'/>kemudian ganti dengan ini,
<b:widget id='Stats1' locked='false' title='' type='Stats' version='1'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2/></b:if>
<div class='widget-content'>
<div class='totalPosts'>
<h4 id='Stats1_totalPosts'>&hellip;</h4>
<span>Artikel</span>
</div>
<div class='totalComments'>
<h4 id='Stats1_totalComments'>&hellip;</h4>
<span>Respon</span>
</div>
<div class='totalCount'>
<h4 expr:id='data:widget.instanceId + "_totalCount"'>&hellip;</h4>
<span>Tampilan</span>
</div>
<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>Keempat
Letakkan kode berikut tepat di atas </head>
<style> #Stats1 {
margin: 0px 0;
border: 0;
padding: 0;
width: 100%;
text-align: center
}
.totalPosts {
display: inline;
float: left;
width: 27%;
min-height: 40px;
line-height: 40px;
padding: 10px 15px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin: 0 auto 3px auto;
}
.totalComments {
display: inline;
float: left;
width: 29%;
min-height: 40px;
line-height: 40px;
padding: 10px 15px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin: 0 auto 3px auto;
}
.totalCount {
display: inline;
float: left;
width: 41%;
min-height: 40px;
line-height: 40px;
padding: 10px 15px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
margin: 0 auto 3px auto
}
#Stats1 h4 {
padding-bottom: 10px;
margin-bottom: 10px;
font-size: 18px;
line-height: 1.2em;
color: background: rgba(9, 132, 227, .95);
text-shadow: none;
border-bottom: 8px double #000;
transition: all .3s;
width: 100%
}
#Stats1 span {
margin: 3px;
font-size: 12px;
line-height: 1.2em;
color: background: rgba(9, 132, 227, .95);
text-shadow: none;
}
</style>Simpan tema dan lihat hasilnya.
Post a Comment