Adding Related Posts without thumbnail to Blogger

In previous tutorial, we have learned about how to add related posts within thumbnail. But now I would like to show you with another related topic which is commonly called "Related post. snippet". More internal link in your site might be caused your blog get high rank in search result. This tutorial is another way how to add related post without thumbnail and it also will be useful tips for SEO. The elated post widget is not only to show your reader about related topic which they are looking for, but also a kind of internal link might be ranked your page at the top of search result.

How to add related post without thumbnail in Blogger

1. Login to Blogger Dashboard >> Template >>Edit Template

2. Click anywhere inside your code area and press "Ctrl + F" to open the search box

3. Past this tags </head> inside the search box and hit Enter to find it.

4. Just above the </head> past the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'><style type='text/css'>
#related-posts {
    margin: 10px 5px;
padding:5px 5px;
}
#related-posts h2 {
    font-size: 18px;
    color: black;
    margin-bottom: 15px;
}
#related-posts a {
    font-size: 14px;
    color: #999;
    text-transform: capitalize;
}
#related-posts a:hover {
    text-decoration: underline;
    color: #555;
}
#related-posts ul {
    list-style-type: none;
    margin: 0 0 0px 0;
    padding: 5px;
}
#related-posts ul {
    list-style-type: none;
    background: #e9e9e9;
    border-left: 6px solid #e2e2e2;
}
#related-posts li {
    padding: 12px;
     border-bottom: 2px dotted #E2E2E2;
}
#related-posts li:hover {
    background: #F4F4F4;
font-weight:bold;
}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://cambohelpbloggers.googlecode.com/svn/trunk/related post snippet.js' type='text/javascript'/>
</b:if>

5. Now open the search box again and past this tags <div class='post-footer'> the press Enter to find:

6. Just above <div class='post-footer'> past the following code:

<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&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 10px; color: #bcbcbc; float: right;" href="http://cambohelpblogger.blogspot.com" rel="nofollow" >Get Related Post widget</a></div></b:if>

Note:

- If you want to change the number of the snippet to show, jus edit the number in Red color.

7. Save Template

*Enjoyed it!

Enjoyed this post?
Be sure to subscribe to get regular updates delivered to your email inbox, for free.