Blogger Blogunuza Son Yazılar Nasıl Eklenir? (HTML Kodu ile)

 

Blogger Blogunuza Son Yazılar Nasıl Eklenir? (HTML Kodu ile)

Blogunuzda okuyucuların en son yayınladığınız içeriklere kolayca ulaşmasını sağlamak, site trafiğini ve etkileşimini artırmanın önemli yollarından biridir. Blogger'da "Son Yazılar" bölümünü HTML/JavaScript gadget'ı kullanarak ekleyebilirsiniz. İşte size basit ve yaygın olarak kullanılan bir yöntem ve HTML kodu:

Bu yöntem, Blogger'ın kendi yayın akışını (feed) kullanarak son yazılarınızı listeleyecektir.

Adım 1: Blogger Kontrol Panelinize Giriş Yapın

• blogger.com adresine gidin ve hesabınıza giriş yapın.
• Sol menüden "Yerleşim" (Layout) sekmesine tıklayın.

Adım 2: Gadget Ekleme

• Sayfanızda "Son Yazılar" bölümünü göstermek istediğiniz alanı bulun (örneğin, kenar çubuğu - sidebar).
• Bu alandaki "+ Gadget Ekle" (Add a Gadget) linkine tıklayın.
• Açılan pencereden "HTML/JavaScript" seçeneğini bulun ve tıklayın.

Adım 3: HTML Kodunu Yapıştırma

Aşağıdaki HTML ve JavaScript kodunu "İçerik" (Content) bölümüne yapıştırın:

<div id="recent-posts">
  <h3>Son Yazılar</h3>
  <ul id="recent-posts-list"></ul>
</div>

<script type="text/javascript">
  function showRecentPosts(json) {
    var numPosts = 5; // Gösterilecek yazı sayısı
    var list = document.getElementById('recent-posts-list');
    for (var i = 0; i < numPosts && i < json.feed.entry.length; i++) {
      var entry = json.feed.entry[i];
      var postTitle = entry.title.$t;
      var postUrl = '';
      for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          postUrl = entry.link[k].href;
          break;
        }
      }
      var listItem = document.createElement('li');
      var link = document.createElement('a');
      link.href = postUrl;
      link.textContent = postTitle;
      listItem.appendChild(link);
      list.appendChild(listItem);
    }
  }

  // Blogunuzun adresini buraya girin (örneğin: https://blogunuzunadi.blogspot.com)
  var blogUrl = "BLOGUNUZUN_ADRESİ";
  var script = document.createElement('script');
  script.src = blogUrl + '/feeds/posts/default?alt=json-in-script&callback=showRecentPosts&max-results=5'; // max-results ile eşleşmeli
  document.getElementsByTagName('head')[0].appendChild(script);
</script>

<style type="text/css">
  #recent-posts h3 {
    /* Başlık stilini buradan değiştirebilirsiniz */
    font-size: 1.2em;
    margin-bottom: 10px;
  }
  #recent-posts-list {
    list-style-type: none; /* Liste işaretlerini kaldırır */
    padding: 0;
  }
  #recent-posts-list li {
    margin-bottom: 8px; /* Yazılar arası boşluk */
  }
  #recent-posts-list li a {
    text-decoration: none; /* Link alt çizgisini kaldırır */
    color: #337ab7; /* Link rengi */
  }
  #recent-posts-list li a:hover {
    text-decoration: underline; /* Fare üzerine gelince alt çizgi */
    color: #23527c; /* Fare üzerine gelince link rengi */
  }
</style>

Önemli Değişiklikler:

1. BLOGUNUZUN_ADRESİ Değiştirin: Kodun içindeki var blogUrl = "BLOGUNUZUN_ADRESİ"; satırında bulunan BLOGUNUZUN_ADRESİ kısmını kendi blogunuzun tam adresiyle değiştirin (örneğin, https://örnekblogum.blogspot.com).
2. Gösterilecek Yazı Sayısı: var numPosts = 5; satırındaki 5 sayısını, göstermek istediğiniz son yazı adediyle değiştirebilirsiniz. Bu sayıyı ayrıca script.src içindeki max-results=5 değeriyle de eşleştirmeniz önemlidir.
3. Başlık (Opsiyonel): <h3>Son Yazılar</h3> kısmındaki "Son Yazılar" metnini istediğiniz gibi değiştirebilirsiniz (örneğin, "Yeni Eklenenler", "Güncel Yazılar").

Adım 4: Kaydetme

• "Başlık" (Title) alanına gadget'ınız için bir başlık yazabilirsiniz (örneğin, "Son Yazılar") veya boş bırakabilirsiniz (kod içindeki <h3> başlığı kullanılacaktır).
• "Kaydet" (Save) butonuna tıklayın.
• Yerleşim sayfasında da değişiklikleri kaydetmek için sağ altta bulunan kaydet simgesine tıklayın.

Artık blogunuzda son yazılarınızı gösteren bir bölüm olacaktır.

Görünümü Özelleştirme (CSS ile):

Yukarıdaki kodun içinde temel <style> etiketleri arasında bazı CSS kodları bulunmaktadır. Bu kodları kullanarak "Son Yazılar" bölümünüzün görünümünü (başlık boyutu, yazı rengi, liste stili vb.) temanıza uygun şekilde daha da özelleştirebilirsiniz.

Bu, Blogger'da son yazıları göstermenin temel bir yoludur. Daha gelişmiş özellikler (örneğin, küçük resimler, yazı özetleri) için farklı JavaScript kodları veya üçüncü parti widget'lar da bulunmaktadır. Ancak bu basit kod, çoğu kullanıcı için yeterli olacaktır.