Otomatik Açılan Yazı Paneli

 

✅ Otomatik Açılan Yazı Paneli – Blogger için SEO Uyumlu Dinamik İçerik Kutusu

Blogger blogunuzu daha profesyonel ve dikkat çekici hale getirin! Bu otomatik açılan yazı paneli, blog sayfanız yüklendikten sonra en yeni içerikleri ve güncellenen yazıları dinamik bir şekilde ziyaretçilerinize sunar. Panel, mobil uyumludur ve kullanıcı deneyimini bozmadan 10 saniye içinde otomatik olarak kapanır.

🚀 Özellikleri:

• Blogger uyumlu HTML, CSS ve JavaScript yapı

• Otomatik yazı çekme (RSS/Atom feed üzerinden)

• Güncellenen içerikler ayrı listelenir

• Hızlı yükleme, hafif yapı, mobil dostu tasarım

• SEO için optimize edilmiş başlık, bağlantı ve yapı

Bu widget, blogunuza sadece görsellik değil aynı zamanda daha uzun ziyaret süresi, daha fazla sayfa görüntüleme ve arama motorlarında daha yüksek görünürlük kazandırır.

Kullanım Alanları:

• Haber blogları

• Kişisel içerik platformları

• Güncel yazı odaklı bloglar

• Duyuru ya da kampanya tanıtımları

Blogunuzu öne çıkarmak için bu otomatik slide-in paneli hemen entegre edin!

Dikkat: Kod içindeki YOURBLOG.blogspot.com kısmını kendi blog adresinle değiştirmen gerekiyor. Örneğin: site.blogspot.com gibi. Yoksa kodunuz çalışmaz..!

<!-- Otomatik Açılan ve 10 Sn'de Kapanan Yazı Paneli -->
<style>
  #haberPaneli {
    position: fixed;
    top: 0;
    right: -350px;
    width: 350px;
    height: 100%;
    background: #fff;
    box-shadow: -2px 0 10px rgba(0,0,0,0.2);
    overflow-y: auto;
    transition: right 0.4s ease;
    z-index: 9999;
  }

  #haberPaneli.open {
    right: 0;
  }

  .haber-kart {
    display: flex;
    flex-direction: column;
    margin: 15px;
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    transition: box-shadow 0.3s;
  }

  .haber-kart:hover {
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }

  .haber-kart img {
    width: 100%;
    height: auto;
    display: block;
  }

  .haber-kart .haber-baslik {
    padding: 10px 10px 0;
    font-weight: bold;
    color: #333;
    font-size: 16px;
  }

  .haber-kart .haber-tarih {
    padding: 0 10px 10px;
    color: #888;
    font-size: 13px;
  }

  #dahaFazla {
    display: block;
    margin: 10px auto 20px;
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    color: #0077cc;
  }

  .bolum-baslik {
    font-size: 15px;
    font-weight: bold;
    padding: 10px 15px 0;
    color: #444;
    border-top: 1px solid #eee;
  }

  @media (max-width: 400px) {
    #haberPaneli {
      width: 100%;
    }
  }
</style>

<div id="haberPaneli">
  <div id="yeniYazilar">
    <div class="bolum-baslik">🆕 En Yeni Yazılar</div>
    <div id="yeniIcerik"></div>
  </div>
  <div id="guncellenenYazilar" style="display: none;">
    <div class="bolum-baslik">⏱️ Güncellenen Yazılar</div>
    <div id="guncelIcerik"></div>
  </div>
  <a id="dahaFazla" href="https://YOURBLOG.blogspot.com" target="_blank">Tüm Yazılar →</a>
</div>

<script>
  const feedURL = "https://YOURBLOG.blogspot.com/feeds/posts/default?alt=json&max-results=10";

  // Otomatik aç ve sonra kapat
  window.addEventListener("load", () => {
    const panel = document.getElementById("haberPaneli");
    setTimeout(() => {
      panel.classList.add("open");
    }, 2000);

    setTimeout(() => {
      panel.classList.remove("open");
    }, 12000); // Açıldıktan 10 saniye sonra kapanır
  });

  fetch(feedURL)
    .then(res => res.json())
    .then(data => {
      const yeniContainer = document.getElementById("yeniIcerik");
      const guncelContainer = document.getElementById("guncelIcerik");
      const guncelBolum = document.getElementById("guncellenenYazilar");

      const entries = data.feed.entry;
      let guncelSayisi = 0;

      entries.forEach(entry => {
        const title = entry.title.$t;
        const link = entry.link.find(l => l.rel === "alternate").href;
        let img = "https://via.placeholder.com/350x200";

        if (entry.media$thumbnail) {
          img = entry.media$thumbnail.url;
        } else if (entry.content && entry.content.$t.includes("<img")) {
          const match = entry.content.$t.match(/<img.*?src="(.*?)"/);
          if (match && match[1]) img = match[1];
        }

        const published = new Date(entry.published.$t);
        const updated = new Date(entry.updated.$t);
        const pubStr = published.toLocaleDateString("tr-TR", {
          year: 'numeric', month: 'short', day: 'numeric'
        });

        const card = `
          <div class="haber-kart">
            <a href="${link}" target="_blank">
              <img src="${img}" alt="${title}">
              <div class="haber-baslik">${title}</div>
              <div class="haber-tarih">${pubStr}</div>
            </a>
          </div>
        `;

        if (updated.getTime() > published.getTime() + 3600000) {
          guncelContainer.innerHTML += card;
          guncelSayisi++;
        } else {
          yeniContainer.innerHTML += card;
        }
      });

      if (guncelSayisi > 0) {
        guncelBolum.style.display = "block";
      }
    })
    .catch(err => {
      document.getElementById("yeniIcerik").innerHTML = "<p>Yazılar yüklenemedi.</p>";
      console.error("Feed çekilemedi:", err);
    });
</script>

Kodu Bloggera eklediğinizde Bu şekilde gözükür...

Görüntüsü bu şekilde olur...

Bu kısım açılma saniyesini ve kapanma saniyesini verir. Kendi isteğinize göre bu kısmı kodun içinden değiştirebilirsiniz... setTimeout(() => { panel.classList.add("open"); }, 1000); setTimeout(() => { panel.classList.remove("open"); }, 12000); // Açıldıktan 10 saniye sonra kapanır });