Blogger'da İlgili Gönderiler Özelliği Ekleme

Okuyucunuz bir yazınızı keyifle bitirmişken, tam sayfadan çıkacakken ona "Daha karpuz kesecektik" demenin en zarif yoludur, ilgili gönderiler özelliği. Hem onun merakını besler hem de sizin sayfalarınızda daha fazla vakit geçirmesini sağlar.

İşte tam bu yüzden bu yazıda Blogger'da ilgili gönderiler özelliği eklemeyi anlatacağım. O zaman yazıya geçelim.

CSS Kodu

Aşağıdaki kodu kopyalayıp CSS kodlarının olduğu yere ekleyin.

#related-posts-container {
  margin-top: 30px;
  margin-bottom: 30px;
  background: #fff;
  padding: 0;
}
#related-posts-container h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
  padding-bottom: 5px;
  border-bottom: 2px solid #ccc; 
  display: inline-block;
}
ul.related-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
li.related-item {
  display: flex;
  align-items: center; 
  padding: 12px 0;
  border-bottom: 1px solid #eee; 
}
li.related-item:last-child {
  border-bottom: none;
}
.related-thumb {
  width: 100px; 
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 15px;
  flex-shrink: 0; 
  background: #f1f1f1;
}
.related-link {
  text-decoration: none;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  transition: color 0.2s;
}
.related-link:hover {
  color: #1da1f2; 
}

HTML ve JavaScript Kodu

Aşağıdaki kodu İlgili Gönderiler'in gözükmesini istediğiniz yere ekleyin ve daha sonra temayı kaydedin.

<b:if cond='data:view.isPost'>
<div id='related-posts-container'> 
<b:if cond='data:post.labels'>
<h3>İlgili Gönderiler</h3>
<b:else/>
<h3>Son Gönderiler</h3>
</b:if>
<ul class='related-list' id='related-posts-content'>
<li style='color:#666; font-style:italic;'>Yükleniyor...</li>
</ul>
</div>
<script type='text/javascript'>
    //<![CDATA[
    var relatedConfig = {
      maxPosts: 3 // Listede kaç yazı olsun?
    };

    function listRelated(json) {
      var entries = json.feed.entry;
      var container = document.getElementById('related-posts-content');
      var htmlCode = "";
      var postCount = 0;
      
      if (!entries) {
        container.innerHTML = "<li>İçerik bulunamadı.</li>";
        return;
      }

      for (var i = 0; i < entries.length; i++) {
        if (postCount >= relatedConfig.maxPosts) break;
        
        var entry = entries[i];
        var postTitle = entry.title.$t;
        var postUrl = "";
        
        // URL al
        for (var k = 0; k < entry.link.length; k++) {
          if (entry.link[k].rel == 'alternate') {
            postUrl = entry.link[k].href;
            break;
          }
        }
        
        // Şu anki yazıyı atla
        if (postUrl == window.location.href) continue;

        // Görsel Kontrolü
        var imgTag = "";
        if (entry.media$thumbnail) {
           var thumbUrl = entry.media$thumbnail.url.replace('/s72-c/', '/w100-h80-c/'); 
           // Resim varsa img etiketini oluştur
           imgTag = '<img class="related-thumb" src="' + thumbUrl + '" alt="' + postTitle + '"/>';
        } 
        // Not: Resim yoksa imgTag boş kalır, böylece solda boşluk oluşmaz.

        // Liste Elemanını Oluştur (Resim + Link)
        htmlCode += '<li class="related-item">';
        // Link resmin üzerine de gelsin
        htmlCode += '<a href="' + postUrl + '" class="related-link" style="display:flex; align-items:center;">';
        htmlCode += imgTag; // Resim varsa eklenir
        htmlCode += '<span>' + postTitle + '</span>'; // Başlık
        htmlCode += '</a>';
        htmlCode += '</li>';
        
        postCount++;
      }
      
      container.innerHTML = htmlCode;
    }
    //]]>
  </script>
<b:if cond='data:post.labels and not data:post.labels.empty'>
<b:loop index='i' values='data:post.labels' var='label'>
<b:if cond='data:i == 0'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=listRelated&max-results=8"' type='text/javascript'/>
</b:if>
</b:loop>
<b:else/>
<script src='/feeds/posts/default?alt=json-in-script&callback=listRelated&max-results=8' type='text/javascript'/>
</b:if>
</b:if>

İlgili gönderilerin sayısını değiştirmek için maxPosts: 3 kodundaki rakamı değiştirerek yapabilirsiniz. Bir de yazılarınızda etiket yoksa blogunuzdaki son yazıları gösterecektir. Bu sayede o alan boş kalmayacak.

2 Yorum