Related Posts Widget With Image Thumbnail For Blogger ~ Shiraz Shakeel

How To Add Related Posts With Thumbnail For Blogger

Go to Blogger Dashboard > Design > Edit HTML.
Download a copy of your template first.
Tick "Expand Widget Templates" checkbox.
Now search for below tag in your template

<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;
font-size
}

#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: #6E6E6E;
color: #ffffff;
}
</style>
<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=""; </script>
<script src='http://code.helperblogger.com/hb-related-posts.js' type='text/javascript'/>> 

</b:if>

Now search for below code in your template,

<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=7"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script>
</div>
<div style='clear:both'/>

</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 alt='Related Posts Widget For Blogger with Thumbnails' src='http://image.bloggerplugins.org/blogger-widgets.png' style='border: 0'/></a><a href='http://bloggertemplates.bloggerplugins.org/'><img alt='Blogger Templates' src='http://image.bloggerplugins.org/blogger-templates.png' style='border: 0'/></a></b:if></b:if>

Now save your template and go to your blog,you will watch this widget just below of your posts.

Customizations

To change the title of widget find the Related Posts in 2nd code.
To change the number of posts to display find this var maxresults=5; code in 2nd code.

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Shiraz Shakeel

Wednesday 23 January 2013