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.
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
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 == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' 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="<data:post.url/>";
var maxresults=6;
var relatedpoststitle="Related Posts";
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.
| Remember you can get all these tips sent directly to your email and stay a step ahead.Its a quick and easy service Provided for Free by Google.Just fill in the Email form below the post. If you need extra help on this or any tutorial just leave a comment, I love comments and feedback so this Blog is Do-Follow – when you comment here it helps Your Blogs Google rank ! |
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 !
