How to Add Related Posts Widget with Thumbnail in Blogger Website

Want to keep readers engaged on your blog? Adding "Related Posts Widget" is one of the best ways to reduce bounce rates and increase page views. In this guide, I’ll show you  easy methods to add related posts in Blogger.

Step 1: Open Blogger Dashboard → Theme → Edit HTML

Step 2: Type CTRL + F, then search ]]></b:skin>  and after it paste the below CSS code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.related-postspace{position:relative;margin:0;padding:20px 0}.related-postspace h4{margin:0 0 15px 0;font-weight:700;font-size:18px;padding:0 0 20px 0;border-bottom:1px solid rgba(0,0,0,0.05);text-align:center}.related-post-simple-2,.related-post-simple-2 li{list-style:none;margin:0;padding:5px}.related-post-simple-2 li{overflow:hidden;margin:0 auto 10px auto;transition:all .3s}.related-post-simple-2 li:hover .related-post-item-title{color:#e74c3c}.related-post-simple-2 .related-post-item-thumbnail{border-radius: 2px; width: 120px; height: 80px; max-width: none; max-height: none; background-color: transparent; object-fit: cover; border: none; float: left; margin: 2px 15px 0 0; padding: 0; transition: box-shadow 0.3s ease 0s; -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); }}.related-post-simple-2 .related-post-item-title{color:#222;font-size:16px;font-weight:700}.related-post-simple-2 .related-post-item-title:hover{color:#e74c3c}.related-post-simple-2 .related-post-item-summary{display:block;font-size:13px;margin:5px auto 0 auto;color:#999}.related-post-simple-2 .related-post-item-summary .related-post-item-more{display:none}
@media screen and (max-width:750px){
.related-post-simple-2 li{width:100%;float:none}
.related-post-simple-2,.related-post-simple-2 li{padding:5px 0}
.related-post-simple-2 .related-post-item-summary{display:none}}  
</style>  
</b:if>

Step 3: Find  <data:post.body/> and after it add the below code.

  NOTE: There may be 2 or more <data:post.body/>, we have to add after 2nd <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related-postspace' id='dtostrelated-post'/>
<div class='clear'/>
<script type='text/javascript'>
   var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
             &quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
         </b:loop></b:if>];
   var relatedPostConfig = {
         homePage: &quot;<data:blog.homepageUrl/>&quot;,
         widgetTitle: &quot;&lt;h4&gt;Related Posts&lt;/h4&gt;&quot;,
         numPosts: 5,
         summaryLength: 160,
         titleLength: &quot;auto&quot;,
         thumbnailSizew: 120,
         thumbnailSizeh: 80,
         noImage: &quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7nv7P6lLgCP5CE02EqdYcbXn4vz4aAAZmkwdNzUizi6ajH1afEm3dQsFR3vKj-kLa7se7kNibQZfs94CA9dcFkZSwUNAOrniF_2expwsai1I27uUK0IdHKPr0XTHgt1AngVGjjwddjII/s1600/noimage1.png&quot;,
         containerId: &quot;dtostrelated-post&quot;,
         newTabLink: false,
         moreText: &quot;Read More&quot;,
         widgetStyle: 2,
         callBack: function() {}
   };
</script>
<script type='text/javascript'>
   //<![CDATA[
   /*! Related Post Widget */
   var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Recommended</h4>",widgetStyle:1,homePage:"https://blogger.com",numPosts:7,summaryLength:370,titleLength:"auto",thumbnailSizew:150,thumbnailSizeh:100,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca Selengkapnya",callBack:function(){}};for(var f in relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var j=function(a){var b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return Math.floor(Math.random()*(a-b+1))+b},l=function(a){var p=a.length,c,b;if(p===0){return false}while(--p){c=Math.floor(Math.random()*(p+1));b=a[p];a[p]=a[c];a[c]=b}return a},e=(typeof labelArray=="object"&&labelArray.length>0)?"/-/"+l(labelArray)[0]:"",h=function(b){var c=b.feed.openSearch$totalResults.$t-d.numPosts,a=o(1,(c>0?c:1));j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&start-index="+a+"&max-results="+d.numPosts+"&callback=showRelatedPost")},g=function(z){var s=document.getElementById(d.containerId),x=l(z.feed.entry),A=d.widgetStyle,c=d.widgetTitle+'<ul class="related-post-simple-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></span>',v,t,w,r,u;if(!s){return}for(var q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail" in x[q]&&d.thumbnailSizew!==false)?x[q].media$thumbnail.url.replace('s72', 's200'):d.noImage;u=("summary" in x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'" class="related-post-item-more"'+b+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+v+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li class="related-post-item" tabindex="0"><a class="related-post-item-wrapper" href="'+v+'" title="'+t+'"'+b+'><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><span class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div class="related-post-item-tooltip"><img alt="" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSizew+'" height="'+d.thumbnailSizeh+'"><span class="related-post-item-summary"><span class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a title="'+t+'" href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
   //]]>
</script>
</b:if>

Step 4: Now, click Save and see the result.

Video Tutorial

🌟 Widget Features

• Automatic Updates: Shows related posts without manual editing
• Label-Based Filtering: Only displays posts with matching tags
• Mobile-Responsive: Works perfectly on all devices
• SEO-Friendly: Boosts internal linking for better rankings
• Customizable Design: Easy to modify colors and layout
• Lightweight: Doesn't slow down your blog

✅ Key Advantages of This Related Posts Widget

📈 Boost Engagement

Keeps readers on your site longer by suggesting relevant content, reducing bounce rates by up to 40%.

🔍 SEO Improvement

Strengthens internal linking structure, helping search engines discover and rank more of your content.

⚡ Automatic Updates

Works automatically - new posts appear as related content without manual updates.

📱 Mobile Optimized

Responsive design looks perfect on all devices, from desktops to smartphones.

🎨 Customizable

Easily modify colors, layout and number of posts to match your blog's design.