How to Add Related Posts Below Every Post to Blogger With Thumbnails

Do you want to Add Related Posts Below Every Post to Blogger With Thumbnails? Related post below post make blog more visitor friendly. Visitor can find easily same post of your blog. Today I show how to do it.



1. Login to your Blogger Account.

2. From Dashboard >> Tamplate >> Edit HTML.

3. Don't forget to backup your template first.

4. Check the Expand Widget Templates box.

5. Find out (Press Ctrl+F) the Code  </head>

6. Now Just before the </head> Paste the following Code

<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: 18px;
letter-spacing: 2px;
font-weight: bold;
text-transform: none;
color: #5D5D5D;
font-family: Arial Narrow;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
border-right: 1px dotted #DDDDDD;
color:#5D5D5D;
}
#related-posts a:hover{
color:black;
background-color:#EDEDEF;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/>

Note: Displaying more than 5 posts, replace 5 value from var maxresults=5;

7. Now Find out (Press Ctrl+F) the Code  <div class='post-footer'>

8. Just before the <div class='post-footer'> Paste the following Code

<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'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://sr-site.com'><img alt='Blogger Tricks' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>

Note: To change the number of similar/related posts to be displayed, change the code max-results=6

9. Save your template and you are done. You many need Show or Hide Widgets In Blogger on Specific Pages here.

0 comments:

Post a Comment