#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; 
}

<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>