Blogger İçin Avatarlı Son Yorumlar Eklentisi

        Blog sitelerinde ziyaretçilerin ilgisini çeken alanlardan biri de son yorumlar bölümüdür. Bu bölüm sayesinde kullanıcılar sitenizde yapılan en son yorumları görebilir, yazılara daha hızlı erişebilir. Bu yazıda sizlere profil resmi (avatar) destekli modern bir son yorumlar eklentisi hazırlamayı göstereceğim.

Son Yorumlar Eklentisi Nedir?

    Blogger altyapısı, RSS beslemesi üzerinden yorumları listeleme imkânı sunar. Bu verileri kullanarak sitenize dinamik bir son yorumlar bölümü ekleyebilirsiniz. Hazırlayacağımız bu eklenti sayesinde:

• Yorum yazarının adı gösterilir,
• Yorumun profil resmi (avatar) eklenir,
• Yorumun kısa bir özeti ve linki yer alır.

Blogger’a Son Yorumlar Eklentisi Nasıl Eklenir?

HTML/Javascript Gadget Ekleyin

Blogger panelinizden Yerleşim → Gadget Ekle → HTML/JavaScript seçeneğini açın.

Kodları Ekleyin

Aşağıdaki kodu kopyalayarak gadget içine yapıştırın:

<div id="son-yorumlar"></div>

<style>
#son-yorumlar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
#son-yorumlar li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 15px;
  background: #f9f9f9;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
#son-yorumlar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
#son-yorumlar .yorum-icerik {
  font-size: 14px;
  line-height: 1.4;
}
#son-yorumlar .yorum-icerik strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: #333;
}
#son-yorumlar .yorum-icerik a {
  text-decoration: none;
  color: #555;
}
#son-yorumlar .yorum-icerik a:hover {
  color: #0077cc;
}
</style>

<script type="text/javascript">
/* <![CDATA[ */
function sonYorumlar(json) {
  var yorumHTML = "<ul>";
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    var yorumYazan = entry.author[0].name.$t;
    var avatar = entry.author[0].gd$image.src.replace('/s512-c/', '/s40-c/');
    var yorumLink = "";
    for (var j = 0; j < entry.link.length; j++) {
      if (entry.link[j].rel == 'alternate') {
        yorumLink = entry.link[j].href;
        break;
      }
    }
    var yorumIcerik = "";
    if ("content" in entry) {
      yorumIcerik = entry.content.$t;
    } else if ("summary" in entry) {
      yorumIcerik = entry.summary.$t;
    }
    yorumIcerik = yorumIcerik.replace(/<[^>]*>?/g, ""); 
    if (yorumIcerik.length > 80) {
      yorumIcerik = yorumIcerik.substring(0, 80) + "...";
    }
    yorumHTML += "<li>" +
                 "<img src='" + avatar + "' alt='" + yorumYazan + "'>" +
                 "<div class='yorum-icerik'>" +
                 "<strong>" + yorumYazan + "</strong>" +
                 "<a href='" + yorumLink + "' target='_blank'>" + yorumIcerik + "</a>" +
                 "</div></li>";
  }
  yorumHTML += "</ul>";
  document.getElementById("son-yorumlar").innerHTML = yorumHTML;
}
/* ]]> */
</script>

<script src="https://YOURBLOGNAME.blogspot.com/feeds/comments/default?alt=json-in-script&callback=sonYorumlar&max-results=5"></script>

Blog Adresinizi Değiştirin

Koddaki YOURBLOGNAME kısmını kendi blog adresinizle değiştirin. Örneğin: https://benimblogum.blogspot.com/

Bu adımları tamamladıktan sonra Blogger sitenizde, yorum yazarlarının avatarıyla birlikte modern görünümlü bir Son Yorumlar Eklentisi aktif olacaktır. İsterseniz CSS bölümünü düzenleyerek görünümü daha kişisel hale getirebilirsiniz.