Related Posts Widget + Thumbnails & Summary For Blogger Blog

Other than Related Posts Widget With Thumbnails & Summary For Blogger Blog that i'm going to give here, there are also two other related posts widgets that i've written a while ago. The one of those loads no image, no summary, only titles of posts, while the other one is similar to this widget but with a shorter code. Just in case you're interested guys, take a look on these posts: Related Posts Widget Without Thumbnails >> Related Posts Widget With Thumbnails

Back to Related Posts Widget With Thumbnails & Summary For Blogger Blog. This widget takes a realy long enough code, but it's worth it perhaps. The widget is set to load image and summary, and of course the post title too. It's beautifull, and will probably make your blog looks like alive, more than before. Let's get straight down, the code is realy long.

How To Add Related Posts Widget With Thumbnails & Summary To Blogger?

It's never and never will be hard to add a widget on blogger, you only have to find the widget and you'll be all about to find some lines of code in your template, and then put another code around the codes you find. The same with that case, here you are all about to find some lines of code in your template and then put the codes that i give to you around accordingly.

Follow the instructions below to add Related Posts Widget With Thumbnails & Summary to your Blogger Blog.

1. Go to the Edit HTML tab on your blogger
2. Check the "Expand Widget Templates" box
3. Find the closing tag </head> in your template and put the following code right above it:

Copy here
<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; var relatedmaxnum = 75; var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8gn9eBOiApKZRjfO8eQubAe-MgJD2GsQnj18rMdO_awjAoYb4_UzRuk8-q2p9neARTfHcpnCPyN6ekx1t3p7BGkgeY2q8gfQrnloMLYDAZoMHFx-Q5zR9ZrTZCqnAtqWyw8dC7WhqGXJY/s1600/No-Image-736965.jpg"; function readpostlabels(json) { var entry, postimg, postcontent, cat; for (var i = 0; i < json.feed.entry.length; i++) { entry = json.feed.entry[i]; if (i==json.feed.entry.length) { break; } relatedTitles[relatedTitlesNum] = entry.title.$t; postcontent = ""; if ("content" in entry) { postcontent = entry.content.$t; } else if ("summary" in entry) { postcontent = entry.summary.$t; } relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum); if ("media$thumbnail" in entry) { postimg = entry.media$thumbnail.url; } else { postimg = relatednoimage; } relatedThumb[relatedTitlesNum] = postimg; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { relatedUrls[relatedTitlesNum] = entry.link[k].href; break; } } relatedTitlesNum++; } } function showrelated() { var tmp = new Array(0); var tmp2 = new Array(0); var tmp3 = new Array(0); var tmp4 = new Array(0); for(var i = 0; i < relatedUrls.length; i++) { if(!contains(tmp, relatedUrls[i])) { tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i]; tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i]; tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i]; tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i]; } } relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4; for(var i = 0; i < relatedTitles.length; i++){ var index = Math.floor((relatedTitles.length - 1)*Math.random()); var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i]; var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i]; relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index]; relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index]; relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls; relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage; } var somePosts = 0; var r = Math.floor((relatedTitles.length - 1)*Math.random()); var relsump = r; var output; var dirURL = document.URL; while (somePosts < relatedPostsNum) { if (relatedUrls[r] != dirURL) { output = "<div class='relatedsumposts'>"; output += "<a href='" + relatedUrls[r] + "' rel='nofollow' target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>"; output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>"; output += "<p>" + relatedpSummary[r] + " ... </p>"; output += "</div>"; document.write(output); somePosts++; if (somePosts == relatedPostsNum) { break; } } if (r < relatedTitles.length - 1) { r++; } else { r = 0; } if(r==relsump) { break; } } } function removetags(text,length){ var pSummary = text.split("<"); for(var i=0;i<pSummary.length;i++){ if(pSummary[i].indexOf(">")!=-1){ pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length); } } pSummary = pSummary.join(""); pSummary = pSummary.substring(0,length-1); return pSummary; } function contains(a, e) { for(var j = 0; j < a.length; j++) if (a[j]==e) return true; return false; } //]]> </script>

4. Find the closing tag ]]></b:skin> in your template and add the following CSS code above it:

Copy here
.relatedsumposts {float:left; margin:0px 5px; overflow:hidden; text-align: center; width: 120px; height:210px;} .relatedsumposts:hover {background-color: #F3F3F3; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;} .relatedsumposts img:hover {-khtml-opacity:0.4; -moz-opacity:0.4; opacity:0.4;} .relatedsumposts a {color: #linkcolor; display: inline; font-size: 10px; line-height: 1;} .relatedsumposts img {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);} .relatedsumposts h6 {display: table-cell; height: 5em; margin: 5px 0 0; overflow: hidden; padding-bottom: 2px; vertical-align: middle; width: 130px;} .relatedsumposts p {border-top: 1px dotted #777777; border-bottom: 1px dotted #777777; color: #summarycolor; font-size: 10px; height: 4em; line-height: 1; margin: 5px 0 0; overflow: hidden; padding: 5px 0 15px 0; text-align: left;}

5. Find the following code in your template:

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

6. Now put the following code in betwen </b:if> and </b:loop> that are red colored in the above code:

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

7. Find the following code in your template:

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

8. Add the following code above it:

Copy here
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='relatedpostssum'><div style='text-align: left; font-size: 15px; margin-bottom: 10px; font-weight: bold;'>Related Posts</div> <script type='text/javascript'>showrelated();</script></div> <div style='clear:both;'/> </b:if>

Clue: The code above functions to call the widget, so you can put it wherever around your footer section, <div class="post-footer-line post-footer-line-1> for example

9. Save your changes and well done.

If you get confused of customizing the widget, just go back here, at least you can find which and where have you put the codes exactly. Now have a try..