Related Posts Widget With Image Thumbnail For Blogger

How To Add Related Posts With Thumbnail To Blogger

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

</head>

Just above it paste below code

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove -->
<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, &#8220;
Times New Roman&#8221;, 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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6am3N7_zhebciHlI9GmoIDmMzhbxzeJ8HsZcFl65TUuutUp4WgPl1jNTFjxookywsShrTQ641YZlHAUoU6agk2KF2GI3Uw_Mt4n90ZzUfLMsx2RxU1A4E4Er_4fSnv6VJmIdPKsSgT_g/s400/noimage.png&quot;; var maxresults=5; var splittercolor=&quot;#d4eaf2&quot;; var relatedpoststitle=&quot;&quot;; </script>
<script src='http://code.helperblogger.com/hb-related-posts.js' type='text/javascript'/>>
<!-- remove -->
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Now search for below code in your template

<div class='post-footer-line post-footer-line-1'/>

Now place below code snippet just before of above line.

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove -->
<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 != &quot;true&quot;'></b:if>
<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=7&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script>
</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 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>
<!-- Related Posts with Thumbnails Code End-->

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.

Tweet