Saturday, 17 August 2013

Posted by Muhammad Naeem On Saturday, August 17, 2013

5 Type of  Related Post Widget For Blogger With Thumbnails
5 Type of  Related Post Widget For Blogger With Thumbnails
Related post widget for blogger with images and thumbnails plays an important role in increasing your traffic of your blog.such widgets helps to get clicks on related posts of 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 websites like Nrelate,Linkwithin,Outbrain and from zemanta.all of them have their own pros and cons.so choice is yours which one you would like to add in your blogger blog.

(1)Manually ADD Related post widget for blogger

how to add related post widget to blogger with images and thumbnails
how to add related post widget to blogger with images and thumbnails


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 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;http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/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 bolded color.

If you want display more than 5 posts than change the value 5 from
"var maxresults=5;"
of your own numbers.
If you do not want related post widget to appear in 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='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/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 dissplay 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 of your blog within each post above comment box.the good thing is it is free to use and installation is free from all type of coding.they automatically add their widget when you are logged into your blogger account just few clicks required.
Linkwithin Related Post Widget For Blogger with thumbnails and images
Linkwithin Related Post Widget For Blogger with thumbnails and images

Installation


Linkwithin Related Post Widget For Blogger with thumbnails and images
Linkwithin Related Post Widget For Blogger with thumbnails and images

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 wants.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 type of widgets for you one is most relevant posts and other one is most popular post widget for blogger blog.
Below is the screenshot how to add nrelate related post widget for blogger blog and wordpress.
nrelate related post widget for blogger blog and wordpress.
nrelate related post widget for blogger blog and wordpress.
                                              Image source and credit:-Nrelate

(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 alexa rank of 164.it also has some of the good widgets for blogger blog with thumbnails and images .and one of them is related post widget.you must give a try to their widget.
outbrain related post widget for blogger
outbrain related post widget for blogger


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


Zemanta claims that has the best related post widget on the planet.well you must give a try to check this.well they have already 3,00,000 users who are using zemanta.zemanta has page rank of 13,000 worldwide.as far as installation is concerned.installation is quite simple just like linkwithin.you just have o 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.
zemanta related post widget for blogger


5 Type of related post widget for blogger with images and thumbnails

5 Type of related post widget for blogger with images and thumbnails 5 Type of related post widget for blogger with images and thumbnails 5 Type of related post widget for blogger with images and thumbnails 5 Type of related post widget for blogger with images and thumbnails

you are reading : 5 Type of related post widget for blogger with images and thumbnails

Amazing content i did not see before thanks..
Naeem Sagar
Date published: 10/13/2015
4.8 / 5 stars
How this Post..

0 comments :

Post a Comment

Write some thing Good for us...........

Note: only a member of this blog may post a comment.