How To Add Blogger Related Post w/ Images Also in Homepage

Here useful Widgets related post thumbnail image can be use also in Blogger homepage.

Before you do this hack please do a back for your Templates.

Steps adding the Related Posts Widget to Blogger/Blogspot



Step 1. Go To Blogger Dashboard >> Template >>Edit HTML

blogger template, edit html

Step 2. Click anywhere inside the template's code and press the CTRL + F keys

Step 3. Search for this piece of code by typing it inside the search box:

</head>

Step 4. Copy and add the below code just before/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:110px;height:110px;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:#555;text-align:center;padding: 0 10px;font-size:18px 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://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Tips:

Changing the width and height of thumbnails, modify the 110px value in red
For the color and font size of related posts titles, change the value in green
Additional remove the line in blue if you want the related posts to be displayed in homepage too

Step 5. Look for following html code (this will be find it twice, stop at the second one):

<div class='post-footer'>

Step 6. Copy and add the below html code.

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=6;
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://helplogger.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgInxVYrOt1jl38c876T6mpS5h145oMvhO2O_Z8mHzxbXLL5ZKG8Ysro-eKL1NUlGnGuaaIuzbCd3NiOibUEyDFdWm1jYROIVSk4iA9hLyOWIoFYmSyIa-EvIeqSSKQvoA3CKFS71LtZlxl/s1600/best+blogger+tips.png'/></a>
</b:if></b:if><!-- Related Posts with Thumbnails Code End-->

For the last and finishing codes

Change the 6 value from max-results=6 with the number of posts you want to be displayed
If you want the related posts to be displayed on homepage too, then remove the lines in blue

Finally your done, now you can save your template and look the changes. Did you make it?