Related Posts Widget with Thumbnails and Summary for Blogger

Related posts widget with thumbnails and summary for blogspot blog - This is related posts widget for blogger which displays related posts from the label of the post with thumbnail and summary. As i have already published related posts widget with thumbnails for blogger in one of my previous post earlier. that you can also check out and use in your blogger blog. but if you want to be display related posts with thumbnails and snippets too then here is the tutorial that you have to follow in order to implement an awesome Related Posts widget with Thumbnails and Posts Snippets that will appear in the footer of all your blog posts. So, now let's move to the tutorial of adding related posts widget with thumbnails and summaries in blogger template.

Also see : How to add recent posts widget to blogger?

How to add related posts widget with thumbnails and summaries in blogger?

Go to blogger dashboard > Template > Edit HTML
CTRL + F to find </head> tag.
Copy and paste below JavaScript code just above it.


<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/AVvXsEiko3oGJn-R5R9lwse61M0Unqnnmm-KtSWxbYMIid7tyHDxfjLuN7gIkR8wkwTi7LxJlysr5DfJMjTyUIRHZy0tO377P9OZmxCBHiXybcQKaL_hlmHVUp3uaHxbVL-hBDXo6A59fo2ABTaE/s1600/no_image.jpg"; // default picture for entries with no image
//]]>
</script>
<script src="http://makingdifferent.github.io/blogger-widgets/related-posts-with-thumbs-and-summaries.js" />

Important
- To change the number of posts that are being displayed, modify the value in red (4)
- To change the number of characters to be shown in posts summary, modify the value in green (75)
- To change the default pic for posts with no images, add your URL instead of the one marked in blue

After adding above javascript, we will need to add CSS code to style the widget. Copy and paste below code just above the same </head> tag.

<style>
.relatedsumposts {
    float: left;
    padding: 0px 10px;
    overflow: hidden;
    text-align: center;
  /* width and height of the related posts area */
    width: 120px;
    height: 200px;
    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: #linkcolor;
    display: inline;
    font-size: 10px;
    line-height: 1;
}

.relatedsumposts img {
  /* thumbnail properties */
    margin-top: 2px;
    height: 82px;
    padding: 5px;
    width: 82px;
    border: 1px solid #fff;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -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>

Important:
- Modify the values in red to adjust the width (120) and height (210) of the widget area
- Replace #linkcolor with the hex value of your color to change the color of post titles
- If you want to change the size of thumbnails, modify the values marked in violet (82)
- To determine the border roundness, modify the values in orange (100)
- To change the color of the post snippet, change #summarycolor with color hex value
- In case you add more that 5 related posts, change the container height 200px to 400px

Note: If you have a dark background, you may want to add this style instead (see the screenshot):

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

.relatedsumposts:hover {
    background-color: #0A0A0A;
}

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

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

.relatedsumposts img {
  /* thumbnail properties */
    margin-top: 2px;
    height: 82px;
    padding: 5px;
    width: 82px;
    border: 1px solid #000;
background:#282828;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -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 #0A0A0A;
    border-bottom: 1px solid #0A0A0A;
    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: #121212;
    height: 200px; /* related posts container */
    padding: 5px;
    width: 100%;
}

.relatedpoststitle {
    font-size: 19px;
    font-weight: bold;
    border-top: 3px solid #FB8227;
    color: #ccc;
    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>

Now, Again search (CTRL+F) for 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>

And after you found it, add this script just below it:

<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>

The entire fragment should look like this:

          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url'  rel='tag'><data:label.name/></a><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=readpostlabels&amp;max-results=50&quot;'  type='text/javascript'/>
  </b:if>
          </b:loop>

Finally, find this fragment of code:

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

Just ABOVE the </b:includable> tag, add the following code:

    <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>