Blogger’da Yazı Altına Benzer Yazılar (Related Posts) Eklentisi Nasıl Eklenir?

 Blogger sitelerinde kullanıcı deneyimini artırmanın, hemen çıkma oranını (bounce rate) düşürmenin ve ziyaretçileri sitede daha uzun süre tutmanın en etkili yolu, yazıların altına Benzer Konular eklentisi yerleştirmektir. Bu rehberde, tamamen özgün, responsive (mobil uyumlu) ve sitenizi yormayacak modern bir bento grid/kart tasarımlı benzer yazılar eklentisini adım adım sitenize nasıl entegre edeceğinizi anlatıyoruz.

Adım Adım Benzer Konular Eklentisi Kurulumu

Önemli Not: Kodlama işlemlerine başlamadan önce mutlaka Blogger panelinizden Tema > Yedekle seçeneğini kullanarak şablonunuzun bir yedeğini alın.

Adım 1: CSS Kodlarını Ekleme

Öncelikle eklentinin görsel olarak şık, modern ve mobil cihazlarla uyumlu görünmesini sağlayacak CSS kodlarını eklememiz gerekiyor.

  1. Blogger paneline giriş yapın ve sol menüden Tema sekmesine tıklayın.

  2. Özelleştir butonunun yanındaki aşağı ok simgesine basıp HTML'yi Düzenle seçeneğini seçin.

  3. Kodlar içerisinde </style> veya ]]</b:skin> etiketini bulun.

  4. Hemen üstüne aşağıdaki CSS kodlarını yapıştırın:

/* Blogger Modern Benzer Yazılar Eklentisi */
.b-benzer-yazilar {margin:30px 0; padding:0; clear:both;}
.b-benzer-yazilar h3 {font-size:20px; font-weight:700; margin:0 0 15px 0; color:#333; border-left:4px solid #007bff; padding-left:10px;}
.benzer-kart-alani {display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:15px;}
.benzer-kart {background:#fff; border:1px solid #eee; border-radius:8px; overflow:hidden; transition:all .3s ease; text-decoration:none !important;}
.benzer-kart:hover {transform:translateY(-3px); box-shadow:0 5px 15px rgba(0,0,0,0.08);}
.benzer-resim {width:100%; height:130px; object-fit:cover; background:#f4f4f4;}
.benzer-baslik {font-size:14px; font-weight:600; color:#222; padding:10px; margin:0; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

Adım 2: JavaScript Kodunu Yerleştirme

Eklentinin yazı etiketlerini (kategorileri) tarayıp otomatik olarak ilgili diğer içerikleri çekebilmesi için bir JavaScript fonksiyonuna ihtiyacı vardır.

  1. HTML düzenleme ekranında </body> etiketini bulun.

  2. Aşağıdaki JavaScript kodunu </body> etiketinin hemen üstüne ekleyin:

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var relatedImgSrc = new Array();
function related_results_labels(json) {
  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relatedUrls[relatedTitlesNum] = entry.link[k].href;
        break;
      }
    }
    if ('media$thumbnail' in entry) {
      relatedImgSrc[relatedTitlesNum] = entry.media$thumbnail.url.replace('/s72-c/', '/w300-h180-c/');
    } else {
      relatedImgSrc[relatedTitlesNum] = 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><rect width="100" height="100" fill="%23f4f4f4"/></svg>';
    }
    relatedTitlesNum++;
  }
}
function removeRelatedDuplicates() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  for (var i = 0; i < relatedUrls.length; i++) {
    if (!contains(tmp, relatedUrls[i])) {
      tmp.length += 1;
      tmp[tmp.length - 1] = relatedUrls[i];
      tmp2.length += 1;
      tmp2[tmp2.length - 1] = relatedTitles[i];
      tmp3.length += 1;
      tmp3[tmp3.length - 1] = relatedImgSrc[i];
    }
  }
  relatedUrls = tmp;
  relatedTitles = tmp2;
  relatedImgSrc = tmp3;
}
function contains(a, obj) {
  var i = a.length;
  while (i--) {
    if (a[i] === obj) {
      return true;
    }
  }
  return false;
}
function printRelatedLabels(currentUrl) {
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var i = 0;
  var maxResults = 4;
  var html = '<div class="benzer-kart-alani">';
  while (i < relatedTitles.length && i < maxResults) {
    if (relatedUrls[r] != currentUrl) {
      html += '<a class="benzer-kart" href="' + relatedUrls[r] + '">';
      html += '<img class="benzer-resim" src="' + relatedImgSrc[r] + '" alt="' + relatedTitles[r] + '"/>';
      html += '<h4 class="benzer-baslik">' + relatedTitles[r] + '</h4>';
      html += '</a>';
      i++;
    }
    if (r < relatedTitles.length - 1) {
      r++;
    } else {
      r = 0;
    }
  }
  html += '</div>';
  document.getElementById('blogger-benzer-alan').innerHTML = html;
}
//]]>
</script>

Adım 3: Eklentiyi Yazı Altında Gösterme

Son olarak, eklentinin yazı bittiğinde otomatik olarak yüklenmesini sağlayan HTML ve Blogger tema döngüsü kodlarını yerleştireceğiz.

HTML kodları içinde <data:post.body/> kodunu aratın. (Temanızda birden fazla bulunabilir, genellikle mobil ve masaüstü için ayrıdır. En alttakine veya ana içerik alanına ait olana işlem yapmalısınız).


<data:post.body/> kodunun hemen altına aşağıdaki kod bloğunu ekleyin:

<b:if cond='data:view.isPost'> <div class='b-benzer-yazilar'> <h3>Sizin İçin Seçtiğimiz Benzer Konular</h3> <div id='blogger-benzer-alan'/> <b:loop values='data:post.labels' var='label'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/> </b:loop> <script expr:style='""'> removeRelatedDuplicates(); printRelatedLabels(&apos;<data:post.url/>&apos;); </script> </div> </b:if>

Blogger benzer yazılar, blogger eklentileri, blogger seo

İlgili Başlıklar

  • Blogger Benzer Yazılar Eklentisi Kodları

  • Blogger Eklentileri ve Widget Kurulumları

  • Blog Siteleri İçin Hemen Çıkma Oranını Düşürme Yolları

  • Blogger SEO Optimizasyonu ve Site İçi Linkleme

  • HTML ve CSS ile Blog Tasarımı Özelleştirme

Anahtar Kelimeler

blogger benzer yazılar, blogger related posts, blogger eklentileri, blog site içi seo, blogger widget ekleme, responsive benzer yazılar, blogger tema düzenleme, blogger kodları, blog trafik artırma, blogger bento grid eklentisi,