Home » , » Related Posts with Thumbnails for Blogspot Blog | LinkWithin blogger Alternative Widget

Related Posts with Thumbnails for Blogspot Blog | LinkWithin blogger Alternative Widget

We Know that Displaying the links to related posts along with a thumbnail of the corresponding post will help Blogger to increase the page views/user .Always Users will be tempted to go for the related posts when they are presented attractively with thumbnails. 
 Now a Days linkwithin.com is very popular in Blogger for Related Post widget, Here i am Going to share bloggerplugins Related post Script for blogger, I will Also compare Linkwithin script and bloggerplugins Script Here :
  • Fundamental difference Between LinkWithin and bloggerplugins Script - Linkwithin Shows related posts in every page including home page . But bloggerplugins Script Shows related Thumbnails in post page only which is most of blogger wanted .
  •  Linkwithin Script Shows credit link but Bloggerplugins script not
  •  In Linkwithin Script You can add more than 5 Thumbnail Related post Result  But in Bloggerplugins you can Add more than 5
  • In Linkwithin Script you can not change Title " Related Posts " But in Bloggerplugins script you can

Related Posts Widget with Thumbnails for Blogger < Source >

Here are the detailed steps to install the related posts widget for blogger with thumbnails
Step1. First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box
Step2. Now look for
and replace it with
<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
#related-posts a{
#related-posts a:hover{

#related-posts  a:hover {

<script type='text/javascript'>
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";

var relatedpoststitle="Related Posts";
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>

<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->
Step3. Now Find
<div class='post-footer-line post-footer-line-1'>
If you cant find it then try finding this one
<p class='post-footer-line post-footer-line-1'>
Now immediately after any of these lines(whichever you could find) place this code snippet
<!-- Related Posts with Thumbnails Code 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;'>
<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'>
</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.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>

<!-- Related Posts with Thumbnails Code End-->
Step4. You can adjust the maximum number of related posts being displayed by editing this line in the code.
var maxresults=5;
Step5. To edit the title of the widget you can change this line of code
var relatedpoststitle="Related Posts";
Step6. To change the default thumbnail, you can edit this line of code
var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
Step7. To Change the Colour of the Splitter Line , edit
var splittercolor="#d4eaf2";
To change the other colours and all you will have to modify the CSS

If you Face any problem in implementing this, don't panic.. :) .just leave me a comment here and i will direct you.

How to display the related posts on every page and not only on the post pages But also in Home Page and Other?

Just remove the two lines starting with from both step 3 and step 2.
that is lines
 <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- remove --></b:if>

Share this article :

Post a Comment