Blogger Slayt Kodları (Yazı Başlığı Çekmeli)

 Blogger siten için kullanabileceğin, yazıların başlıklarını otomatik olarak çeken HTML + JavaScript tabanlı bir slayt (slider) kodu paylaşıyorum. Bu slayt, Blogger’ın feed'ini kullanarak yazı başlıklarını çeker ve basit bir kayan başlık gösterimi yapar.

https://YOURBLOG.blogspot.com kısmını kendi Blogger adresinle değiştir

<!-- SLAYT BAŞLANGIÇ -->
<div id="slider-container" style="width: 100%; overflow: hidden; background: #f1f1f1; padding: 10px;">
  <div id="slider" style="white-space: nowrap; transition: transform 0.5s;">
    <!-- Başlıklar buraya gelecek -->
  </div>
</div>

<script>
  // Blogger feed'den veri çekmek için blogunuzu buraya yazın
  const blogUrl = 'https://YOURBLOG.blogspot.com'; // <-- BURAYI KENDİ BLOG ADRESİNLE DEĞİŞTİR
  const numPosts = 5; // Gösterilecek yazı sayısı

  fetch(blogUrl + '/feeds/posts/default?alt=json-in-script&max-results=' + numPosts + '&callback=showSlider')
    .then(response => response.text())
    .then(text => {
      eval(text);
    });

  function showSlider(data) {
    const entries = data.feed.entry;
    let html = '';

    for (let i = 0; i < entries.length; i++) {
      const title = entries[i].title.$t;
      const link = entries[i].link.find(l => l.rel === 'alternate').href;

      html += `<a href="${link}" style="display:inline-block; margin-right: 30px; text-decoration:none; color:#333; font-weight:bold;">${title}</a>`;
    }

    document.getElementById('slider').innerHTML = html;

    // Basit otomatik kaydırma efekti
    let offset = 0;
    setInterval(() => {
      const slider = document.getElementById('slider');
      offset -= 1;
      slider.style.transform = `translateX(${offset}px)`;
      // Eğer çok sola kayarsa sıfırla
      if (Math.abs(offset) > slider.scrollWidth / 2) {
        offset = 0;
      }
    }, 30);
  }
</script>
<!-- SLAYT BİTİŞ -->