5 Types of Related Post Widget For Blogger With Thumbnails

Rohan Mod
26 Apr, 2013

5 Types of related post widget for blogger with images and thumbnails. Ways for how to use this gadget from the Manual, Linkwithin, Nrelate, Outbrain and Zemanta widgets for blogger blog.

5 Type of Related Post Widget For Blogger With Thumbnails
5 Type of  Related Post Widget For Blogger With Thumbnails

Related posts widget for blogger with images and thumbnails plays an important role in increasing your traffic to your blog. Such widgets help to get clicks on related posts on your blog. There are lots of posts in your blog that does not get good amount of traffic does not matter they are written good and unique so how to get traffic for those posts which are still unnoticed by readers. Then such widgets like related post widget comes to importance. Many of your posts with the same labels appear in related post widget above comments and readers are more often clicks them and hence you get more traffic for your blogger blog. There are many ways to add related post widget for blogger. First one that I am describing is manual and other ones are third party widgets from this website like Nrelate, Linkwithin, Outbrain and from Zemanta. All of them have their own pros and cons. So the choice is yours which one you would like to add in your blogger blog.

(1) Manually ADD Related post widget for blogger



Below are the step by step procedure to add related post widget for blogger. Do not edit the code otherwise it would not work all the customization that are required I will explain it to you. So learn how to add related post widget in blogger or blogspot blog.


  • Go To Blogger.
  • Click on the template and then on edit HTML.
  • Type (CTRL+F) and search this piece of code.
  • Type </head> in search box.
  • Now copy and paste the below code before the </head> Tag.




<!--Related Posts widget for blogger Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH65pFmNahx118VZv5q1Fqdmgp_kIBo8ISyhvYD0t_xzLGLh05wlIen1wi-G-15cUNfVVvOAE26UgNV_9IWLixUNJO95G7rlv0VJ-4f4bLvvyIbTqqZsvqNeZP57D1-ICDp5RFvN2Y9eDj/s1600/no_image.jpg&quot;;
var maxresults=5;
var splittercolor=&quot;#DDDDDD&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='https://avdhootblogger.googlecode.com/files/avdhootblogger.relatedpostwidget.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts widget for blogger End-->


Customizations


If you want to change the default picture in case one of your post does not have any thumbnails then this will appear. So if you want to change the picture then change the URL in bolder color.

If you want to display more than 5 posts then change the value 5 from
"var maxresults=5;"
Of your own numbers.
If you do not want related post widget to appear on the homepage also then delete the code in blue color. So your widget will only appear in posts only.


Now find the following code.
<div class='post-footer'>


And just above it, copy and paste the below code:
<!-- Related Posts widget for blogger Start-->
<!-- remove --><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>
<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'/>
<!-- remove --></b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.avdhootblogger.com'><img alt='widgets for blogger' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2NGSpP4ZFDi78wkLb2wkYs08Sg2ZUGeJoWXUQmFLmZ0eNrb6JOKIEn2kgzjDEZHf6ImWLTB7lGE3j9SPXp3sLEjrCbw6FCsyiXuqpw8nilhi3Ozbzjz9GUqMRgY5k-1YBd9Y5saWCG4hR/s1600/best+blogger+tips.png'/></a>
</b:if></b:if>
<!-- Related Posts widget for blogger End-->


Note -

If you want to display more than 6 posts then change the number 6 in max-results=6 with the number of posts that you want to display in that widget.

Save your blogger Template and you are done.

(2) Linkwithin Related Post Widget For Blogger with thumbnails and images


Linkwithin is a good widget fast and stylish for blogger. It shows all related posts on your blog within each post above the comment box. The good thing is it is free to use and installation is free from all types of coding. They automatically add their widget when you are logged into your blogger account just few clicks required.

Installation

Installation of this related post widget for blogger is quite easy. You have to edit some entries like:-

  • Your email address
  • Your Blog URL
  • Type of platform choose blogger.
  • Width means how many posts you want. 3 or 5.

(3) Nrelate Related Post widget for blogger with thumbnails or images.

Nrelate is a popular and reputed website for widgets. They have two types of widgets for you one is most relevant posts and the other one is most popular post widget for blogger blog.

Below is the screenshot how to add a Nrelate related post widget for blogger blog and Wordpress.

                                             

(4) Outbrain related post widget for blogger with thumbnails and images



Outbrain is a standard website. Many of the biggest websites are using its widget. You can understand it's popularity that it has an Alexa rank of 164. It also has some of the best widgets for blogger blog with thumbnails and images . And, one of them is related post widget. You must give a try to their widget.



(5) Zemanta Related post widget for blogger with thumbnails and images


Zemanta claims that they have the best related post widget on the planet. Well you must give a try to check this. They have already 3,00,000 users who are using Zemanta. Zemanta has a page rank of 13,000 worldwide. As far as installation is concerned. Installation is quite simple just like linkwithin. You just have to sign up and all the remaining things they will do it. So try this one also. Below is the screenshot how does it look like.

So here I have described 5 types of related post widget for blogger blog with thumbnails and images using Nrelate, Outbrain, Zemanta, linkwithin and the manual one. Now the choice is yours which one you want to choose. If you liked the post please comment and feel free to share.
Next Post Previous Post