How To Add Related Posts Below Blog Posts In Blogger

How To Bring Related Posts Here Blog Posts In Blogger

What about adding Accompanying Updates below your own blog posts? Advantage on adding Accompanying Updates below your own post is which your readers wills find such inside your Related

Updates interesting and select the link to read the submit, so your customers stay time on blog grows and thus increases your own pageviews. So this lesson will help you to add Accompanying Posts here your own blog posts.

Process Of Adding Accompanying Posts Here Discussions In Blogger:--

1--> Login to your Blogger Account.

2--> Go to Blogger Admin Page > Template > Click on Edit HTML.

3--> Check Expand Template.

4--> Ctrl + F and find </head>

5--> Above </head> , Copy and Paste the codes given below:

<!--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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkKru4u5VbpKMwuHcrivK1HUMjwak2Ikmgt2UGd3iwxMUCCrbwDsc-a-CjXE2-Tt1ugQ7SAlPI_WyIJEb3uvBj7-npo7C9xJTW07iFZDQjzF7djl_g6LspdpQ3PxBbROFE2JnbRARGm6I/s400/noimage.png&quot;;

var maxresults=5;

var splittercolor=&quot;#d4eaf2&quot;;

var relatedpoststitle=&quot;Related Posts&quot;;

</script>

<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' 

type='text/javascript'/>

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

<!--Related Posts with thumbnails Scripts and Styles End-->

6--> Now press again Ctrl + F and Find <div class='post-footer-line post-footer-line-1'>

7--> Above  <div class='post-footer-line post-footer-line-1'> , Copy and Paste the codes given below:

<b:if cond='data:blog.pageType == &quot;item&quot;'>  

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

     <b:if cond='data:blog.pageType == &quot;item&quot;'>  

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

     <script type='text/javascript'>  

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

     var maxresults=8;  

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

     removeRelatedDuplicates_thumbs();  

     printRelatedLabels_thumbs();  

     </script>  

     </div><div style='clear:both'/>  

     </b:if>  

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

8--> Keep your Template and also Done