related posts

How To Put A Related Posts With Images Gadget Under Your Blog Posts

One of the most popular related posts gadgets for Blogger users is the related posts with thumbnails provided by linkwithin.The easy installation and clean look of the gadget makes it an easy choice for most bloggers.However the linkwithin gadget does not suit everyone and does not work with every template for example the template I’m currently using will not display that gadget properly.If your having similar issues with the linkwithin gadget don’t worry, in this post i will show you how to use an almost identical gadget that is coded to work well for all blogger templates.

Note – We have recently published a new improved version : New Related Posts With Thumbnails Blogger.

If your not familiar with the related posts with thumbnails gadgets lets look at how it works, whats displayed and were it appears. The gadget will be located below all your posts and will list a number of posts (The number is specified by you) that are related to the post it appears under. In order to display related posts the gadget uses the labels used in each post and lists posts using the same labels. Along with the post title this gadget displays a thumbnail (Small version of an image you used in the post) and a short description of the post although this is optional.

blogger-logo

You can see a working example of this gadget by viewing any post in the new template gallery: http://www.templates.spiceupyourblog.com/


How To Add The Recent Posts With Thumbnails To Your Blog


Step 1. In your dashboard click ‘Layout’ > ‘Edit Html’ > Tick the ‘expand widget templates’ box

blogger layout
blogger edit html
blogger expand widget templates

Step 2. In your templates Html find the following piece of code :
(Click Ctrl and F for a search bar to help find the code – More Info)

</head>

Step 3. Place the following code Directly Above/Before </head>

<script src='http://www.sigmirror.com/files/49136_fib7l/relatedpost.txt' type='text/javascript'/>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == "item"'>
<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: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>


<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Step 4. Find the following piece of code in your blogs html :

<data:post.body/>

If <data:post.body/> appears in your template twice use the second occurrence.

Step 5. Place the following piece of code Directly Below / Under <data:post.body/>

<!-- R-P-W-T Code-->
<a href='http://www.spiceupyourblog.com'><img alt='Best Blogger Tips' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.spiceupyourblog.com' target='_blank'><small>Get This Gadget</small></a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
var relatedpoststitle=&quot;Related Posts&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- www.spiceupyourblog.com-->

Note : You can change the amount of related posts to be displayed by changing the maxresults=6 as highlighted above in red.
You can change the title above the gadget by changing the text Related Posts highlighted in red above.

This is a nice gadget that will keep people on your blog looking through your archive, a vital factor in building a following for your blog.

If you have any questions just ask !

Like This, You Will Love :

How To Put A Related Posts With Images Gadget Under Your Blog Posts
Informative
85
Useful
70
Easy To Read
79
Fact
94
Reader Rating0 Votes
0
82