Blogspot: How to add related posts to your blog

Adding related post to your blog article make your readers stay much longer on your blog. Now here is a little trick for displaying related post below each of your blog post with thumbnails.



The related post are picked from other articles in the same label or category, for example, The posts in 'How tos' label will show beneath each article under the same label.

Adding related post to your blog(blogspot)

Step 1. Login to your blogger account, goto blogger dashboard and click on template

Step 2. Click on "EDIT HTML"


Step 3. Click anywhere inside the template code box and search for "</head>" without quote

Step 4. Copy and paste the following code just below or above the </head > in your blog template Html code

<!- -Related Posts with thumbnails Scripts and Styles Start- ->
<b:if cond='data:blog.pageType ==&quot;item&quot;'>
<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: 100 px;height: 100 px;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:14 px 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' /></b:if><!- -Related Posts with thumbnails Scripts and Styles End- ->

NOTES: You can work on this code by editing it. To display related post in your homepage, remove the code in green

Step 5. Then find the following code (you might find it twice, stop at the second one)

<div class='post-footer'>

Step 6. Now above it,copy and paste the below code:

<!- -Related Posts with Thumbnails Code Start- ->
<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 >
<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=7&quot;' type='text/javascript'/></b:if > </b:loop >
<script type='text/javascript'>
var currentposturl=&quot;< data:post.url/>&quot;;
var maxresults= 7;
var relatedpoststitle=&quot;<b> Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(); </script>
</div><div class='clear'/>
</b:if>
<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/AVvXsEj7aso8rLtWQsA9uBX2pc-UU2HViYKrUp03liw6t-BV3JQBbvJx3wy8OrxJ69UYcKz8LMKbxvGPFOdkN-vZwH4_J5m3Notusc8E-MCQb7eyKY6FgdRcoJ_mVwhvdaL8fXHHeeuAU9Q5wOWT/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!- -Related Posts with Thumbnails Code End- ->

Step 7. Click on Save template to save.

NOTE: Change the 7 in max-results= 7 to the maximum number of posts you want to display.

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.