Çok Tıklananlar (Popüler Yazılar) Blogger HTML Kodu

 Aşağıda "Çok Tıklananlar" kodunu hem görsel hem de tasarımsal açıdan özelleştirilmiş bir sürüm olarak gözüküyor. Modern görünümlü kart yapısı, yuvarlak köşeler, gölgeli kutular, tıklanabilir başlıklar ve minimalist bir görünüm içeriyor.

<!-- Çok Tıklananlar Başlık + Liste --> <div id="populer-yazilar" style="max-width:650px;margin:auto;"> <h3 style="font-size:20px; border-bottom:2px solid #ff9800; padding-bottom:5px; margin-bottom:15px;"> 🔥 Çok Tıklananlar </h3> <div id="populer-listesi"></div> </div> <script> // Kendi Blogger adresinle değiştir const blogURL = "https://seninblogadresin.blogspot.com"; const maxPosts = 5; fetch(`${blogURL}/feeds/posts/default?alt=json&max-results=20`) .then(res => res.json()) .then(data => { const posts = data.feed.entry || []; const populer = posts.map(entry => { return { title: entry.title.$t, link: entry.link.find(l => l.rel === "alternate").href, thumbnail: (entry.media$thumbnail && entry.media$thumbnail.url) || "https://via.placeholder.com/90", comments: parseInt((entry.thr$total && entry.thr$total.$t) || 0) }; }).sort((a, b) => b.comments - a.comments).slice(0, maxPosts); const container = document.getElementById("populer-listesi"); populer.forEach(post => { const card = document.createElement("div"); card.style.cssText = ` display:flex; align-items:center; margin-bottom:15px; padding:10px; border-radius:10px; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,0.08); `; card.innerHTML = ` <img src="${post.thumbnail}" alt="${post.title}" style="width:90px; height:90px; object-fit:cover; border-radius:8px; margin-right:12px;"> <div style="flex:1;"> <a href="${post.link}" target="_blank" style="text-decoration:none; color:#333; font-size:16px; font-weight:600;"> ${post.title} </a> <div style="font-size:13px; color:#888; margin-top:4px;">💬 ${post.comments} yorum</div> </div> `; container.appendChild(card); }); }) .catch(err => console.warn("Popüler yazılar yüklenemedi:", err)); </script>

🎨 Tasarım Özellikleri:

Özellik	Açıklama
🧱 Kart stili	Her yazı ayrı kutucuk şeklinde
🎨 Gölge efekti	Hafif gölge ile modern görünüm
🖼️ Görsel	Otomatik küçük resim (veya placeholder)
🔗 Tıklanabilir başlık	Yeni sekmede açılır
💬 Yorum sayısı	Popülerliği belirleyen kriter olarak gösterilir

---

📌 Kullanım Talimatı:

• https://seninblogadresin.blogspot.com kısmını kendi blog adresinle değiştir.

• Blogger'da bir gadget olarak veya HTML bölümüne ekleyebilirsin.