All Tutorials

Your One-Stop Destination for Learning and Growth

Creating a Simple Recent Posts Widget with Thumbnails in Blogger

Blogger, the free blogging platform by Google, is an excellent choice for those who want to share their thoughts and ideas with the world without having to worry about the technicalities of website development. One feature that can make your blog more engaging and attractive is a recent posts widget with thumbnails. In this tutorial, we will walk you through the steps to create this simple yet effective widget for your Blogger site.

Prerequisites

Before we begin, ensure the following:

  1. You have a Blogger account and a blog set up.
  2. Your blog posts have featured images.
  3. You are familiar with HTML and CSS.
  4. You have access to an image editor like Adobe Photoshop or GIMP to resize images.

Step 1: Create a new page for the widget

First, log in to your Blogger account and navigate to your Dashboard. Click on "Pages," then click on "New Page." Name this page something like "recent-posts" or "recent-posts-widget" for easy identification. Save and Publish the page.

Step 2: Edit the new page

Once you've created the new page, edit it by clicking on "Edit." Replace all the existing HTML content with the following code:

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Recent Posts</title>
    <link href='style.css' rel='stylesheet' type='text/css'>
  </head>
  <body>
    <h1>Recent Posts</h1>
    <div id="posts"></div>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
    <script src='script.js'></script>
  </body>
</html>

This code sets up the basic structure of our recent posts widget, including an external CSS file and JavaScript file. Save the page.

Step 3: Create the stylesheet (style.css)

Create a new file named "style.css" in your blog's "Assets" folder or subfolder within "Layouts." Add some basic styles to make our widget look presentable:

h1 { text-align: center; }
#posts { width: 100%; max-width: 800px; margin: auto; }
.post { border-bottom: 1px solid #ccc; padding: 20px 0; }
.post h3 { margin: 0; }
.post img { width: 100%; height: auto; }

Save the file.

Step 4: Create the JavaScript (script.js)

Create a new file named "script.js" in your blog's "Assets" folder or subfolder within "Layouts." In this file, we will use jQuery to fetch recent posts and display their thumbnails:

$(document).ready(function() {
  $.getJSON('/feeds/posts/default?sortorder=DESC&max-results=5', function(data) {
    $('#posts').empty();
    data.feed.entry.forEach(function(item, i) {
      $('#posts').append('<div class="post"><h3><a href="' + item.link['$'].href + '">' + item.title.$t + '</a></h3><img src="' + item.media$thumbnail['$'].url + '" alt="' + item.title.$t + '"></div>');
    });
  });
});

This code uses the Google Feed API to fetch the latest five blog posts and appends their titles and thumbnails as HTML elements within the #posts container. Save the file.

Step 5: View your recent posts widget

To view your new recent posts widget, go to your Blogger Dashboard, click on "Layout," then click on "Add a gadget." Choose "HTML/JavaScript" and paste in the following code:

<div style="width: 100%; max-width: 800px; margin: auto;">
  <iframe src="https://yourblog.blogspot.com/recent-posts" frameborder="no" scrolling="no" width="100%" height="350"></iframe>
</div>

Replace "yourblog.blogspot.com" with your blog's URL. Save the gadget and add it to a widget area, such as the sidebar or footer, depending on your preference.

Conclusion

By following these steps, you have successfully created a simple recent posts widget with thumbnails for your Blogger site. This addition not only makes your blog more visually appealing but also helps keep your readers engaged by providing easy access to your latest content. Happy blogging!

Published July, 2017