How to add Related post in Blogger Post/Blogger Tricks

Hello friends,

 Now here is a wonderful trick for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this trick many of your readers will remain on your site for longer periods of time when they see related posts of interest.

Just follow few simple and easy steps:

1. Sing in to your account.

2. Then Go To Blogger Dashboard select Design and Edit HTML.

3. Check the "Expand widgets template" box;

4. Search (CTRL + F) for this code: </head>

5. Copy and paste the below code just before/above </head>.

.<!--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:center;
    text-transform:none;
    height:100%;
    min-height:100%;
    padding-top:5px;
    padding-left:5px;
    }

    #related-posts h2{
    font-size: 1.6em;
    font-weight: bold;
    color: black;
    font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
    margin-bottom: 0.75em;
    margin-top: 0em;
    padding-top: 0em;
    }
    #related-posts a{
    color:black;
    }
    #related-posts a:hover{
    color:black;
    }

    #related-posts  a:hover {
    background-color:#d4eaf2;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFcXkpkihCqDHAwRFNx6d6s_dkAbXFl0UBqhVfl5R4wn6Ac9zXxhwy6yLVsxhcyV2ltFqtnPyU8RKPQIvA0PF1Lx9r6z0dQdKLbtIqxhAelRrFfBSck8C0_VYWCMJa9v1sGnqBTFIWBUIK/s1600/noimage.png";
    var maxresults=5;
    var splittercolor="#d4eaf2";
    var relatedpoststitle="related post";
    </script>
    <!-- remove --></b:if>
    <!--Related Posts with thumbnails Scripts and Styles End-->

6. Now find the following code:

    <div class='post-footer-line post-footer-line-1'>


If you can't find it, then search for this one:

    <p class='post-footer-line post-footer-line-1'>
OR:
    <data:post.body/>

 7. Copy and paste the below code just after any of these lines.

    <!-- 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;'>

    </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><div style='clear:both'/>

    <!-- remove --></b:if>

    <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>

    </b:if></b:if>

    <!-- Related Posts with Thumbnails Code End-->.

8. Save the template , check out your blog.