How To Add Grid Related Posts Widget Below Posts in Blogger

What is Related Posts?

New Related Posts Works on JSON And Fetches The Posts From the Label of Current Open Posts and Display it. We can Add this Below Every post to get Similar Posts for the reader to ready and engage more. This is Light Weight And Load Faster. You can install The JS Script in your Server if your Server Is fast. It Display 6 posts Which Can Be Decrease or increase according to our Desire.

Why To Use Related Posts in Blogger?

New Related Posts Below all Posts in Blogger is Recommended Because It Engage Users and increase page views as well as Decrease Bounce Rate. And Healthy internal linking can be made by using this Related Posts In Blogger. This Enhance your site Looks and Cache users attention. And Good For SEO.

when the visitors comes from Search engines to a particular post they don't know what is There in the Site if they find this Related posts They will get the options to Get into any post of there interest and read it Hence this is Good For SEO. 

See The GIF Demo Below. Don't Refer this Image is Low Quality To show the Animation effect we added it:

Let Start! How To Add  New Related Posts Below all Posts in Blogger:

We have Divided The Tutorial Into Three Parts In the First Part We will Improve Related posts thumbnail Quality and resolution.

STEP 1:  Go To Template Section As Shown in The Image Below

STEP 3: After Clicking on Edit HTML Search for 

</body>

STEP 2:  Copy This Below Code Before </body>

<script type='text/javascript'>                   function changeThumbSize(id,size){var blogGadget = document.getElementById(id);var replacement = blogGadget.innerHTML;blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c");var thumbnails = blogGadget.getElementsByTagName("img");for(var i=0;i&lt;thumbnails.length;i++){ thumbnails[i].width = size; thumbnails[i].height = size; }}
changeThumbSize("#related-posts",210);                   
</script>

Good Now We have Improved The Resolution of Related Posts Thumbnails.

Now In Second Part We Will Add JavaScript in the Template. 

Thanks To MyBloggerLab for JavaScript We Have Edited to make it beautiful and more useful.

STEP 1:  Now After Completing Above Steps Search for 

</head>

STEP 2:  Copy This Below Code Before </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwd6ciieXiUIBDi4_uu8nLGZQrEdDzotDbQlazRIupOrIqRupMvoadzir1Yjc2BBFJ5ND8vpRa-J8ztxR2VRpGxq86z0nSIcsIymyK3I5cZS0EFHKnOH835SYOGhpA_EdKQ8y2o5k7XmJR/s1600/no_image.jpg&quot;;
var maxresults=6;
var splittercolor=&quot;#fff&quot;;
var relatedpoststitle=&quot;Recommended Articles:&quot;;
</script>
<script src='https://mytopdownloads.com/Trending%20Widgets/relatedPosts.js' type='text/javascript'/>
</b:if>

STEP 3:  Now Search for (Search by Pressing CTRL + F) 

 <data:post.body/>

You Will Find This Code 3 Times or more in your Template So Refer 2nd or 3rd Time.

STEP 4:  Copy This Below Code After <data:post.body/>

<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>
<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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div></b:if>

Now In Third & Final Part We Will Add CSS in the Template.  

STEP 1:  Now Search for (Search by Pressing CTRL + F)

]]></b:skin>

 STEP 2:  Copy This Below Code Just Before ]]></b:skin>

<!-- Widget By www.trendingwidgets.com -->.rel_title {text-align:center; border:none!important; font-size: 100%!important; max-width: 200px; word-break: break-all;color:#333; height: 40px!important; font-family:helvetica; font-weight: bold!important; font-size: 90%!important; word-spacing: -1px;}#related-posts {display:inline-block;width: 100%;border:none!important;background-color: #fffddd;}#related-posts img {margin-right: 2px;}#related-posts a {box-shadow: 0px 0px 1px 2px #ddd inset; margin: 10px 0px 10px 5px!important;}#related-posts h2 {text-align:left; font-size:160%; padding: 0px 0px 0px 8px; color:#ddd; text-shadow: 0px 0px 2px #000; background-color: rgba(0,0,0,0.4); margin:0px!important;}<!-- Widget By www.trendingwidgets.com -->#related-posts a:hover{  animation: animateShake 0.82s linear;  transform: translate3d(0, 0, 0);  backface-visibility: hidden;}
@keyframes animateShake {  10%, 90% {    transform: translate3d(-5px, 0, 0);  }    20%, 80% {    transform: translate3d(3px, 0, 0);  }
  30%, 50%, 70% {    transform: translate3d(-5px, 0, 0);  }
  40%, 60% {    transform: translate3d(3px, 0, 0);  }}

That's it Thanks For Following The Tutorial Now Its time For Customization to make it as it made for your site.

Customization:

First JavaScript Part:

• The Yellow Highlighted Text is Responsible For  Number of Posts To Display By Default 6 Posts Will Be Displayed If You Want To Decrease or increase Then Change This Yellow Text with your desired Number.

• The Orange Highlighted Text is Responsible For Heading of the Related Posts You can Decide What To Display Above it Like Recommended Posts, Similar Posts etc.

Second CSS Part:

• The Light-blue Highlighted Text is Responsible For Width of Titles and its posts By Default it is Good But If you are feeling it is Not Fitting to Your Site Then Change the Text in the Blue Color.

STEP 6:  All Done Save the Template and Check it in your site.

That's It Thanks For Following our Tutorial ''In few Steps Add New Related Posts Below all Posts in Blogger '' Along With us If you found any difficulty Please Comment and Share Your Valuable Opinion. And Stay tuned for More Tutorials Like This and Share this with your friends.