Cara Membuat Widget Statistik Blogger yang Keren dan Responsive

---

Blogger menyediakan gadget bawaan untuk menampilkan statistik blog. Kalau saya ingin tampilannya lebih menyatu dengan template CodeFlare, saya cukup mempertahankan data dari gadget Blogger lalu mengubah bagian visualnya dengan CSS.

Untuk artikel ini saya fokus pada dua hal: memasang gadget Blog's Stats dari menu Tata Letak, lalu memoles tampilannya supaya lebih rapi, responsive dan tetap ringan. Saya juga sertakan opsi untuk memindahkan elemen statistik ke container lain menggunakan native JavaScript tanpa jQuery.

Perlu diingat, angka pageview Blogger tidak harus sama dengan Google Analytics atau tool analitik lain karena masing-masing sistem dapat memakai metode penghitungan dan penyaringan traffic yang berbeda.

PageviewsMenampilkan total tampilan sesuai data gadget Blogger.

PostsBisa ditambahkan melalui feed Blogger jika dibutuhkan.

CommentsJumlah komentar dapat diambil dari feed komentar Blogger.

ResponsiveLayout tiga kotak turun menjadi satu kolom di layar kecil.

Informasi Singkat

---

Blogger masih menyediakan sistem gadget melalui menu Tata Letak → Tambahkan Gadget. Google juga mendokumentasikan bahwa struktur tema Blogger terdiri dari section dan widget yang bisa diedit dari template.

Untuk artikel ini saya memakai gadget statistik sebagai sumber tampilan pageview, lalu menambahkan data posting dan komentar sebagai pelengkap bila diperlukan.

Sumber: Blogger Help - Mengubah desain blog dan Blogger Help - Page elements tags.

Sebelum mengedit template
Backup tema Blogger terlebih dahulu. Jangan mengganti seluruh widget Stats jika template yang dipakai memiliki struktur khusus; lebih aman uji dahulu pada blog percobaan atau simpan salinan XML template.

Cara Memasang Gadget Blog Stats di Blogger

Saya mulai dari gadget bawaan Blogger. Alur pemasangannya masih sama dengan sistem gadget lain: buka Tata Letak, pilih area widget, klik Tambahkan Gadget, lalu pilih gadget statistik jika tersedia pada daftar gadget akun/template.

Buka Tata LetakMasuk ke dashboard Blogger lalu pilih menu Tata Letak.

Tambahkan GadgetPilih area sidebar atau footer tempat statistik akan ditampilkan.

Pilih Blog's StatsJika gadget tersedia, tambahkan lalu atur periode dan gaya tampilannya.

SimpanPeriksa hasilnya pada halaman blog sebelum melakukan modifikasi CSS.

Desain Widget Stats Ala CodeFlare

Daripada mengubah terlalu banyak markup bawaan Blogger, saya lebih memilih membuat container statistik sendiri. Pageview dari gadget Stats bisa dipindahkan ke container tersebut, sedangkan jumlah posting dan komentar dapat diambil dari feed Blogger.

128Posts

342Comments

1.2MPageviews

Preview di atas hanya contoh tampilan. Angka asli tetap diambil dari blog ketika kode widget dipasang.

HTML Widget Statistik

<div class="cfBlogStats" id="cfBlogStats">
<div class="cfBlogStat">
<i class="fa-solid fa-file-lines"></i>
<strong id="cfTotalPosts">0</strong>
<span>Posts</span>
</div>
<div class="cfBlogStat">
<i class="fa-solid fa-comments"></i>
<strong id="cfTotalComments">0</strong>
<span>Comments</span>
</div>
<div class="cfBlogStat">
<i class="fa-solid fa-eye"></i>
<strong id="cfTotalViews">0</strong>
<span>Pageviews</span>
</div>
</div>

Tentang Pageviews
ID atau struktur internal gadget Stats dapat berbeda menurut template. Karena itu bagian pageview sebaiknya diuji setelah gadget Blog's Stats benar-benar dipasang pada blog.

CSS Widget Statistik

<style>
.cfBlogStats{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px;
}
.cfBlogStat{
padding:12px;
border:1px solid rgba(0,131,218,.15);
border-radius:7px;
background:rgba(0,131,218,.05);
text-align:center;
transition:transform .25s ease,background .25s ease;
}
.cfBlogStat:hover{
transform:translateY(-2px);
background:rgba(0,131,218,.1);
}
.cfBlogStat i{
display:block;
margin-bottom:6px;
font-size:20px;
color:#0083da;
}
.cfBlogStat strong{
display:block;
font-size:20px;
line-height:1.2;
}
.cfBlogStat span{
display:block;
margin-top:3px;
font-size:15px;
}
@media(max-width:520px){
.cfBlogStats{grid-template-columns:1fr}
}
</style>

JavaScript Tanpa jQuery

Untuk jumlah posting dan komentar saya bisa memakai feed JSONP Blogger. Pageview tidak saya ambil dari API eksternal; nilainya tetap berasal dari gadget Stats yang sudah ada di halaman.

<script>
(function(){
"use strict";
window.cfStatsPosts=function(json){
var el=document.getElementById("cfTotalPosts");
if(el&&json.feed&&json.feed.openSearch$totalResults){
el.textContent=json.feed.openSearch$totalResults.$t;
}
};
window.cfStatsComments=function(json){
var el=document.getElementById("cfTotalComments");
if(el&&json.feed&&json.feed.openSearch$totalResults){
el.textContent=json.feed.openSearch$totalResults.$t;
}
};
function addFeed(src){
var s=document.createElement("script");
s.src=src;
s.async=true;
document.body.appendChild(s);
}
addFeed("/feeds/posts/default?alt=json-in-script&max-results=0&callback=cfStatsPosts");
addFeed("/feeds/comments/default?alt=json-in-script&max-results=0&callback=cfStatsComments");
var source=document.querySelector("#Stats1 .counter-wrapper, #Stats1 .widget-content");
var target=document.getElementById("cfTotalViews");
if(source&&target){
var value=(source.textContent||"").replace(/[^0-9.,KM]/gi,"").trim();
if(value)target.textContent=value;
}
})();
</script>

Struktur template bisa berbeda
Selector pageview di atas adalah fallback umum, bukan jaminan untuk semua template. Jika angka pageview tidak terbaca, inspect elemen gadget Stats lalu sesuaikan selector sumbernya.

Cara Memasang Kode di Template Blogger

Buka TemaPilih Tema lalu Edit HTML.

Pasang HTMLLetakkan container statistik di area widget atau gadget HTML/JavaScript.

Pasang CSSTaruh CSS pada area style template.

Pasang JavaScriptLetakkan script dekat penutup body agar elemen halaman sudah tersedia.

Simpan dan ujiCek angka posting, komentar dan pageview pada desktop serta mobile.

Menggabungkan Widget Stats dengan Widget Lain

Kalau saya ingin statistik berada dalam satu panel bersama widget lain, cukup pindahkan container #cfBlogStats ke wrapper yang sama. Tidak perlu lagi memakai jQuery hanya untuk memindahkan elemen.

<div class="cfSidebarPanel">
<div id="cfBlogStats">...</div>
<div id="cfTrafficFeed">...</div>
<div id="cfVisitorInfo">...</div>
</div>

<script>
(function(){
var stats=document.getElementById("cfBlogStats");
var panel=document.querySelector(".cfSidebarPanel");
if(stats&&panel&&stats.parentNode!==panel){
panel.prepend(stats);
}
})();
</script>

Kenapa Angka Blogger Stats Bisa Berbeda?

Angka statistik dari Blogger, Google Analytics, Search Console dan tool lain tidak harus identik. Masing-masing layanan dapat menghitung event, bot, sesi, tampilan halaman dan traffic internal dengan aturan yang berbeda.

Karena itu saya tidak memakai widget ini sebagai pengganti analitik lengkap. Fungsinya lebih cocok sebagai ringkasan visual sederhana untuk pengunjung atau sebagai elemen informasi pada sidebar.

Blogger StatsRingkasan internal yang terkait langsung dengan blog.

AnalyticsLebih cocok untuk analisis perilaku pengguna dan event.

Search ConsoleFokus pada performa situs di Google Search.

Apakah Widget Statistik Membantu SEO?

Widget statistik tidak otomatis membantu artikel masuk page one Google. Saya menggunakannya sebagai elemen informasi dan visual, bukan sebagai sinyal ranking.

Kalau widget menambah terlalu banyak script, request eksternal atau animasi berat, manfaat visualnya bisa kalah oleh dampak performa. Karena itu desain ini dibuat tanpa jQuery dan hanya memakai CSS sederhana plus JavaScript kecil.

Catatan SEO

---

Google Search menekankan people-first content. Jadi widget hanya saya pertahankan jika membantu pembaca atau memperjelas informasi, bukan sekadar membuat sidebar terlihat ramai.

Sumber: Google Search Central - Helpful Content.

Ringkasnya

Cara paling aman memakai widget statistik Blogger adalah mempertahankan gadget bawaan sebagai sumber data pageview, lalu mengatur tampilan melalui CSS lokal. Jika ingin menambah jumlah posting dan komentar, feed Blogger masih bisa dimanfaatkan tanpa jQuery.

Saya juga lebih memilih memisahkan data, tampilan dan engine supaya widget lebih mudah dirawat kalau struktur template berubah.