Blogger Dikey Random Post (No Thumbnail)

Blogger sitenize ekleyebileceğiniz, 5 adet rastgele gönderiyi dikey olarak listeleyen HTML ve JavaScript kodunu aşağıda bulabilirsiniz. Bu kod, sitenizdeki gönderileri rastgele seçerek kenar çubuğunuzda (sidebar) veya istediğiniz bir alanda şık bir şekilde göstermenizi sağlar.

Kurulum Adımları

  1. Blogger Yönetim Paneli'ne gidin.

  2. Düzen sekmesine tıklayın.

  3. Kodu eklemek istediğiniz alanda Gadget Ekle (Add a Gadget) seçeneğine tıklayın.

  4. Açılan pencerede HTML/JavaScript öğesini seçin.

  5. Aşağıdaki kodları kutucuğa yapıştırın ve kaydedin.

<style>
  .random-posts-widget {
    font-family: inherit;
    background: #fff;
    padding: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
  }
  .random-posts-widget h3 {
    margin-top: 0;
    font-size: 18px;
    color: #333;
    border-bottom: 2px solid #f1f1f1;
    padding-bottom: 8px;
    margin-bottom: 15px;
  }
  .random-posts-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .random-posts-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px dashed #eee;
  }
  .random-posts-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .random-posts-item img {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 4px;
    margin-right: 12px;
  }
  .random-posts-title {
    font-size: 14px;
    font-weight: 600;
    color: #222;
    text-decoration: none;
    line-height: 1.3;
    transition: color 0.3s;
  }
  .random-posts-title:hover {
    color: #007bff;
  }
</style>

<div class="random-posts-widget">
  <h3>Rastgele Yazılar</h3>
  <ul class="random-posts-list" id="random-posts-container"></ul>
</div>

<script type="text/javascript">
  // Gösterilecek yazı sayısı
  var numberOfPosts = 5;

  function getRandomPosts(json) {
    var entries = json.feed.entry;
    var total = entries.length;
    var result = [];
    var indexes = [];

    // Eğer toplam yazı sayısı istenenden azsa, hepsini göster
    if (total < numberOfPosts) {
      numberOfPosts = total;
    }

    // Rastgele benzersiz indeksler oluştur
    while (indexes.length < numberOfPosts) {
      var r = Math.floor(Math.random() * total);
      if (indexes.indexOf(r) === -1) {
        indexes.push(r);
      }
    }

    // Seçilen indekslere göre gönderi bilgilerini al
    for (var i = 0; i < indexes.length; i++) {
      var entry = entries[indexes[i]];
      var title = entry.title.$t;
      var link = '';
      var image = 'https://via.placeholder.com/65x65?text=No+Image'; // Görsel yoksa varsayılan resim

      // Doğru bağlantıyı bul (link öğesini al)
      for (var j = 0; j < entry.link.length; j++) {
        if (entry.link[j].rel === 'alternate') {
          link = entry.link[j].href;
          break;
        }
      }

      // Görseli kontrol et (yazıya ait resim varsa kullan)
      if ('media$thumbnail' in entry) {
        image = entry.media$thumbnail.url.replace('s72-c', 's100-c'); // Kaliteyi optimize eder
      } else if ('content' in entry) {
        var div = document.createElement('div');
        div.innerHTML = entry.content.$t;
        var img = div.getElementsByTagName('img');
        if (img.length > 0) {
          image = img[0].src;
        }
      }

      result.push({
        title: title,
        link: link,
        image: image
      });
    }

    // HTML içeriğini oluştur
    var container = document.getElementById('random-posts-container');
    var html = '';

    for (var i = 0; i < result.length; i++) {
      html += '<li class="random-posts-item">';
      html += '<a href="' + result[i].link + '">';
      html += '<img src="' + result[i].image + '" alt="' + result[i].title + '" />';
      html += '</a>';
      html += '<a href="' + result[i].link + '" class="random-posts-title">' + result[i].title + '</a>';
      html += '</li>';
    }

    container.innerHTML = html;
  }
</script>

<script src="/feeds/posts/default?alt=json&max-results=150&callback=getRandomPosts"></script>


Özellikler

  • var numberOfPosts = 5;  yazan kısımdaki sayıyı ne kadar post görünmesini istiyorsanız o sayıyı girin.

  • Mobil Uyumlu Tasarım: CSS yapısı sayesinde dikey ve modern bir görünüme sahiptir.

  • Akıllı Görsel Yakalama: Göreceli olarak daha önce eklenmiş küçük resimleri veya içerikteki ilk görseli otomatik olarak çeker. Eğer görsel bulunamazsa varsayılan bir görsel gösterilir.

  • Performans: Sitedeki mevcut gönderilerinizi (en fazla 150 adet) arka planda işleyerek tarayıcınızı yormadan 5 tanesini rastgele ekrana yansıtır. dikey, random, post

Hiç yorum yok:

Yorum Gönder