Follow us on Facebook Instagram

How to Add Related Posts Widget with Thumbnails in Blogger: Blogging Tips

We have shown you three Different ways to add related posts widget with thumbnails in Blogger. It's depends on you which one you will be going to use.
How to Add Related Posts Widget with Thumbnails in Blogger
How to Add Related Posts Widget with Thumbnails in Blogger? - If you will talk top 5 essential things/gadget on an website, Related post widget come 3rd or 4th. Related Post widget with Thumbnails is a must have widget for Blogger to show Related Posts of present article to your readers. First thing first, Related posts gadget/widget in Blogger increase your Pages view of your website.Stylish related posts widget with thumbnails have too many advantages - firstly, It will change your website looks a Awesome, and secondly it will help you to increase traffics i.e pages view and reduce bounce rate of your blog/site. It is said that it also helps in SEO and Ranking.

Related Posts with thumbnails in a website is very essential in Blogger Post. Eventually, the related post widget was previously comes inbuild in Blogger Templates, but you have the template which you like the most and it doesn't have Related Posts section then it quit different.

Now here is a wonderful tips and tricks for displaying related post section with the Thumbnails below each and every posts of your Blog. With this amazing tips, the reader will remain on your website for a long period when they get their interesting post on your related post section/widget.

Also read - Top 5 Blogger Templates For News Websites 2022.
Also read - 10 Best Food Blog Themes or Templates for Blogger.
Also read - Top 5 Free Shopping Website Template for Blogger.

So, let us know - How to add related post widget in blogger with the thumbnails? But before we begin, Blogging Zero have shared a lots of tips and tricks regarding Blogger. so if your interested in it you may read our post on How to remove ?m=1 from blogger url, how to generate Contact us page, Disclaimer page, About us page in blogger, how to add related posts widget, feature post widget, popular posts gadget, etc, SEO and Rankings and many more.

BloggingZero will show you three different methods of Related Posts Widget with stylish Thumbnails in Blogger/Blogspot. Follow the following given steps to add stylish related posts section.

How to Add Related Posts Widget with Thumbnails

(1) First Method -

The first one is stylish, unique and responsive related posts widget for Blogger. So, we have kept it first. But now you don't need any third party widget because this advance related posts widget or gadget fulfill your all the present as well as future requirements.

Steps -

Step 1- First of all go to Blogger Dashboard.

Step 2- Then click on the Theme/Template section.

Step 3- After that click on the Edit HTML option.

Step 4- Using CTRL+F or CMD+F search for </head> tag and just above of this tag Paste the below given code-

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<style type=”text/css’>
Related Posts Code
#related-posts {
margin:0 0 0px 0!important;
padding:0px 0!important;
box-shadow: 0px 4px 4px -4px rgba(0, 0, 0, 0.7) !important;
#related-posts:hover{box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.7) !important;}
#related-posts h2{
margin: 0px !important;
padding: 20px !important;
color: #fff;
font-weight: normal;
background: #650692;
background:linear-gradient(135deg,#2403a9 0,#8f0284 44%,#006d68 100%);
#related-posts a{
font-family: arial!important;
display:inline-block!important; float:left; position:relative; overflow:hidden;
#related-posts a:hover{
color: #111;
.attb{opacity:0; height:1px!important;}
#related-posts img{
border: 1px solid #111 !important;
padding: 1px !important;
height:80px !important;
margin-right: 5px !important;
overflow: hidden;
#related-posts img:hover{
<!–Related Posts with thumbnails Scripts and Styles Start–>
<script type=’text/javascript’>
var defaultnoimage=&quot;;;
var maxresults=4;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Content:&quot;;
<script type=’text/javascript’>
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i &lt; json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
catch (error){
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== &#39;undefined&#39;) thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]=&quot;;;}
if(relatedTitles[relatedTitlesNum].length&gt;60) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+&quot;…&quot;;
for (var k = 0; k &lt;; k++) {
if ([k].rel == &#39;alternate&#39;) {
relatedUrls[relatedTitlesNum] =[k].href;
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i &lt; relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
tmp.length += 1;
tmp[tmp.length – 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length – 1] = relatedTitles[i];
tmp3[tmp3.length – 1] = thumburl[i];
relatedTitles = tmp2;
relatedUrls = tmp;
function contains_thumbs(a, e) {
for(var j = 0; j &lt; a.length; j++) if (a[j]==e) return true;
return false;
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== &#39;undefined&#39;) splitbarcolor=splittercolor; else splitbarcolor=&quot;#DDDDDD&quot;;
for(var i = 0; i &lt; relatedUrls.length; i++)
var r = Math.floor((relatedTitles.length – 1) * Math.random());
var i = 0;
if(relatedTitles.length&gt;0) document.write(&#39;&lt;h2&gt;&#39;+relatedpoststitle+&#39;&lt;/h2&gt;&#39;);
document.write(&#39;&lt;div style=&quot;clear: both;&quot;/&gt;&#39;);
while (i &lt; relatedTitles.length &amp;&amp; i &lt; 30 &amp;&amp; i&lt;maxresults) {
document.write(&#39;&lt;a style=&quot;text-decoration:none;padding:5px;float:left;&#39;);
if(i!=0) document.write(&#39;border-left:solid 0.5px &#39;+splitbarcolor+&#39;;&quot;&#39;);
else document.write(&#39;&quot;&#39;);
document.write(&#39; href=&quot;&#39; + relatedUrls[r] + &#39;&quot;&gt;&lt;img style=&quot;width:200px;height:150pxpx;border:0px;&quot; src=&quot;&#39;+thumburl[r]+&#39;&quot;/&gt;&lt;br/&gt;&lt;div style=&quot;width:90%;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font:Arial;font-weight: bold; font-size: 16px;&quot;&gt;&#39;+relatedTitles[r]+&#39;&lt;/div&gt;&lt;/a&gt;&#39;);
if (r &lt; relatedTitles.length – 1) {
} else {
r = 0;
<!–Related Posts with thumbnails Scripts and Styles End–>

NOTE; Replace 4 to any numeric number to reduce/increase posts to show.

Step 5- Now search for <div class=’post-footer-line post-footer-line-1′> and just below of it paste the given code-

<!– Related Posts with Thumbnails Code Start–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’related-posts’>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != &quot;true&quot;’>
<script class=’ripple-effect’ expr:src=’&quot;/feeds/posts/default/-/&quot; + + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;’ type=’text/javascript’/>
<script type=’text/javascript’>
<a class=”attb” href=”” title=”stylish related posts widget for blogger”><img src=”” /></a>
<!– remove –>
<!– Related Posts with Thumbnails Code End–>
Step 6- Now click on the Save option. You're Done !! :)

(2) Second Method-


Step 1- Go to Blogger Dashboard > Theme > Edit HTML

Step 2- CTRL+F for enabling search box and search for </head> tag.

Step 3- Copy and paste this given below code just above this </head> tag.

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #f2f2f2;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;} #related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;} #related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style> <script type='text/javascript' src='' /> <!-- remove --></b:if>
Step 4- Using CRTL+F search for <div class='post-footer'> just above it paste this code-

<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var currentposturl=&quot;<data:post.url/>&quot;; var maxresults=5; var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div><div class='clear'/> </b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href=''><img alt='Blogger Widgets' src=''/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->
Step 5- Edit value as how many post do you want then click on the Save buttom. And you're Done !!

(3) Third Method-


Step 1- Go to Blogger Dashboard > Template > Edit HTML.

Step 2- CRTL+F use for searching </head> tag.

Step 3- copy and paste this given code just before or above this tag.

<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
#related-posts h2{
color: white;
font-family: impact;
font-size: 15px;
margin-bottom: 0;
margin-top: 5px;
padding-top: 0px;
#related-posts a{
#related-posts a:hover{
#related-posts a:hover {
<script type='text/javascript'>
var defaultnoimage=&quot;;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
<script src='' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails -->Note:
- to change the default picture, replace the URL in blue with your own
- for displaying more than 7 posts, replace 7 value from "var maxresults=7;"
Step 4- Now find the code - <div class='post-footer'> using CRTL+F.

Step 5- and just above it copy and past the given code-
!-- Related Posts with Thumbnails Code Start>
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<!-- Related Posts with Thumbnails Code End -->

Note: change the value from 7 to what you want.

Step 6- Lastly, click on the Save option. You're Done !! Now see your blog you should have a customized Related Post widget.

We have shown you three Different methods to add related posts widget with thumbnails in Blogger. It's depends on you which one you will be going to use. Stay tune!!

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
Blogging Zero Welcome to WhatsApp chat
Howdy! How can we help you today?
Type here...