Connect with us

Best Blogger Related Posts Widget With Thumbnails

Best Blogger Related Posts Widget With Thumbnails

Blogger

Best Blogger Related Posts Widget With Thumbnails

Are you looking for the best and easily customizable Related Posts widget for your Blogger blog? You are in the right place. Now adding the Related Posts widget to your Blogger blog is not a big deal, it is simple and easily customizable.

The Related Posts widget is also called “You Might Also Like” widget. It displays the most relevant posts to the current article at the bottom of every article/post, that ultimately decreases the bounce rate and improves your website ranking on Google.

 

For your ease we have customized this widget. You don’t need to add any extra CSS or HTML. It will look good with any website, but if you want you can customize. Additionally this widget is fully responsive, means it works with any device like desktop, ipad or smartphone. The widget uses the article’s Labels to show the related posts linked with them.

 

Step 1: Add CSS

  • Copy this code and Paste in the Add CSS section.
  • Follow the steps below.

 

 

  • Login to you Blogger dashboard.
  • Click Themes.
  • Click CUSTOMIZE.
Easily Integratable "Related Posts" Widget For Blogger With Thumbnails
  • Click “Advanced”.
  • Click “Add CSS”.
Easily Integratable "Related Posts" Widget For Blogger With Thumbnails
  • Paste the CSS code into the white space.
  • Click Save.
Easily Integratable "Related Posts" Widget For Blogger With Thumbnails

 

Step 2: Add Libraries

  • Now add these 2 libraries in the Header section of your theme.
  • Follow the steps below.

 

 

  • Click Theme.
  • Click the “Downward arrow” beside CUSTOMIZE button.
Easily Integratable "Related Posts" Widget For Blogger With Thumbnails
  • Click Edit HTML.
Easily Integratable "Related Posts" Widget For Blogger With Thumbnails | "You Might Also Like" Widget
  • Now press “CTRL + F” to open the theme’s search bar and type </head> and press Enter. Search bar will appear at top-left corner of your theme.
  • Now Paste the 2 libraries just above the </head> tag as we have shown.
Easily Integratable "Related Posts" Widget For Blogger With Thumbnails | "You Might Also Like" Widget

 

Step 3: Add HTML/Javascript Code

  • Now the third and final step is to add the HTML/Javascript code in your theme.
  • Download the Zip File and open the Notepad file.
  • Copy the HTML/Javascript code from the Notepad file and follow the steps below to insert in your theme.
Easily Integratable "Related Posts" Widget For Blogger With Thumbnails | "You Might Also Like" Widget
  • Again press CTRL + F to open theme’s search bar, type <data:post.body/> and press Enter.
  • Now Pate the HTML/Javascript code under the line <data:post.body/> as we have shown here.
  • Here the widget code starts from the line “<b:if cond=’data:blog.pageType == &quot;item&quot;’>”
Easily Integratable "Related Posts" Widget For Blogger With Thumbnails
  • Once you Paste the code, scroll down slowly to find the line Var maxresults=
  • You can set the number of related posts that you want to show. In the code we have set 6 posts. You can change here.
  • Now Save your Theme.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  • Open one of your blog post and check whether you have integrated the Related Posts widget successfully or not.
  • Your Related Posts widget will be similar to this.
Easily Integratable "Related Posts" Widget For Blogger With Thumbnails

 

Note: If your blog is monetized with Google AdSense Blogger might not allow you to save your theme after you make changes in your theme, because of AdSense widgets. If you find this error read our tutorial:

 

Blogger/Blogspot latest Templates

 

  • Read our step-by-step Blogger Tutorials.
  • If you want to earn-online read our Earn-Online Tutorials.
  • If you like this post then don’t forget to share with your friends. Share your feedback in the comments section below.

 

Meer Basit is the founder of Meer’s World. He’s been running the show since launching the blog back in 2018. By background he is a computer scientist. Primarily, he creates content around blogging (WordPress, Blogger, Tumblr), SEO, affiliate programs, earn-online, reviews, eCommerce, & technology. He has got years of professional experience in web programming, computer programming, databases, data warehousing, & transcription. In general, he likes traveling, gardening, watching movies, is a passionate cricketer, creative writer, and a GSD lover.

2 Comments

2 Comments

  1. Amina

    February 17, 2022 at 3:33 am

    I can’t download the link (File) as it respond file unsupported

    • Meer Basit

      February 17, 2022 at 3:49 am

      Click the Download Icon, as shown in the tutorial to download the ZIP File. Extract the zip file in your computer and get the code. If Winrar is not installed in your computer, install it.

Leave a Reply

Your email address will not be published.

More in Blogger

To Top