Otomatik Açılan Yazı Paneli (Sağ & Sol Versiyon)

 

Otomatik Açılan Yazı Paneli (Sağ & Sol Versiyon) – Blogger için SEO Uyumlu Çift Panel Çözümü

Blogunuzda içerik görünürlüğünü artırmak ister misiniz?
Bu çift yönlü otomatik açılan yazı paneli, Blogger için özel olarak geliştirilmiştir. Sayfanın sağ tarafında en yeni yazılar, sol tarafında ise güncellenmiş içerikler otomatik olarak gösterilir. Ziyaretçilerin dikkatini dağıtmadan içeriklerinizi öne çıkarır, kullanıcı etkileşimini ve sayfa görüntüleme oranını artırır.

🟢 Mobil uyumlu yapı
🟢 Dinamik içerik çekme (RSS/Feed)
🟢 SEO dostu başlık, açıklama ve bağlantılar
🟢 Gelişmiş kullanıcı deneyimi ile daha uzun ziyaret süresi

Blogunuzu daha etkili ve profesyonel hale getirmek için bu sağlı-sollu yazı paneli çözümünü hemen entegre edin!

Dikkat: Kod içindeki site.blogspot.com kısmını kendi blog adresinle değiştirmen gerekiyor. Örneğin: blog.blogspot.com

<style>
  .yaziPaneli {
    position: fixed;
    top: 0;
    width: 300px;
    height: 100%;
    background: #fff;
    overflow-y: auto;
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    z-index: 9999;
    transition: all 0.3s ease;
    font-family: Arial, sans-serif;
  }

  #panelSag {
    right: 0;
    border-left: 2px solid #eee;
  }

  #panelSol {
    left: 0;
    border-right: 2px solid #eee;
  }

  .panelBaslik {
    font-weight: bold;
    font-size: 16px;
    background: #222;
    color: #fff;
    padding: 10px;
    text-align: center;
  }

  .haber-kart {
    display: flex;
    flex-direction: column;
    margin: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
  }

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

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

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

  @media(max-width: 768px) {
    #panelSag, #panelSol {
      display: none; /* Mobilde panel gizlenir */
    }
  }
</style>

<!-- SAĞ PANEL (YENİ YAZILAR) -->
<div id="panelSag" class="yaziPaneli">
  <div class="panelBaslik">🆕 Yeni Yazılar</div>
  <div id="icerikSag"></div>
</div>

<!-- SOL PANEL (GÜNCELLENENLER) -->
<div id="panelSol" class="yaziPaneli">
  <div class="panelBaslik">⏱️ Güncellenenler</div>
  <div id="icerikSol"></div>
</div>

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

  fetch(feedURL)
    .then(res => res.json())
    .then(data => {
      const entries = data.feed.entry;
      const sag = document.getElementById("icerikSag");
      const sol = document.getElementById("icerikSol");

      entries.forEach(entry => {
        const title = entry.title.$t;
        const link = entry.link.find(l => l.rel === "alternate").href;
        let img = "https://via.placeholder.com/300x150";
        const published = new Date(entry.published.$t);
        const updated = new Date(entry.updated.$t);

        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 pubStr = published.toLocaleDateString("tr-TR", {
          year: 'numeric', month: 'short', day: 'numeric'
        });

        const cardHTML = `
          <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>
        `;

        // Güncellenmişse sola, değilse sağa ekle
        if (updated.getTime() > published.getTime() + 3600000) {
          sol.innerHTML += cardHTML;
        } else {
          sag.innerHTML += cardHTML;
        }
      });
    })
    .catch(err => {
      document.getElementById("icerikSag").innerHTML = "<p>Yazılar yüklenemedi.</p>";
      document.getElementById("icerikSol").innerHTML = "<p>Yazılar yüklenemedi.</p>";
      console.error("Feed alınamadı:", err);
    });
</script>

Bu şekilde gözükür. Kendi blogger adresinizi değiştirmeyi unutmayın yoksa kodunuz çalışmaz...