Related Posts Widget for Blogger Without Thumbnail

Related Posts Widget for Blogger Without Thumbnail


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.
Reactions

13 comments :

  1. Not working
    www.tallyknowledge.com

    ReplyDelete
    Replies
    1. Sorry! Actually, it does not work in some custom template. Please add once carefully.

      Delete
  2. Replies
    1. Please add carefully. Both 2 portion of code must be added.

      Delete
  3. Hi Rakeysh

    My Blog http://www.shilpjyoti.com is in hindi and I want to write संबंधित पोस्ट पढ़ने के लिए नीचे क्लिक करें" instead "Related Topics of This Article" as written in your this post http://allblogsolution.blogspot.in/2014/08/related-posts-widget-for-blogger.html . Moreover i want to maintain blog theme (like font, color, hover etc.) unchanged so also help me to remove css code provided in this post.

    please guide me how to change this. I will be thankful to you.

    ReplyDelete
    Replies
    1. If you are trying to add related post widget and you want to change widget name of related post widget, you have to change "Related Posts" text which is in red color in step 3 code.

      Delete
  4. A Very good widget and very looking very nice. I want to implement this widget in between blogger post, between each post. Can you please make it compitable to put in between blogger post

    Thanks in Advance

    ReplyDelete
    Replies
    1. Hi buddy, this article might help you widget placement

      Note: you have to add related post widget code instead of adsense code.
      Thank you.

      Delete
    2. I am unable to locate the related post widget in my website. Please help me on this or please provide a tutorial about this. Please help

      Thanks in Advance

      Delete
    3. Okay, I will come bringing a new article on this topic soon and I will let you know.

      Delete
  5. not working..
    http://www.sarkarinaukrisite.in/

    ReplyDelete

Any comment will be appreciated, comment will be published according to our comment policy