Blogger blogpost - Amazing Responsive Related Posts with thumbnails

 

Step 1 : find ]]></b:skin>

after that paste the code below

Step 1 Code:

<!-- Related Posts with thumbnails Scripts and Styles Start -->
<style type='text/css'>
/* Related Posts CSS */
.pre-head{font-size:20px; margin:25px 6px 10px; font-weight:500;}
.related-pre{margin:0 0 25px; overflow:hidden;}
.related-pre a{ margin:6px 6px; float:left; width:31.32%; height:150px; position:relative;}
.related-pre img{ height: 100%; width: 100%;}
.pre-title{ background: rgba(0, 0, 0, 0.5); color: #fff; font-size:13px;line-height:21px; overflow:hidden; height: 25px; bottom:0; padding: 9px 14px 20px; text-align: left; width: 80%; position:absolute;}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[

// related post widget
var relatedTitles = new Array(); var relatedTitlesNum = 0; var relatedUrls = new Array(); var thumburl = new Array(); function related_results_labels_thumbs(e) {for (var t = 0; t < e.feed.entry.length; t++) { var l = e.feed.entry[t]; relatedTitles[relatedTitlesNum] = l.title.$t; try { thumburl[relatedTitlesNum] = l.gform_foot.url } catch (r) { s = l.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), thumburl[relatedTitlesNum] = -1 != a && -1 != b && -1 != c && "" != d ? d : "http://1.bp.blogspot.com/-Nit_LiUtMHE/VflsSxNxENI/AAAAAAAADiM/CuVVm4SVl8E/s320/No-image-bt9.jpg"}
relatedTitles[relatedTitlesNum].length > 47 && (relatedTitles[relatedTitlesNum] = relatedTitles[relatedTitlesNum].substring(0, 47) + "..."); for (var i = 0; i < l.link.length; i++) "alternate" == l.link[i].rel && (relatedUrls[relatedTitlesNum] = l.link[i].href, relatedTitlesNum++) }}
function removeRelatedDuplicates_thumbs() {for (var e = new Array(0), t = new Array(0), l = new Array(0), r = 0; r < relatedUrls.length; r++) contains_thumbs(e, relatedUrls[r]) || (e.length += 1, e[e.length - 1] = relatedUrls[r], t.length += 1, l.length += 1, t[t.length - 1] = relatedTitles[r], l[l.length - 1] = thumburl[r]);  relatedTitles = t, relatedUrls = e, thumburl = l}
function contains_thumbs(e, t) { for (var l = 0; l < e.length; l++) if (e[l] == t) return !0;  return !1}
function printRelatedLabels_thumbs() { for (var e = 0; e < relatedUrls.length; e++) relatedUrls[e] != currentposturl && relatedTitles[e] || (relatedUrls.splice(e, 1), relatedTitles.splice(e, 1), thumburl.splice(e, 1), e--); var t = Math.floor((relatedTitles.length - 1) * Math.random())  , e = 0; for (relatedTitles.length > 0 && document.write('<h4 class="pre-head">' + relatedpoststitle + "</h4>"), document.write('<div class="related-pre"/>'); e < relatedTitles.length && 20 > e && e < maxresults;) document.write('<a '), document.write(0 != e ? '"' : '"'), document.write(' href="' + relatedUrls[t] + '"><img src="' + thumburl[t] + '"/><div class="pre-title">' + relatedTitles[t] + "</div></a>"), t < relatedTitles.length - 1 ? t++ : t = 0, e++;  document.write("</div>"), relatedUrls.splice(0, relatedUrls.length), thumburl.splice(0, thumburl.length), relatedTitles.splice(0, relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Step 2: find the code 

<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->

     <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>

      <data:post.body/>

  

<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>

       <!-- ads in post preview -->

     

      <b:else/>

after that paste the code below

Step 2 Code:

<!-- Related Posts with thumbnails Scripts and Styles Start -->
<!-- Start Related post-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-pre'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=8&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;Related Posts &quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div>
</b:if>
<!--End Related post-->
<!-- Related Posts with Thumbnails Code End-->

Live example Here: https://learn7money.blogspot.com/2021/07/internet-marketing.html#more

image replace :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRFgEF8nJ4AqekY0p8p5OJmNeNZVwAoPS9GjTGBDxaacmT5JdqX68HNnFhuKJqFEseRWCgdu7cy0lo0gA6LY-WyzdD7bwcLQZRIaa0XMb4_f3WVh4-vScl5gwowHAmaq2WoAGthwjKKUcJ/s0/No-image-video2.jpg