Widget statistik Blogger merupakan salah satu elemen yang bisa digunakan untuk membuat tampilan blog terlihat lebih informatif sekaligus menarik. Melalui widget ini, pengunjung dapat melihat beberapa informasi sederhana seperti jumlah artikel, jumlah komentar, jumlah kategori atau label, hingga indikator Online Now yang memberikan kesan bahwa blog sedang aktif.
Pada tutorial kali ini kita akan membuat Widget Statistik Blogger dengan tampilan modern menggunakan kombinasi warna biru, ungu, oranye dan hijau. Setiap bagian statistik dilengkapi ikon Font Awesome sehingga informasi lebih mudah dikenali secara visual.
Widget dibuat responsive dengan lebar 100%, sehingga dapat mengikuti ukuran sidebar Blogger tanpa harus menentukan lebar dalam pixel. Data artikel, komentar dan kategori diambil melalui JSON Feed Blogger, sedangkan bagian Online Now digunakan sebagai indikator aktivitas visual.
Informasi Singkat
Widget Statistik Blogger ini menggunakan HTML, CSS, JavaScript, JSON Feed Blogger dan Font Awesome 4.7. Jumlah artikel dan komentar dibaca dari metadata feed Blogger, sedangkan kategori dihitung berdasarkan label unik pada seluruh artikel.
Sumber :
Blogger
Apa Itu Widget Statistik Blogger?
Widget statistik Blogger adalah widget tambahan yang menampilkan informasi singkat mengenai aktivitas sebuah blog. Widget semacam ini biasanya ditempatkan pada sidebar agar mudah dilihat oleh pengunjung tanpa mengganggu isi utama artikel.
Pada versi yang kita buat di sini, terdapat empat informasi utama yaitu Articles, Comments, Categories dan Online Now. Masing-masing mempunyai warna serta ikon berbeda agar tampil lebih menarik.
Articles
Jumlah artikel blog
Comments
Komentar Blogger
Categories
Jumlah label unik
Online Now
Indikator aktivitas
Fitur Widget Statistik Blogger
Widget ini dirancang supaya dapat langsung digunakan pada gadget HTML/JavaScript Blogger dan tetap responsive ketika ukuran sidebar berubah.
- Responsive mengikuti lebar sidebar Blogger.
- Mengambil jumlah artikel melalui JSON Feed Blogger.
- Menampilkan jumlah komentar Blogger.
- Menghitung kategori atau label unik.
- Memiliki indikator Online Now.
- Menggunakan Font Awesome 4.7.
- Animasi angka saat statistik dimuat.
- Efek hover dan shine animation.
- Mendukung tampilan dark mode.
Cara Kerja JSON Feed Blogger
Blogger menyediakan feed yang dapat dibaca menggunakan format JSONP. Feed tersebut mengandung metadata seperti jumlah total posting dan komentar. Dengan memanfaatkan metadata tersebut, script tidak perlu mengambil seluruh isi artikel hanya untuk menghitung jumlah posting.
Blogger
JSON Feed
JavaScript
Statistics
Untuk mendapatkan jumlah artikel dan komentar digunakan parameter max-results=1. Walaupun hanya satu entry yang diminta, metadata openSearch$totalResults tetap memberikan jumlah keseluruhan data.
Sedangkan untuk menghitung kategori, script membaca label pada artikel secara bertahap kemudian menyimpan setiap nama label sebagai nilai unik. Dengan demikian satu label yang digunakan pada banyak artikel tetap dihitung sebagai satu kategori.
INFO
Bagian Online Now pada widget ini berfungsi sebagai indikator aktivitas visual. Blogger tidak menyediakan jumlah pengunjung realtime melalui JSON Feed publik. Untuk mendapatkan data pengguna aktif sebenarnya diperlukan layanan analytics atau database realtime terpisah.
Cara Memasang Widget Statistik di Blogger
Proses pemasangan widget cukup sederhana karena seluruh HTML, CSS dan JavaScript berada dalam satu kode. Widget dapat langsung ditempatkan melalui menu Tata Letak Blogger.
- Login ke akun Blogger kemudian pilih blog yang ingin digunakan.
- Pilih menu Tata Letak.
- Cari area sidebar tempat widget akan dipasang kemudian klik Tambahkan Gadget.
- Pilih gadget HTML/JavaScript.
- Copy seluruh kode Widget Statistik Blogger di bawah ini.
- Paste kode tersebut pada kotak HTML/JavaScript.
- Klik Simpan kemudian buka halaman blog untuk melihat hasilnya.
WARNING
Apabila Font Awesome 4.7 sudah digunakan pada template Blogger Anda, baris pemanggilan stylesheet Font Awesome pada kode widget dapat dihapus untuk menghindari pemanggilan resource yang sama lebih dari satu kali.
Kode Widget Statistik Blogger
Silakan copy kode berikut kemudian paste pada gadget HTML/JavaScript di sidebar Blogger.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<div class="cfStats">
<div class="cfStatsHead">
<div class="cfStatsHeadIcon"><i class="fa fa-bar-chart"></i></div>
<div class="cfStatsHeadText"><b>Blog Statistics</b><span>Live Blog Information</span></div>
</div>
<div class="cfStatsGrid">
<div class="cfStatsCard cfStatsBlue">
<div class="cfStatsIcon"><i class="fa fa-file-text-o"></i></div>
<div class="cfStatsInfo"><b id="cfStatsPosts"><i class="fa fa-spinner fa-spin"></i></b><span>Articles</span></div>
</div>
<div class="cfStatsCard cfStatsPurple">
<div class="cfStatsIcon"><i class="fa fa-comments-o"></i></div>
<div class="cfStatsInfo"><b id="cfStatsComments"><i class="fa fa-spinner fa-spin"></i></b><span>Comments</span></div>
</div>
<div class="cfStatsCard cfStatsOrange">
<div class="cfStatsIcon"><i class="fa fa-tags"></i></div>
<div class="cfStatsInfo"><b id="cfStatsLabels"><i class="fa fa-spinner fa-spin"></i></b><span>Categories</span></div>
</div>
<div class="cfStatsCard cfStatsGreen">
<div class="cfStatsLive"></div>
<div class="cfStatsIcon"><i class="fa fa-eye"></i></div>
<div class="cfStatsInfo"><b id="cfStatsOnline">1</b><span>Online Now</span></div>
</div>
</div>
<div class="cfStatsFooter">
<div class="cfStatsFooterStatus">
<div class="cfStatsSignal"><span></span><span></span><span></span><span></span></div>
<span>DATA CONNECTED</span>
</div>
<a class="cfStatsCredit" href="https://www.codeflare.net/" target="_blank" rel="noopener noreferrer">
<i class="fa fa-code"></i><span>CODEFLARE.NET</span>
</a>
</div>
</div>
<style>
.cfStats,.cfStats *,.cfStats *:before,.cfStats *:after{box-sizing:border-box}
.cfStats{width:100%;max-width:none;min-width:0;margin:0;padding:14px;position:relative;overflow:hidden;font-family:inherit;color:#333;background:linear-gradient(145deg,#fff,#f6f9fd);border:1px solid #e3e8ef;border-radius:14px;box-shadow:0 8px 25px rgba(0,0,0,.08)}
.cfStats:before{content:"";position:absolute;width:180px;height:180px;right:-100px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(0,140,255,.18),transparent 70%);pointer-events:none}
.cfStatsHead{width:100%;min-width:0;position:relative;z-index:2;display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.08)}
.cfStatsHeadIcon{width:38px;height:38px;flex:0 0 38px;display:flex;align-items:center;justify-content:center;color:#fff;border-radius:10px;background:linear-gradient(135deg,#00b2ff,#0061ff);box-shadow:0 5px 15px rgba(0,110,255,.3)}
.cfStatsHeadIcon i{font-size:16px}
.cfStatsHeadText{flex:1;min-width:0}
.cfStatsHeadText b{display:block;font-size:14px;line-height:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfStatsHeadText span{display:block;margin-top:2px;font-size:9px;color:#777;text-transform:uppercase;letter-spacing:.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfStatsGrid{width:100%;min-width:0;position:relative;z-index:2;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.cfStatsCard{width:100%;min-width:0;position:relative;overflow:hidden;display:flex;align-items:center;gap:9px;padding:11px 9px;border-radius:10px;border:1px solid transparent;transition:transform .3s ease,box-shadow .3s ease}
.cfStatsCard:hover{transform:translateY(-3px)}
.cfStatsCard:after{content:"";position:absolute;top:-50%;left:-100%;width:50px;height:200%;transform:rotate(25deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transition:left .7s ease;pointer-events:none}
.cfStatsCard:hover:after{left:140%}
.cfStatsIcon{width:35px;height:35px;flex:0 0 35px;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;border-radius:9px;color:#fff}
.cfStatsIcon i{font-size:15px}
.cfStatsInfo{flex:1;min-width:0;position:relative;z-index:2}
.cfStatsInfo b{display:block;max-width:100%;font-size:18px;line-height:20px;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.cfStatsInfo span{display:block;max-width:100%;margin-top:2px;font-size:9px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cfStatsBlue{background:linear-gradient(135deg,rgba(0,145,255,.14),rgba(0,102,255,.03));border-color:rgba(0,130,255,.16)}
.cfStatsBlue .cfStatsIcon{background:linear-gradient(135deg,#00b3ff,#0069ff);box-shadow:0 5px 13px rgba(0,110,255,.25)}
.cfStatsBlue .cfStatsInfo b{color:#087aed}
.cfStatsPurple{background:linear-gradient(135deg,rgba(156,70,255,.14),rgba(100,30,220,.03));border-color:rgba(140,70,255,.16)}
.cfStatsPurple .cfStatsIcon{background:linear-gradient(135deg,#b052ff,#7430e8);box-shadow:0 5px 13px rgba(130,50,230,.25)}
.cfStatsPurple .cfStatsInfo b{color:#8840e8}
.cfStatsOrange{background:linear-gradient(135deg,rgba(255,165,20,.15),rgba(255,90,0,.03));border-color:rgba(255,140,0,.18)}
.cfStatsOrange .cfStatsIcon{background:linear-gradient(135deg,#ffb728,#ff6900);box-shadow:0 5px 13px rgba(255,112,0,.25)}
.cfStatsOrange .cfStatsInfo b{color:#ed8100}
.cfStatsGreen{background:linear-gradient(135deg,rgba(20,205,125,.14),rgba(0,150,90,.03));border-color:rgba(0,185,105,.18)}
.cfStatsGreen .cfStatsIcon{background:linear-gradient(135deg,#25da8c,#00a968);box-shadow:0 5px 13px rgba(0,180,105,.25)}
.cfStatsGreen .cfStatsInfo b{color:#08a96c}
.cfStatsGreen .cfStatsLive{position:absolute;top:7px;right:7px;width:7px;height:7px;z-index:5;border-radius:50%;background:#18c77a;animation:cfStatsPulse 1.5s infinite}
@keyframes cfStatsPulse{0%{box-shadow:0 0 0 0 rgba(24,199,122,.55)}70%{box-shadow:0 0 0 6px rgba(24,199,122,0)}100%{box-shadow:0 0 0 0 rgba(24,199,122,0)}}
.cfStatsFooter{width:100%;min-width:0;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(0,0,0,.07);font-size:8px;color:#777;letter-spacing:.7px}
.cfStatsFooterStatus{min-width:0;display:flex;align-items:center;gap:6px;white-space:nowrap}
.cfStatsSignal{height:10px;flex:0 0 auto;display:flex;align-items:flex-end;gap:2px}
.cfStatsSignal span{display:block;width:2px;border-radius:2px;background:#008cff;animation:cfStatsSignalAni 1s infinite alternate}
.cfStatsSignal span:nth-child(1){height:3px}
.cfStatsSignal span:nth-child(2){height:5px;animation-delay:.15s}
.cfStatsSignal span:nth-child(3){height:7px;animation-delay:.3s}
.cfStatsSignal span:nth-child(4){height:10px;animation-delay:.45s}
@keyframes cfStatsSignalAni{from{opacity:.25}to{opacity:1}}
.cfStatsCredit{margin-left:auto;min-width:0;display:flex;align-items:center;gap:4px;font-size:8px;font-weight:700;letter-spacing:.6px;color:#1687ff!important;text-decoration:none!important;opacity:.75;white-space:nowrap;transition:opacity .25s ease,transform .25s ease}
.cfStatsCredit i{flex:0 0 auto;font-size:9px}
.cfStatsCredit:hover{opacity:1;transform:translateY(-1px);text-decoration:none!important}
.dark-mode .cfStats,.dark .cfStats,body.darkmode .cfStats{color:#eee;background:linear-gradient(145deg,#161c24,#10151c);border-color:rgba(255,255,255,.08)}
.dark-mode .cfStatsInfo span,.dark .cfStatsInfo span,body.darkmode .cfStatsInfo span,.dark-mode .cfStatsHeadText span,.dark .cfStatsHeadText span,body.darkmode .cfStatsHeadText span{color:#aaa}
.dark-mode .cfStatsFooter,.dark .cfStatsFooter,body.darkmode .cfStatsFooter{border-color:rgba(255,255,255,.08);color:#aaa}
.dark-mode .cfStatsCredit,.dark .cfStatsCredit,body.darkmode .cfStatsCredit{color:#58aaff!important}
@media(max-width:480px){.cfStats{padding:12px}.cfStatsGrid{gap:8px}.cfStatsCard{gap:8px;padding:10px 8px}.cfStatsIcon{width:32px;height:32px;flex-basis:32px}.cfStatsIcon i{font-size:14px}.cfStatsInfo b{font-size:17px}.cfStatsInfo span{font-size:8px}}
@media(max-width:240px){.cfStatsGrid{grid-template-columns:1fr}.cfStatsFooter{align-items:flex-start;flex-direction:column}.cfStatsCredit{margin-left:0}}
</style>
<script>
//<![CDATA[
(function(){
"use strict";
var base=location.protocol+"//"+location.host,
labels={},start=1,perPage=150,totalPosts=0;
function format(n){
try{return Number(n).toLocaleString()}catch(e){return n}
}
function animate(id,target){
var el=document.getElementById(id);
if(!el)return;
target=parseInt(target,10)||0;
if(!target){
el.innerHTML="0";
return;
}
var value=0,steps=35,inc=target/steps;
var timer=setInterval(function(){
value+=inc;
if(value>=target){
el.innerHTML=format(target);
clearInterval(timer);
}else{
el.innerHTML=format(Math.floor(value));
}
},20);
}
function load(url){
var s=document.createElement("script");
s.async=true;
s.src=url;
s.onerror=function(){
if(s.parentNode)s.parentNode.removeChild(s);
};
document.body.appendChild(s);
}
window.cfStatsPostsCallback=function(json){
try{
animate("cfStatsPosts",json.feed.openSearch$totalResults.$t);
}catch(e){
animate("cfStatsPosts",0);
}
};
window.cfStatsCommentsCallback=function(json){
try{
animate("cfStatsComments",json.feed.openSearch$totalResults.$t);
}catch(e){
animate("cfStatsComments",0);
}
};
window.cfStatsCategoryCallback=function(json){
try{
totalPosts=parseInt(json.feed.openSearch$totalResults.$t,10)||0;
var entries=json.feed.entry||[];
for(var i=0;i<entries.length;i++){
var cats=entries[i].category||[];
for(var j=0;j<cats.length;j++){
if(cats[j].term){
labels[cats[j].term]=true;
}
}
}
start+=perPage;
start<=totalPosts?loadCategories():finishCategories();
}catch(e){
finishCategories();
}
};
function loadCategories(){
load(
base+
"/feeds/posts/summary"+
"?alt=json-in-script"+
"&start-index="+start+
"&max-results="+perPage+
"&callback=cfStatsCategoryCallback"
);
}
function finishCategories(){
var total=0;
for(var key in labels){
if(Object.prototype.hasOwnProperty.call(labels,key)){
total++;
}
}
animate("cfStatsLabels",total);
}
function online(){
var el=document.getElementById("cfStatsOnline");
if(!el)return;
var n=Math.floor(Math.random()*5)+1;
el.innerHTML=n;
setInterval(function(){
n+=Math.floor(Math.random()*3)-1;
n=Math.max(1,Math.min(9,n));
el.innerHTML=n;
},7000);
}
load(base+"/feeds/posts/default?alt=json-in-script&max-results=1&callback=cfStatsPostsCallback");
load(base+"/feeds/comments/default?alt=json-in-script&max-results=1&callback=cfStatsCommentsCallback");
loadCategories();
online();
})();
//]]>
</script>
Penjelasan Bagian Statistik
Articles
Bagian Articles membaca jumlah keseluruhan artikel melalui metadata feed Blogger. Karena hanya membutuhkan jumlah data, script menggunakan max-results=1 agar request tetap ringan.
Comments
Comments membaca jumlah komentar dari sistem komentar bawaan Blogger. Apabila blog menggunakan sistem komentar eksternal seperti Giscus, Disqus atau Facebook Comments, komentar dari layanan tersebut tidak termasuk dalam jumlah ini.
Categories
Categories dihitung dari seluruh label unik pada artikel. Script mengambil daftar artikel secara bertahap, membaca setiap label kemudian menghapus label duplikat sebelum menampilkan jumlah akhirnya.
Online Now
Online Now memiliki titik hijau dengan pulse animation di pojok kanan atas. Angka akan berubah secara perlahan untuk memberikan kesan aktivitas realtime pada widget.
Mengubah Warna Widget
Warna widget dapat diubah melalui bagian CSS. Setiap statistik mempunyai class masing-masing sehingga perubahan warna dapat dilakukan tanpa mempengaruhi kotak lainnya.
Apakah Widget Statistik Membuat Blog Berat?
Secara umum widget ini cukup ringan karena jumlah artikel dan komentar hanya membaca metadata feed. Request untuk menghitung kategori memang membutuhkan data lebih banyak, tetapi proses dilakukan secara bertahap dengan maksimal 150 artikel pada setiap request.
Jika jumlah artikel masih sedikit, proses pengambilan kategori biasanya hanya memerlukan satu request. Semakin banyak artikel yang dimiliki blog, script akan melanjutkan ke halaman feed berikutnya secara otomatis.
FAQ Widget Statistik Blogger
Pertanyaan Umum
Apakah Widget Statistik Blogger ini responsive?
Ya. Widget menggunakan width:100% sehingga lebarnya otomatis mengikuti ukuran sidebar Blogger dan tetap menyesuaikan ketika dibuka melalui perangkat mobile.
Apakah jumlah artikel ditampilkan secara otomatis?
Ya. Jumlah artikel dibaca melalui JSON Feed Blogger menggunakan metadata openSearch$totalResults, sehingga tidak perlu mengubah angka secara manual setiap kali menerbitkan artikel baru.
Apakah jumlah komentar juga otomatis?
Ya, selama komentar menggunakan sistem komentar bawaan Blogger. Jika blog menggunakan Giscus, Disqus, Facebook Comments atau sistem komentar eksternal lainnya, data tersebut tidak termasuk dalam statistik komentar Blogger.
Bagaimana widget menghitung jumlah kategori?
Script membaca label pada seluruh artikel Blogger kemudian menyimpan setiap nama label secara unik. Jika satu label digunakan pada banyak artikel, label tersebut tetap dihitung sebagai satu kategori.
Mengapa widget menggunakan max-results=1?
Untuk jumlah artikel dan komentar, script hanya membutuhkan metadata openSearch$totalResults. Karena itu satu entry sudah cukup untuk memperoleh jumlah keseluruhan tanpa mengambil banyak isi feed.
Apakah Online Now menunjukkan pengunjung realtime?
Tidak. Online Now pada versi ini merupakan indikator aktivitas visual. Blogger tidak menyediakan jumlah pengguna aktif realtime melalui JSON Feed publik.
Apakah widget membutuhkan database tambahan?
Tidak. Statistik artikel, komentar dan kategori menggunakan feed bawaan Blogger sehingga tidak membutuhkan database eksternal.
Apakah Font Awesome wajib digunakan?
Font Awesome digunakan untuk menampilkan ikon pada widget. Jika Font Awesome 4.7 sudah tersedia pada template Blogger, pemanggilan stylesheet di dalam widget dapat dihapus.
Apakah warna widget dapat diubah?
Bisa. Warna Articles, Comments, Categories dan Online Now menggunakan class CSS yang berbeda sehingga masing-masing dapat dimodifikasi sesuai warna template Blogger.
Apakah widget ini membuat loading blog menjadi berat?
Widget relatif ringan untuk jumlah artikel dan komentar karena hanya membaca metadata feed. Bagian kategori memerlukan pembacaan label pada posting, tetapi script melakukannya secara bertahap.
Demikian artikel blog tentang Widget Statistik Blogger Keren dan Responsive. Semoga tutorial ini dapat membantu Anda membuat tampilan sidebar Blogger menjadi lebih informatif dan menarik. Untuk pertanyaan, kritik ataupun saran silakan tuliskan melalui kotak komentar di bawah. Akhir kata, semoga bermanfaat.
Keyword
widget statistik blogger, widget blogger keren, widget statistik blogspot, widget jumlah artikel blogger, widget jumlah komentar blogger, widget kategori blogger, widget online blogger, blogger statistics widget, widget sidebar blogger, widget blogger responsive, JSON feed blogger, widget blogger font awesome
Incoming Search Terms
cara membuat widget statistik blogger, cara menampilkan jumlah artikel blogger, cara membuat widget jumlah komentar blogger, widget statistik blogger responsive, widget statistik blogspot terbaru, widget sidebar blogger keren, cara menggunakan JSON feed blogger, widget jumlah kategori blogger, cara membuat online now blogger, kode widget statistik blogger
![[+] Codeflare Backlink Editor To Create Anchor Text With Keyword](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXC9KPkhkaNh3A4Wy-XX1I2kSj2rB2qXjmLIQktDvCxyPdUINtltp2Ih9iLVpEyb-0tYBaLGQb52bIszHmT9_etJT-awZy9IcxsBPfvQHJs7K7BI6bxz0rgcILCFxAhuL0CNbqYaS9DvELwWieNdZscUv-_8lhmqeMjcWmIRH3X38nOkbgkYK6dfySxg/s72-c/backlink%20editor.jpg)
No comments
💬 Share Your Thoughts & Join the Hall of Fame!
Punya pendapat atau tips tentang artikel ini? Tuliskan komentar kamu sekarang! 🚀
💎 Komentar yang bermanfaat, relevan, dan positif berkesempatan tampil di CodeFlare Hall of Fame dan masuk ke Top Commentators Widget.
👉 Comment now. Share your ideas. Get noticed on codeflare.net