Blogger में Recent Posts Widget कैसे Add करे ?

अगर आप अपने Blogger Blog के sidebar या footer में Recent Post Widget जोड़ना चाहते हैं, तो यह तरीका आपके लिए बिल्कुल सही है। इस widget की खास बात यह है कि यह auto updated, stylish, और mobile friendly है। जैसे ही आप नई post publish करेंगे, वह अपने-आप widget में दिखने लगेगी।

• सबसे पहले अपने Blogger Account में login करें।

• Login करने के बाद Dashboard पर जाएँ।

• अब left side menu से Layout पर क्लिक करें।

• जिस जगह पर आप Recent Post Widget दिखाना चाहते हैं (Sidebar / Footer), वहाँ + Add a Gadget पर क्लिक करें।

• अब popup में से HTML/JavaScript gadget को select करें।

• अब नीचे दिया गया Recent Post Widget Code copy करें और HTML/JavaScript content box में paste कर दें।

<!-- ✅ Stylish Auto Updated Recent Posts Widget for Blogger -->
<style>
.recent-posts-widget {
  font-family: 'Segoe UI', sans-serif;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.recent-posts-widget h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
  text-align: center;
}
.recent-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.recent-posts-list li {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px dashed #eee;
  padding-bottom: 10px;
}
.recent-posts-thumb img {
  width: 70px;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 10px;
}
.recent-posts-info {
  flex: 1;
}
.recent-posts-info a {
  color: #1a73e8;
  font-weight: bold;
  font-size: 14px;
  text-decoration: none;
}
.recent-posts-info a:hover {
  text-decoration: underline;
}
.recent-posts-info span {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}
</style>
<div class="recent-posts-widget">
  <h3>📌 Recent Posts</h3>
  <ul class="recent-posts-list" id="recent-posts-container"></ul>
</div>
<script>
fetch('/feeds/posts/default?alt=json&max-results=5')
.then(response => response.json())
.then(data => {
  const container = document.getElementById('recent-posts-container');
  const posts = data.feed.entry;
  posts.forEach(post => {
    const title = post.title.$t;
    const url = post.link.find(l => l.rel === 'alternate').href;
    const date = new Date(post.published.$t).toDateString();
    const thumbnail = post.media$thumbnail ? post.media$thumbnail.url : 'https://via.placeholder.com/70';
    const li = document.createElement('li');
    li.innerHTML = `
      <div class="recent-posts-thumb">
        <a href="${url}" title="${title}">
          <img src="${thumbnail}" alt="${title}" loading="lazy"/>
        </a>
      </div>
      <div class="recent-posts-info">
        <a href="${url}">${title}</a>
        <span>${date}</span>
      </div>
    `;
    container.appendChild(li);
  });
});
</script>

• अब Save बटन पर क्लिक करें और उसके बाद Layout Save करना न भूलें।

अब अपने Blogger Blog को refresh करें।
आप देखेंगे कि आपका Recent Post Widget successfully add हो चुका है।

अगर आप अपने Blogger Blog को professional look देना चाहते हैं और visitors को आपकी नई posts दिखाना चाहते हैं, तो यह Recent Post Widget for Blogger आपके लिए बहुत ही उपयोगी है। इसे add करने से user engagement और page views दोनों बढ़ते हैं।