Blogger Related Post widget with Thumbnails from label

You may have searched too many blogs for this tutorial, but most of them have some compatibility problems. This related post widget shows related post from blogger label. You can display any number of thumbnails in related post depending on the layout size of your blog. You will get a demo of this tutorial at the bottom of the page.

Step 1: From blogger dashboard select Template and click on "Edit Html"

Step 2: Now click on any code section and press Ctrl+F from keyboard. This function allows you to find anything in that page.

Step 3: Now in the search box type "</head>" or you can copy the below code

</head>

Step 4: Now paste the following code above the </head> tag

<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 75; // the number of characters of summary
var relatednoimage = 

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Ex9w3bPVB42sG_zMdLdN7rB15VmDoZKxWMH0rPIvo6rQwceW00p1qQk74a5mBMXOMBcEv_v_3ysx2x5u6KZz3QauvVjodj641rZkp6cHQjqsgmR7ediyL9vGJGHPm8NLy4fZ7aIV7B0/s1600/readme-icon.png"; 

// this is a default picture for entries with no image
//]]>
</script>
<script type="text/javascript" src="https://googledrive.com/host/0BzIJx1OUtMgzRjFHSVJibVZSSWM"></script>

[

To change number of posts in Related post list change the value of "var relatedPostsNum"
To change number of character in Related post summary list change the value of "var relatedmaxnum"
To change the default image of posts with no image in Related post list, change the value of "var relatednoimage"

]

Step 5: Now we need to style up the thumbnail. To do so copy the following code and paste above "</head> tag.

<style>
.relatedsumposts {
    float: left;
    padding: 0px 10px;
    overflow: hidden;
    text-align: center;
  /* width and height of the related posts area */
    width: 132px;
    height: 225px;
    border-right: 1px solid #E5E5E5;
    display: inline-block;
}

.relatedsumposts:hover {
    background-color: #F7F7F7;
}

.relatedsumposts img:hover {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
}

.relatedsumposts a {
  /* link properties */
    color: #000;
    display: inline;
    font-size: 12px;
    line-height: 1;
}

.relatedsumposts img {
  /* thumbnail properties */
    margin-top: 2px;
    height: 100px;
    padding: 5px;
    width: 100px;
    border: 1px solid #fff;
    -webkit-border-radius: 0px 25px;
    -moz-border-radius: 0px 25px;
    border-radius: 0px 25px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow: hidden;
}

.relatedsumposts h6 {
  /* title properties */
    display: table-cell;
    height: 3em;
    margin: 5px 0 0;
    overflow: hidden;
    padding-bottom: 2px;
    vertical-align: middle;
    width: 130px;
}

.relatedsumposts p {
  /* summary properties */
    border-top: 1px solid #E5E5E5;
    border-bottom: 1px solid #E5E5E5;
    color: #summarycolor;
    font-size: 10px;
    height: 4em;
    line-height: 1;
    margin: 5px 0 0;
    overflow: hidden;
    padding: 5px 0 15px 0;
    text-align: left;
}

#relatedpostssum {
    background: #F3F3F3;
    height: 200px; /* related posts container */
    padding: 5px;
    width: 100%;
}

.relatedpoststitle {
    font-size: 19px;
    font-weight: bold;
    border-top: 3px solid #FB8227;
    color: #777;
    display: inline-block;
    padding: 5px 10px;
    width: 190px;
    float: left;
    margin: 0px -200px 0px 20px;
    transform: rotate(90deg);
    transform-origin: left top 0;
    -ms-transform: rotate(90deg); 
    -ms-transform-origin:left top 0;
    -webkit-transform: rotate(90deg); 
    -webkit-transform-origin:left top 0;  
   font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>

Step 6: Now press Ctrl+F and search the following code

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>

Step 7: Now add the following code just below the above code snippet

<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=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>

Step 8: Again press Ctrl+F and search the following tag

</b:includable>
<b:includable id='postQuickEdit' var='post'>

Step 9: Now above </b:includable> tag add the following tag

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
   <div class='relatedpoststitle'>RELATED POSTS</div>
<div id='relatedpostssum'>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>

Step 10: You are almost done. Now what you have to do is Save the Template.

Hope this tutorial is useful to you. Don't forget to make any comments regarding any problem and any suggestion.