Related Posts Widget for Blogger Without Thumbnail

August 06, 2014
related posts widget
More internal links on a webpage is important in the sense of SEO because when a visitors get into a page of your sites, then he/she will see there more links and click them. Sometimes they don't want to click but unwantedly they click. So that your site gets more hits and more hits might be a cause to improve your page rank high in the search engine. If your site has high page rank, then your site obviously gets more impression and visitors.  But blogger blog doesnot have default related posts widget. So you have to add the related posts widget manually. please follow the following steps to add a simple related posts widget in your blogger blog without thumbnails.





How to Add a Related Posts Widget in Blogger Without Thumbnail?


Related post widget
Sketch of related posts 
Step 1: Just sign in into your blogger account. Go to template>>edit html.
Step 2: Find the </head> tag
Step 3: Put the following code just before the </head> tag.
<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='http://googledrive.com/host/0B-GuAkK2nj5gZy1qTE0yMk5Fcmc' type='text/javascript'/>
</b:if>
You can change all the above css code as your wish.

Step 4: Search the below code
div class='post-footer'>
Step 5: Now put the give codes before the above 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=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script><a style="font-size: 10px; color: #bcbcbc; float: right;" href="http://allblogsolution.blogspot.com" rel="nofollow" >Get Related Post widget</a></div></b:if>   
Step 6: Now save template.

You did it. You also can change the maxresults=6 into any parameters as your wish.
Thank you. Comment us for any problems.
Previous
Next Post »