How To Add Recent Posts Widget Without Image In Blogger Blog

How To Add Recent Posts Widget Without Image In Blogger Blog :

Follow the steps below :

1. Log In Blogger >> 2. Dashboard >> 3. +add a Gadget >> 4. HTML/JavaScript

Copy the below code and paste it in HTML/JavaScript content

<!-- ✅ Stylish Recent Posts Widget Without Image & Date -->

<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;

  counter-reset: postCount;

}

.recent-posts-list li {

  counter-increment: postCount;

  padding: 10px;

  margin-bottom: 10px;

  border-bottom: 1px dashed #eee;

  position: relative;

  padding-left: 30px;

}

.recent-posts-list li::before {

  content: counter(postCount) ".";

  position: absolute;

  left: 0;

  top: 10px;

  font-weight: bold;

  color: #1a73e8;

}

.recent-posts-info a {

  color: #1a73e8;

  font-weight: bold;

  font-size: 14px;

  text-decoration: none;

}

.recent-posts-info a:hover {

  text-decoration: underline;

}

</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 li = document.createElement('li');

        li.innerHTML = `

          <div class="recent-posts-info">

            <a href="${url}" title="${title}">${title}</a>

          </div>

        `;

        container.appendChild(li);

      });

    });

</script>

• Now Save the HTML/JavaScript and also Save the layout settings. 

Now refresh your blog and see that the Without Image Recent Post Widget will have been added.