73D41416194E8A7C390936971FB2B74B Chira Sathi: Related Posts Widget with thumbnails for Blogger

Friday, June 10, 2011

Related Posts Widget with thumbnails for Blogger






Now Like wise Wordpress Blogger Users can also have Related Posts with Thumbnails in Blogspot Blogs.To increase page views per user this widget can be very helpful, you can easily display the Related Posts with thumbnails below every post or below the post area with very ease.



Related Posts Widget with Thumbnails for Blogger

Here are the detailed steps to install the related posts widget for blogger with thumbnails


STEP #1
Log in to Blogger -> Layout -> Edit HTMLand select the tick-boxExpand Widget Templates
Then, find (CTRL+F) this code in the template:
And immediately before it, paste this code:


<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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPQjthnlGM9oZOVkavx8SA11hsHSQDBAU2ZWVuVjBHMy08Oq-jsAxuSetGEbd3eLYiNLQQLd8Qr6esNJmM9KB3AcTVYw52fnfWkOhJ_GNEQOpFU4DtfF2A6DwhVXrm65X0sExwSEthCQdL/s1600/no+Image+1.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
script>
<script src='https://sites.google.com/site/bdlab12/javascript123/bdlab-related-posts-with-thumbnails-for-blogger-pro.txt' type='text/javascript'/>
b:if>


STEP #2:
Now find this code in the template:

If you cant find it then try finding this one
Now immediately after any of these lines(whichever you could find) place this code snippet


<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>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/>b:loop>

No comments:

Post a Comment

Best Blogger Gadgets