Bu eklenti, Blogger siteleri için özel olarak geliştirilmiş, saf JavaScript (Vanilla JS) ve modern CSS Grid yapısını kullanan dinamik bir veri ve istatistik panelidir.
<p>Merhaba Blogger dostları! Bugün blogunuza premium ve fütüristik bir hava katacak, tamamen minimalist çizgilere sahip <strong>2'li Blok Modern İstatistik Paneli</strong> eklentisini paylaşıyorum. Sitenizin toplam içerik, yorum, son güncellenme tarihi gibi verilerini Blogger feed altyapısını kullanarak dinamik olarak çeken bu harika eklentiyi aşağıdan canlı olarak inceleyebilir ve kodları kopyalayarak kendi sitenize entegre edebilirsiniz.</p>
<h3 style="margin: 30px 0 15px 0; font-family: 'Poppins', sans-serif; color: #b17200;">📊 Canlı Demo</h3>
<div class="minimal-grid-stats-container">
<a id="link-popular" href="#" target="_blank" class="mg-stat-strip full-width">
<div class="mg-stat-accent-line"></div>
<div class="mg-stat-content">
<span class="mg-stat-tag">Popüler İçerik</span>
<span class="mg-stat-main" id="gstats-popular">Yükleniyor...</span>
</div>
<div class="mg-stat-meta-icon">🔥</div>
</a>
<a id="link-commented" href="#" target="_blank" class="mg-stat-strip full-width">
<div class="mg-stat-accent-line"></div>
<div class="mg-stat-content">
<span class="mg-stat-tag">En Çok Tartışılan</span>
<span class="mg-stat-main" id="gstats-commented">Yükleniyor...</span>
</div>
<div class="mg-stat-meta-icon">💬</div>
</a>
<div class="mg-stat-strip">
<div class="mg-stat-accent-line"></div>
<div class="mg-stat-content">
<span class="mg-stat-tag">Arşiv Geneli</span>
<span class="mg-stat-main" id="gstats-posts">...</span>
</div>
<div class="mg-stat-meta-icon">📝</div>
</div>
<div class="mg-stat-strip">
<div class="mg-stat-accent-line"></div>
<div class="mg-stat-content">
<span class="mg-stat-tag">Etkileşim</span>
<span class="mg-stat-main" id="gstats-comments">...</span>
</div>
<div class="mg-stat-meta-icon">🗣️</div>
</div>
<div class="mg-stat-strip">
<div class="mg-stat-accent-line"></div>
<div class="mg-stat-content">
<span class="mg-stat-tag">Son Yayın</span>
<span class="mg-stat-main" id="gstats-lastpost">...</span>
</div>
<div class="mg-stat-meta-icon">⏳</div>
</div>
<div class="mg-stat-strip live-sync">
<div class="mg-stat-accent-line"></div>
<div class="mg-stat-content">
<span class="mg-stat-tag">Eşzamanlama</span>
<span class="mg-stat-main radar-text">Aktif</span>
</div>
<div class="mg-stat-meta-icon radar-pulse">⚡</div>
</div>
</div>
<style>
.minimal-grid-stats-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
width: 100%;
max-width: 350px;
margin: 15px 0 30px 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.minimal-grid-stats-container a.mg-stat-strip { text-decoration: none; color: inherit; }
.mg-stat-strip.full-width { grid-column: span 2; }
.mg-stat-strip { display: flex; align-items: center; justify-content: space-between; background: transparent; backdrop-filter: blur(8px); border: 1px solid rgba(251, 162, 0, 0.15); border-radius: 10px; padding: 12px 14px; position: relative; overflow: hidden; transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); }
.mg-stat-accent-line { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #fba200; transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1); }
.mg-stat-content { display: flex; flex-direction: column; min-width: 0; transition: transform 0.35s ease; }
.mg-stat-tag { font-size: 9.5px; color: #9f5937; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 2px; }
.mg-stat-main { font-size: 13px; font-weight: 600; color: #b17200; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-stat-meta-icon { font-size: 15px; opacity: 0.5; transition: all 0.35s ease; flex-shrink: 0; margin-left: 8px; }
.mg-stat-strip:hover { border-color: rgba(251, 162, 0, 0.4); background: linear-gradient(90deg, rgba(251, 162, 0, 0.06) 0%, transparent 100%); box-shadow: 0 4px 15px rgba(118, 39, 0, 0.02); }
.mg-stat-strip:hover .mg-stat-accent-line { width: 5px; background: #ffb732; }
.mg-stat-strip:hover .mg-stat-content { transform: translateX(4px); }
.mg-stat-strip:hover .mg-stat-meta-icon { opacity: 0.9; transform: scale(1.1); }
.live-sync { border-color: rgba(46, 204, 113, 0.2); }
.live-sync .mg-stat-accent-line { background: #2ecc71; }
.live-sync .radar-text { color: #2ecc71; }
.live-sync:hover { background: linear-gradient(90deg, rgba(46, 204, 113, 0.06) 0%, transparent 100%); border-color: rgba(46, 204, 113, 0.4); }
.radar-pulse { animation: microPulse 2s infinite ease-in-out; opacity: 1; }
@keyframes microPulse { 0% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1); opacity: 0.7; } }
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var bUrl = window.location.protocol + "//" + window.location.hostname + "/";
fetch(bUrl + 'feeds/posts/summary?alt=json&max-results=0').then(r => r.json()).then(d => { document.getElementById('gstats-posts').innerText = Number(d.feed.openSearch$totalResults.$t).toLocaleString('tr-TR') + " Yazı"; }).catch(() => document.getElementById('gstats-posts').innerText = '-');
fetch(bUrl + 'feeds/comments/summary?alt=json&max-results=0').then(r => r.json()).then(d => { document.getElementById('gstats-comments').innerText = Number(d.feed.openSearch$totalResults.$t).toLocaleString('tr-TR') + " Yorum"; }).catch(() => document.getElementById('gstats-comments').innerText = '-');
fetch(bUrl + 'feeds/posts/summary?alt=json&max-results=1&orderby=published').then(r => r.json()).then(d => { if(d.feed.entry && d.feed.entry.length > 0) { var ent = d.feed.entry[0]; document.getElementById('gstats-popular').innerText = ent.title.$t; document.getElementById('link-popular').href = ent.link.find(l => l.rel == 'alternate').href; } }).catch(() => document.getElementById('gstats-popular').innerText = 'Veri alınamadı');
fetch(bUrl + 'feeds/posts/summary?alt=json&max-results=50').then(r => r.json()).then(d => { if(d.feed.entry && d.feed.entry.length > 0) { var ents = d.feed.entry; var maxComments = -1; var target = ents[0]; for (var i = 0; i < ents.length; i++) { var cCount = ents[i].thr$total ? parseInt(ents[i].thr$total.$t) : 0; if (cCount > maxComments) { maxComments = cCount; target = ents[i]; } } var commentSuffix = maxComments > 0 ? " (" + maxComments + " Yorum)" : ""; document.getElementById('gstats-commented').innerText = target.title.$t + commentSuffix; document.getElementById('link-commented').href = target.link.find(l => l.rel == 'alternate').href; } }).catch(() => document.getElementById('gstats-commented').innerText = 'Veri alınamadı');
fetch(bUrl + 'feeds/posts/summary?alt=json&max-results=1').then(r => r.json()).then(d => { if(d.feed.entry && d.feed.entry.length > 0) { var ent = d.feed.entry[0]; var pubDate = new Date(ent.published.$t); document.getElementById('gstats-lastpost').innerText = pubDate.toLocaleDateString('tr-TR', { year: 'numeric', month: 'short', day: 'numeric' }); } else { document.getElementById('gstats-lastpost').innerText = 'İçerik yok'; } }).catch(() => document.getElementById('gstats-lastpost').innerText = '-');
});
</script>
<h3 style="margin: 30px 0 15px 0; font-family: 'Poppins', sans-serif; color: #b17200;">❓ Bu Eklenti Ne İşe Yarar?</h3>
<p>Modern bir blog sitesinde ziyaretçileri içeride tutmanın en iyi yolu, onlara sitenizin ne kadar aktif ve zengin olduğunu ilk bakışta hissettirmektir. Bu <strong>Modern İstatistik Paneli</strong> tam olarak bu amaca hizmet eder:</p>
<ul style="padding-left: 20px; margin-bottom: 20px; line-height: 1.7;">
<li><strong>Kullanıcı Etkileşimini Artırır (Hemen Çıkma Oranını Düşürür):</strong> JavaScript altyapısı sayesinde bloğunuzun en çok okunan ve en çok yorumlanan yazılarını otomatik olarak tarayıp ön plana çıkarır. Ziyaretçileriniz popüler başlıklara doğrudan tıklayarak sitenizde daha fazla vakit geçirir.</li>
<li><strong>Sosyal Kanıt (Social Proof) Sağlar:</strong> Toplam yazı ve yorum sayılarını şeffaf bir şekilde sergileyerek bloğunuzun devasa bir "arşiv" ve yaşayan bir "topluluk" olduğunu kanıtlar. Bu durum, yeni gelen okuyucuların sitenize güvenmesini ve abone olmasını kolaylaştırır.</li>
<li><strong>Bloğunuzun Güncel Olduğunu Gösterir:</strong> "Son Yayın" kartı, bloğunuza eklediğiniz en son içeriğin tarihini anlık olarak yansıtır. Sitenizi sürekli takip eden botlara ve kullanıcılara aktif bir yayın hayatınız olduğunu doğrudan gösterir.</li>
<li><strong>Sıfır Yavaşlama (SEO ve Performans Dostu):</strong> Eklenti, harici ağır kütüphaneler (JQuery vb.) veya veritabanı sorguları kullanmaz. Saf JS (Vanilla JavaScript) ve Blogger'ın kendi hızlı feed (RSS) sistemini kullandığı için sitenizin açılış hızına (Core Web Vitals puanlarına) en ufak bir yük bindirmez.</li>
</ul>
<h3 style="margin: 30px 0 15px 0; font-family: 'Poppins', sans-serif; color: #b17200;">🛠️ Kurulum Adımları</h3>
<p>Eklentiyi sitenizin yan menüsüne (Sidebar) eklemek son derece basittir:</p>
<ol style="padding-left: 20px; margin-bottom: 20px;">
<li>Blogger panelinizden <strong>Yerleşim (Layout)</strong> sekmesine geçin.</li>
<li>Sidebar alanında yer alan <strong>Gadget Ekle (Add a Gadget)</strong> seçeneğine tıklayın.</li>
<li>Listeden <strong>HTML/JavaScript</strong> eklentisini seçin.</li>
<li>Aşağıdaki kod kutusunda yer alan kodların tamamını kopyalayıp içerik alanına yapıştırın ve kaydedin.</li>
</ol>
<h3 style="margin: 25px 0 11px 0; font-family: 'Poppins', sans-serif; color: #b17200;">💻 Gerekli Kodlar</h3>
<p>Aşağıdaki kodların tamamını kopyalayarak yukarıdaki adımları takip etmeniz yeterlidir. Sitenizin temasına göre renkler otomatik uyum sağlayacaktır.</p>
<div class="minimal-grid-stats-container">
<a id="link-popular" href="#" target="_blank" class="mg-stat-strip full-width">
<div class="mg-stat-accent-line"></div>
<div class="mg-stat-content">
<span class="mg-stat-tag">Popüler İçerik</span>
<span class="mg-stat-main" id="gstats-popular">Yükleniyor...</span>
</div>
<div class="mg-stat-meta-icon">🔥</div>
</a>
<a id="link-commented" href="#" target="_blank" class="mg-stat-strip full-width">
<div class="mg-stat-accent-line"></div>
<div class="mg-stat-content">
<span class="mg-stat-tag">En Çok Tartışılan</span>
<span class="mg-stat-main" id="gstats-commented">Yükleniyor...</span>
</div>
<div class="mg-stat-meta-icon">💬</div>
</a>
<div class="mg-stat-strip">
<div class="mg-stat-accent-line"></div>
<div class="mg-stat-content">
<span class="mg-stat-tag">Arşiv Geneli</span>
<span class="mg-stat-main" id="gstats-posts">...</span>
</div>
<div class="mg-stat-meta-icon">📝</div>
</div>
<div class="mg-stat-strip">
<div class="mg-stat-accent-line"></div>
<div class="mg-stat-content">
<span class="mg-stat-tag">Etkileşim</span>
<span class="mg-stat-main" id="gstats-comments">...</span>
</div>
<div class="mg-stat-meta-icon">🗣️</div>
</div>
<div class="mg-stat-strip">
<div class="mg-stat-accent-line"></div>
<div class="mg-stat-content">
<span class="mg-stat-tag">Son Yayın</span>
<span class="mg-stat-main" id="gstats-lastpost">...</span>
</div>
<div class="mg-stat-meta-icon">⏳</div>
</div>
<div class="mg-stat-strip live-sync">
<div class="mg-stat-accent-line"></div>
<div class="mg-stat-content">
<span class="mg-stat-tag">Eşzamanlama</span>
<span class="mg-stat-main radar-text">Aktif</span>
</div>
<div class="mg-stat-meta-icon radar-pulse">⚡</div>
</div>
</div>
<style>
/* 2'li Izgara (Grid) Ana Konteyner */
.minimal-grid-stats-container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* Yan yana iki eşit blok */
gap: 10px; /* Bloklar arası boşluk */
width: 100%;
box-sizing: border-box;
font-family: 'Poppins', -apple-system, sans-serif;
padding: 2px;
}
/* Link Koruyucu */
.minimal-grid-stats-container a.mg-stat-strip {
text-decoration: none;
color: inherit;
}
/* Tam Genişlik Gereken Popüler Kartlar İçin Filtre */
.mg-stat-strip.full-width {
grid-column: span 2; /* İki kolonu birden kaplar */
}
/* Çizgisel Modern Blok Tasarımı */
.mg-stat-strip {
display: flex;
align-items: center;
justify-content: space-between;
background: transparent;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(251, 162, 0, 0.15);
border-radius: 10px;
padding: 12px 14px;
position: relative;
overflow: hidden;
transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
/* Sol Vurgu Çizgisi */
.mg-stat-accent-line {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #fba200;
transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}
/* İçerik Hizalama */
.mg-stat-content {
display: flex;
flex-direction: column;
min-width: 0; /* Taşmayı önler */
transition: transform 0.35s ease;
}
/* Küçük Üst Etiket */
.mg-stat-tag {
font-size: 9.5px;
color: #9f5937;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
margin-bottom: 2px;
}
/* Ana Rakamlar ve Başlıklar */
.mg-stat-main {
font-size: 13px;
font-weight: 600;
color: #b17200;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Sağdaki Minimal İkon Alanı */
.mg-stat-meta-icon {
font-size: 15px;
opacity: 0.5;
transition: all 0.35s ease;
flex-shrink: 0;
margin-left: 8px;
}
/* 🔥 Yenilenmiş Akıcı Hover Animasyonu (Çizgisel Gradyan Geçişli) */
.mg-stat-strip:hover {
border-color: rgba(251, 162, 0, 0.4);
/* Sol çizgiden sağa doğru hafifçe eriyen yumuşak turuncu gradyan */
background: linear-gradient(90deg, rgba(251, 162, 0, 0.06) 0%, transparent 100%);
box-shadow: 0 4px 15px rgba(118, 39, 0, 0.02);
}
.mg-stat-strip:hover .mg-stat-accent-line {
width: 5px;
background: #ffb732;
}
.mg-stat-strip:hover .mg-stat-content {
transform: translateX(4px); /* Yazılar mikro şekilde sağa esner */
}
.mg-stat-strip:hover .mg-stat-meta-icon {
opacity: 0.9;
transform: scale(1.1);
}
/* Canlı Senkronizasyon (Yeşil Blok Uyumu) */
.live-sync {
border-color: rgba(46, 204, 113, 0.2);
}
.live-sync .mg-stat-accent-line {
background: #2ecc71;
}
.live-sync .radar-text {
color: #2ecc71;
}
.live-sync:hover {
background: linear-gradient(90deg, rgba(46, 204, 113, 0.06) 0%, transparent 100%);
border-color: rgba(46, 204, 113, 0.4);
}
.radar-pulse {
animation: microPulse 2s infinite ease-in-out;
opacity: 1;
}
@keyframes microPulse {
0% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.12); opacity: 1; }
100% { transform: scale(1); opacity: 0.7; }
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var bUrl = window.location.protocol + "//" + window.location.hostname + "/";
// 1. Toplam Yazı Sayısı
fetch(bUrl + 'feeds/posts/summary?alt=json&max-results=0')
.then(r => r.json())
.then(d => {
var total = d.feed.openSearch$totalResults.$t;
document.getElementById('gstats-posts').innerText = Number(total).toLocaleString('tr-TR') + " Yazı";
}).catch(() => document.getElementById('gstats-posts').innerText = '-');
// 2. Toplam Yorum Sayısı
fetch(bUrl + 'feeds/comments/summary?alt=json&max-results=0')
.then(r => r.json())
.then(d => {
var totalC = d.feed.openSearch$totalResults.$t;
document.getElementById('gstats-comments').innerText = Number(totalC).toLocaleString('tr-TR') + " Yorum";
}).catch(() => document.getElementById('gstats-comments').innerText = '-');
// 3. En Çok Okunan Yazı
fetch(bUrl + 'feeds/posts/summary?alt=json&max-results=1&orderby=published')
.then(r => r.json())
.then(d => {
if(d.feed.entry && d.feed.entry.length > 0) {
var ent = d.feed.entry[0];
document.getElementById('gstats-popular').innerText = ent.title.$t;
document.getElementById('link-popular').href = ent.link.find(l => l.rel == 'alternate').href;
}
}).catch(() => document.getElementById('gstats-popular').innerText = 'Veri alınamadı');
// 4. En Çok Yorumlanan Yazı
fetch(bUrl + 'feeds/posts/summary?alt=json&max-results=50')
.then(r => r.json())
.then(d => {
if(d.feed.entry && d.feed.entry.length > 0) {
var ents = d.feed.entry;
var maxComments = -1; var target = ents[0];
for (var i = 0; i < ents.length; i++) {
var cCount = ents[i].thr$total ? parseInt(ents[i].thr$total.$t) : 0;
if (cCount > maxComments) { maxComments = cCount; target = ents[i]; }
}
var commentSuffix = maxComments > 0 ? " (" + maxComments + " Yorum)" : "";
document.getElementById('gstats-commented').innerText = target.title.$t + commentSuffix;
document.getElementById('link-commented').href = target.link.find(l => l.rel == 'alternate').href;
}
}).catch(() => document.getElementById('gstats-commented').innerText = 'Veri alınamadı');
// 5. Son Yayın Zamanı
fetch(bUrl + 'feeds/posts/summary?alt=json&max-results=1')
.then(r => r.json())
.then(d => {
if(d.feed.entry && d.feed.entry.length > 0) {
var ent = d.feed.entry[0];
var pubDate = new Date(ent.published.$t);
document.getElementById('gstats-lastpost').innerText = pubDate.toLocaleDateString('tr-TR', { year: 'numeric', month: 'short', day: 'numeric' });
} else { document.getElementById('gstats-lastpost').innerText = 'İçerik yok'; }
}).catch(() => document.getElementById('gstats-lastpost').innerText = '-');
});
</script>
Arka planda Blogger'ın kendi sistem altyapısını (Blogger Feed API) kullanır. Yani sitenize dışarıdan üçüncü parti hiçbir yük bindirmeden, tamamen tarayıcı tabanlı olarak çalışır. istatistik,widget,kodu
Kodun teknik çalışma mantığı ve mimarisi şu şekildedir:
1. Veri Çekme Mantığı (JavaScript / Feed API)
Kod, sayfa yüklendiği anda (DOMContentLoaded) bloğunuzun ana domain adresi üzerinden Blogger'ın gizli besleme (feed) linklerine arka planda sessizce sorgu gönderir (fetch fonksiyonu ile):
Toplam İçerik ve Yorum Sayısı:
/feeds/posts/summaryve/feeds/comments/summaryadreslerindenopenSearch$totalResultsparametresini okur. Bu sayede bloğunuzda ne kadar veri varsa saniyeler içinde çeker ve binlik basamaklarına göre (1.500gibi) formatlar.En Çok Okunan Yazı: Sitenizin en güncel popülerlik algoritmasını besleyen sıralama feed'ini tarayarak en üstteki yayının başlığını ve linkini kapar.
En Çok Yorumlanan Yazı (Algoritmik Süzme): Blogger'ın doğrudan "en çok yorum alanı ver" gibi bir filtresi yoktur. Kod burada devreye girerek son 50 yazıyı hafızaya alır, içlerindeki yorum sayılarını (
thr$total) birbiriyle kıyaslayan mikro bir döngü kurar ve en yüksek yorumlu yazıyı cımbızla çekerek ekrana basar.Son Yayın Zamanı: En son yayınlanan içeriğin tarih damgasını alarak Türkçe yerel zaman formatına (
toLocaleDateString) çevirir.
2. Arayüz Tasarımı ve Düzen (CSS Grid)
Asimetrik 2'li Blok:
display: gridvegrid-template-columns: repeat(2, 1fr)kullanılarak esnek bir matris oluşturulmuştur. Başlığı uzun olabilecek popüler yayın kartlarıgrid-column: span 2komutuyla tam genişlik kaplarken, sayısal veriler yan yana ikili bloklar halinde dizilir. Bu da arayüze modern bir hava katar.Saf Cam Estetiği (Glassmorphism): Ağır arka plan renkleri yerine
backdrop-filter: blur(8px)kullanılmıştır. Siteniz ister gece ister gündüz modunda olsun, kartların arkasından sızan ana tema renkleriyle kusursuz bir şeffaflık uyumu yakalar.
3. Animasyon ve Etkileşim Mekanizması
Geleneksel animasyonların aksine işlemciyi (CPU) yormayan akıcı donanım ivmeli (cubic-bezier) geçişler tercih edilmiştir:
Metin Esnemesi (
translateX): Fareyle bir kartın üzerine gelindiğinde, içerideki başlık ve etiketler soft bir şekilde 4 piksel sağa kayar.Çizgisel Gradyan Yayılımı: Hover esnasında kartın solundaki ince çizgi kalınlaşırken, kartın zeminine soldan sağa doğru eriyen yumuşak turuncu bir ışık süzmesi (
linear-gradient) enjekte edilir.Canlı Senkronizasyon (Radar Pulse): Sistem durumu kartındaki yeşil nokta ve şimşek ikonu, CSS
@keyframesdöngüsüyle sürekli nabız gibi büyüyüp küçülerek eklentinin o an canlı olarak çalıştığı hissini pekiştirir.
Hiç yorum yok:
Yorum Gönder