Home >>

Related Posts with Thumbnail widget


Related Posts with Thumbnails widget.
Widget Preview

In the previous post we have posted a Related Posts widget for Blogspot (Blogger) in text only. But now, How about to add a Related Posts with Thumbnail widget for Blogger template?

The answer is just follow this guide to apply it into your template.
  1. Log into your Blogger account and go to Dasboard > Design > Edit HTML.

  2. Click the Expand Widget Templates check box.
  3. Copy and paste this code between HEAD tag:
    code:
    <!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:#000;
}
#related-posts a:hover{
color:#2288bb;
}
#related-posts  a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2MjeYve-G3ZYepmewtk_ZeEfQe9CILAse6joyr-GCz4zSAWGw4Qf08R-uR51H1aiWX54KGmjzZc1cSdlTS5gdrV6ADiq5DcR1ZB89rnlVVp0W2QBvyeepN7__GL1ZZnB0WjguV-Uex0/s400/noimage.png";
var maxresults=6;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://chocodot.googlecode.com/files/related_post_thumbnail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

    <HEAD>
    paste code here
    </HEAD>
  4. Copy this second code and paste after <div class='post-footer-line post-footer-line-1'> on Body section:

    Find this code on body section (Use Ctrl + F for quick search)
    <div class='post-footer-line post-footer-line-1'>
    paste code here

    code: 
    <!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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>
<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: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'>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->
Widget example:




Category: