Blogger Son Yazılar eklentisi,

 Blogunuzda yayınlanan en güncel içerikleri ziyaretçilerinize hızlı ve düzenli bir şekilde sunmak için hazırlanan bu Blogger Son Yazılar eklentisi, hem modern tasarımı hem de kullanıcı dostu yapısıyla dikkat çeker. Otomatik olarak son yazıları listeleyen bu widget sayesinde sitenizdeki yeni içerikler her zaman görünür olur.

SEO açısından önemli olan dahili linkleme (internal linking) yapısını güçlendiren bu son yazılar bölümü, ziyaretçilerin sitenizde daha fazla zaman geçirmesini sağlar. Mobil uyumlu ve hızlı çalışan yapısı sayesinde hem kullanıcı deneyimini artırır hem de arama motoru performansına katkı sağlar.

Eğer siz de Blogger altyapılı sitenizde şık ve renkli bir son yazılar widget’ı kullanmak istiyorsanız, bu kodu kolayca ekleyerek blogunuzu daha profesyonel bir görünüme kavuşturabilirsiniz.

<style>
.latestPostsBox {
  background: linear-gradient(145deg,#ffffff,#f9fafb);
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  padding: 18px;
  font-family: 'Segoe UI', Arial, sans-serif;
}

.latestPostsTitle {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
  color: #111;
  padding-bottom: 8px;
  border-bottom: 2px solid #ff0000;
}

.latestPostsList {
  list-style: none;
  margin: 0;
  padding: 0;
}

.latestPostsList li {
  margin-bottom: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  transition: 0.3s ease;
  position: relative;
  background: #ffffff;
  border-left: 4px solid #ff0000;
}

.latestPostsList li:nth-child(2) { border-left-color: #2563eb; }
.latestPostsList li:nth-child(3) { border-left-color: #16a34a; }
.latestPostsList li:nth-child(4) { border-left-color: #f59e0b; }
.latestPostsList li:nth-child(5) { border-left-color: #9333ea; }
.latestPostsList li:nth-child(6) { border-left-color: #ec4899; }

.latestPostsList li:hover {
  background: #f3f4f6;
  transform: translateX(6px);
}

.latestPostsList a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  display: block;
  line-height: 1.4;
  transition: 0.3s;
}

.latestPostsList a:hover {
  color: #ff0000;
}
</style>

<div class="latestPostsBox">
  <div class="latestPostsTitle">🔥 Son Yazılar</div>
  <ul class="latestPostsList" id="latestPosts"></ul>
</div>

<script>
fetch('/feeds/posts/default?alt=json&max-results=6')
.then(response => response.json())
.then(data => {

  const posts = data.feed.entry;
  const list = document.getElementById("latestPosts");

  posts.forEach(post => {

    const title = post.title.$t;
    const link = post.link.find(l => l.rel === 'alternate').href;

    const li = document.createElement("li");
    li.innerHTML = `<a href="${link}">${title}</a>`;

    list.appendChild(li);
  });

});
</script>