Adding Related Posts With Thumbnail into Blogger

Advertisement Here

1.Login into blogger and Go to Blogger Dashboard>Templates>Edit HTML
2.CTRL + F to enable search box and searchfor the </head>
3.Copy the Code below and Past just above </head>

<!--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:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Note:

• To change the height or width of the widget you can edit color value in above code 100px.
• To change color and size of related posts titles you can edit Blue colores value.
• Remove Green colored lines, if you want related posts to be displayed in homepage as well

4. Find the following code in your blog's HTML using CTRL+F you might get the result of the same code two times then you can stop at the second one.

<div class='post-footer'>

5.Now ,Past just above it, the bellow codes.

<!-- Related Posts with Thumbnails Code Start-->
<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCijiZQwPjxUWuh16HqwGq6BVi7ilWwJ6Yzyy-DFmun3hmi3sjTSveVKWUtOuZPS6yXRVSUUVtPg0gTrJa8Kspb-6WPgDTxXmsLHegQznmBHEW_EP9NuyMJ2HTLJ7lXhPsTNXs2h_4I_JR/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->


Edit value 5 in maximum=5 with the number of posts you want to display. Remove Green colored lines if you want to related post to be display on home page

6. Save the Template, and your Done.