Merhaba. Aşağıdaki kodu yayın sayfasında, html kodunun sonuna ekliyoruz. Kullanıcı makalenin belirli bir yüzdesini okuduğunda otomatik olarak popup önerilen postlar görünüyor. Düzenlenecek kısımlar: kodda 0.55 var, bu popup eklentinin yazının yüzde 55'i okununca görüneceği demek bunu kendinize göre değiştirin. Yine kodda label="4" kısmı var. Burada 4 ya da başka bir sayı yazıyoruz, mevcut makalede görünmesini istediğimiz önerilen makalelere de etiket kısmına aynı rakamı giriyoruz. Böylece aynı kategoride oluşturduğumuz içeriklerDEN random olarak 6 post öneriliyor.

<div id="suggested-overlay" style="display: none;">
  <div id="suggested-popup">
    <span class="close-btn" onclick="document.getElementById('suggested-overlay').style.display='none';">×</span>
    <h3>Suggested Posts</h3>
    <ul id="suggested-popup-list"></ul>
  </div>
</div>

<style>
  #suggested-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #suggested-popup {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 80%;
    overflow-y: auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    position: relative;
  }

  #suggested-popup h3 {
    margin-top: 0;
    font-size: 20px;
    color: #333;
  }

  #suggested-popup ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  #suggested-popup li {
    flex: 1 1 45%;
    background: #f9f9f9;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
  }

  #suggested-popup a {
    text-decoration: none;
    color: #333;
    font-weight: bold;
  }

  .close-btn {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 24px;
    cursor: pointer;
    color: #999;
  }

  .close-btn:hover {
    color: #222;
  }

  @media (max-width: 600px) {
    #suggested-popup li {
      flex: 1 1 100%;
    }
  }
</style>

<script>
  const blogURL = window.location.origin;
  const postURL = window.location.href.split('#')[0];
  const label = "4"; // etiketini buradan değiştir
  let popupLoaded = false;

  function shuffle(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
  }

  async function fetchSuggestedPosts() {
    const url = `${blogURL}/feeds/posts/summary/-/${label}?alt=json&max-results=20`;
    try {
      const response = await fetch(url);
      const data = await response.json();
      const entries = data.feed.entry || [];

      const posts = entries
        .map(entry => {
          const link = entry.link.find(l => l.rel === 'alternate')?.href;
          const title = entry.title.$t;
          return (!link || link === postURL) ? null : { title, link };
        })
        .filter(Boolean);

      const list = document.getElementById("suggested-popup-list");
      shuffle(posts).slice(0, 6).forEach(post => {
        const li = document.createElement("li");
        li.innerHTML = `<a href="${post.link}">${post.title}</a>`;
        list.appendChild(li);
      });

      document.getElementById("suggested-overlay").style.display = "flex";

    } catch (e) {
      console.error("Suggestion error", e);
    }
  }

  // ✅ Scroll tetikleme (sayfanın %55'ı geçilince göster)
  window.addEventListener("scroll", async () => {
    const scrollPercent = (window.scrollY + window.innerHeight) / document.body.scrollHeight;
    if (scrollPercent > 0.55 && !popupLoaded) {
      popupLoaded = true;
      await fetchSuggestedPosts();
      document.getElementById("suggested-overlay").style.display = "flex";
    }
  });
</script>