İşte blogunuzda yayınlayabileceğiniz, tamamen güncellenmiş, modern standartlara uyarlanmış ve SEO odaklı yeni eklenti rehberi yazısı.

Eski yazıda bulunan ve artık çalışmayan (kapanmış olan) Yahoo Pipes script altyapısı yerine, günümüzde sorunsuz çalışan modern bir Blogger yerleşik JSON API beslemesi ve modern CSS (saf kodlar) kullanılmıştır. Kopya widget ID'si veya SVG ikon karmaşası içermez.

Blogger En Çok Yorumlanan Yayınlar (Popüler Yazılar) Eklentisi

Blogunuzdaki etkileşimi artırmanın ve ziyaretçileri en çok tartışılan konulara yönlendirmenin en etkili yollarından biri, en çok yorum alan yayınları sergilemektir. Bu rehberde, tamamen saf kodlar (CSS ve JavaScript) kullanarak blogunuza modern, hızlı ve şık bir "En Çok Yorumlanan Yayınlar" widget'ı nasıl ekleyeceğinizi anlatıyoruz.

Üstelik eskiyen altyapıları bir kenara bırakıp, doğrudan Blogger'ın kendi hızlı veritabanı beslemesini (JSON API) kullanacağız.

Adım 1: Modern CSS Kodlarını Temanıza Ekleyin

İlk olarak eklentinin blogunuzun tasarımına uyum sağlaması ve şık görünmesi için gereken CSS kodlarını ekleyelim.

Blogger kontrol panelinize giriş yapın.
Sol menüden Tema > HTML'yi Düzenle seçeneğine tıklayın.
Kod editörünün içinde CTRL + F tuşlarına basarak ]]></b:skin> kodunu aratın.
Aşağıdaki CSS kodlarını bulunca hemen ]]></b:skin> satırının üzerine yapıştırın:

/* Blogger En Cok Yorumlananlar Eklentisi */
.most-commented-wrapper {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
padding: 0;
margin: 0;
}
.most-commented-item {
display: flex;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid #f0f0f0;
transition: all 0.3s ease;
}
.most-commented-item:last-child {
border-bottom: none;
}
.most-commented-thumb {
width: 65px;
height: 65px;
object-fit: cover;
border-radius: 6px;
margin-right: 12px;
background-color: #f7f7f7;
}
.most-commented-content {
flex: 1;
min-width: 0;
}
.most-commented-title {
font-size: 14px;
font-weight: 600;
line-height: 1.4;
margin: 0 0 5px 0;
}
.most-commented-title a {
color: #333;
text-decoration: none;
transition: color 0.2s ease;
}
.most-commented-title a:hover {
color: #007bff;
}
.most-commented-meta {
font-size: 12px;
color: #777;
display: flex;
align-items: center;
}
.most-commented-count {
background: #eef2f7;
color: #333;
padding: 2px 8px;
border-radius: 12px;
font-weight: bold;
font-size: 11px;
}

Adım 2: JavaScript ve HTML Bileşenini Yerleşime Ekleyin

Şimdi blog verilerini otomatik çekecek olan güncel JavaScript altyapısını yerleşim alanına ekleyelim.

Blogger panelinizden Yerleşim sayfasına geçin.
Eklentiyi göstermek istediğiniz alandaki (genellikle sağ sütun - sidebar) Gadget Ekle bağlantısına tıklayın.
Açılan listeden HTML/JavaScript seçeneğini seçin.
Başlık kısmına En Çok Yorumlananlar veya En Çok Tartışılanlar yazın.
İçerik (Kayıt) kısmına ise aşağıdaki kod bloğunu eksiksiz yapıştırın:

<div class="most-commented-wrapper" id="most-commented-output">Yükleniyor...</div>

<script type="text/javascript">
function showMostCommented(json) {
var maxPosts = 5; // Gösterilecek yazı sayısı
var missingImg = "data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'></svg>"; // Görsel yoksa boş alan
var entries = json.feed.entry || [];

// Yorum sayısına göre büyükten küçüğe sıralama
entries.sort(function(a, b) {
var countA = parseInt(a.thr$total ? a.thr$total.$t : 0, 10);
var countB = parseInt(b.thr$total ? b.thr$total.$t : 0, 10);
return countB - countA;
});

var html = "";
var limit = Math.min(entries.length, maxPosts);

for (var i = 0; i < limit; i++) {
var entry = entries[i];
var title = entry.title.$t;
var commentCount = entry.thr$total ? entry.thr$total.$t : 0;

// Yazı linkini bulma
var postUrl = "";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
postUrl = entry.link[k].href;
break;
}
}

// Öne çıkan görseli bulma
var thumbUrl = missingImg;
if (entry.media$thumbnail) {
thumbUrl = entry.media$thumbnail.url.replace('/s72-c/', '/s150-c/'); // Daha net görsel için boyutlandırma
} else if (entry.content && entry.content.$t) {
var srcMatch = entry.content.$t.match(/src=["']([^"']+)["']/);
if (srcMatch) thumbUrl = srcMatch[1];
}

html += '<div class="most-commented-item">';
if(thumbUrl !== missingImg) {
html += '<img class="most-commented-thumb" src="' + thumbUrl + '" alt="' + title + '"/>';
}
html += '<div class="most-commented-content">';
html += '<h4 class="most-commented-title"><a href="' + postUrl + '">' + title + '</a></h4>';
html += '<div class="most-commented-meta"><span class="most-commented-count">' + commentCount + ' Yorum</span></div>';
html += '</div></div>';
}

document.getElementById("most-commented-output").innerHTML = html;
}
</script>

<script src="/feeds/posts/default?alt=json-in-script&max-results=50&callback=showMostCommented" type="text/javascript"></script>

Önemli İpuçları ve Özelleştirme

Yazı Sayısını Değiştirme: Listede 5 yerine daha fazla yazı göstermek isterseniz, JavaScript kodunun en başındaki var maxPosts = 5; satırındaki 5 değerini dilediğiniz gibi değiştirebilirsiniz.
Hız ve Optimizasyon: Kod doğrudan blogunuzun kendi iç yapısını (/feeds/posts/default) kullandığı için harici hiçbir siteye istek atmaz ve blogunuzun açılış hızını olumsuz etkilemez.

Eklenti kurulumunda herhangi bir sorun yaşarsanız veya tasarımda değişiklik yapmak isterseniz, yorumlar kısmından bana sorularınızı iletebilirsiniz! most,commented,posts

Blogger En Çok Yorumlanan Yayınlar Eklentisi / Blogger Most Commented Posts

Blogger En Çok Yorumlanan Yayınlar (Popüler Yazılar) Eklentisi

Adım 1: Modern CSS Kodlarını Temanıza Ekleyin

Adım 2: JavaScript ve HTML Bileşenini Yerleşime Ekleyin

Önemli İpuçları ve Özelleştirme