TUTORIAL: How to Add "You Might Also Like" or 'Related Posts" To Blogger with Thumbnails

I've been blogging for a while now and I wondered how bloggers include "You may also like"/"Related Post" with thumbnails at the bottom of their blog post. By adding related posts below your Blogger posts you will get more page views. 

I've tried to google and search for tips and find that most link or website is outdated, complicated, not working or spam. I read that most bloggers uses linkwithin to add related post. I've tried referring to linkwithin but with no success. 

Apparently the webpage doesn't work anymore as the site is currently down (not sure when it will be up and working again).

After doing further research, I've finally found one that it works. 

To add related posts in Blogger all you need is to follow the step below.

Step 1 - Go To Blogger Dashboard > Template > Edit HTML

Step 2 - Click anywhere inside the template's code and press CTRL + F keys

Step 3 - Search for this piece of code by typing it inside the search box:</head>

Step 4 - Copy and paste the below code just before/above </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove -->
<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='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
<!-- remove -->
<!--Related Posts with thumbnails Scripts and Styles End-->

Step 5 - Find the following code: <div class='post-footer'> (you may find 2 of them, look for the second one)

Step 6 - And just above it, copy and paste the below code:

<!-- Related Posts with Thumbnails Code Start-->

<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=4&quot;' type='text/javascript'/></b:loop>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=4;

var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>
</div><div class='clear'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw6xptOS9Fesdl3oVtICPQbHpLGeB0b2PUYi1ClrMeJmXR_WMyWoL5nGDyueXzIjMLTxkUmQh6FtJc0mpabaXDDPWhh9VWIPMzeNRuUjIn43dn1nWulo4kA2hoVxbgvZNHqnsv5AWRjrgJ/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

Step 7. Save the Template

Here's my related post in one of my post. :)

Hope this tutorial helped you in displaying related post in your blog.