HOW TO ADD THE RELATED POSTS WIDGET WITH THUMBNAILS TO BLOGGER BLOGS

T

here are many ways to make your blog visitors have a much better experience. One of such way is to have Google Analytics installed on your blog. It is very nice to have seo tips on your blog but sure, it is not enough. You could also add CSS to your blog to give it a great look but that is still not enough. Google Analytics analyses your blog audience. It provides you with certain information about them: their demographics, behavior, their geography, bounce rate, pages most viewed, and the average time spent on your blog, the type of mobile used, acquisitions and conversions.

Your audience shouldn’t only view a post they love. They should also be able to view other posts related to the one they’ve read. This helps them to spend more time on your blog and increases your authority.

Fortunately, we don’t need much knowledge of CSS and HTML. All we need is to copy a few codes and paste them into our blog’s template code. There is an easy hack that lets us display related posts with thumbnails. One very important thing we must not forget is that we must add labels and categories to our blog posts. This is what we make use of to show the related posts. The related posts appear according to the number of posts you’ve chosen with the same labels. With this, your readers will be able to stay on your blog for a much longer time when they see related posts of interest.

A VIEW OF GOOGLE ANALYTICS

                                     

HOW TO ADD THE RELATED POSTS WIDGET TO YOUR BLOG

1.       Login to your blog

2.       On your blogger dashboard, head to “Template”

3.       Click “Edit Html”

CLICK ON "EDIT HTML"

4.       Click anywhere inside the code area and press “Ctrl F”

CLICK "CTRL F" TO OPEN THE SEARCH BAR

5.       Search for </head>

7.       Copy and paste the code below just below the </head> tag

<!--Related Posts with thumbnails Scripts and Styles Start-->
<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 h4{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:110px;height:100px;-webkit-border-radius: 5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#333;text-align:center;text-transform:capitalize;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();var thumburl=new Array();function related_results_labels_thumbs(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;try{thumburl[relatedTitlesNum]=entry.gform_foot.url}catch(error){s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl[relatedTitlesNum]=d}else thumburl[relatedTitlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdluPfuDhBWNCDIAo_w7dUylsJ_IqUL5-mfskWtXSqViMWjph5F6P1LV8VWa0IwqdsgJ-pB6j2B8eAAEFUK-NqwYkqZ4TpKVlUzd33VyfkbKpdyXKVLLB1NmUyIXysgoh0DmFSFgEy8-Jy/s1600/no-thumbnail.png'}if(relatedTitles[relatedTitlesNum].length>35)relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,35)+"...";for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++}}}}function removeRelatedDuplicates_thumbs(){var tmp=new Array(0);var tmp2=new Array(0);var tmp3=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains_thumbs(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp3.length+=1;tmp2[tmp2.length-1]=relatedTitles[i];tmp3[tmp3.length-1]=thumburl[i]}}relatedTitles=tmp2;relatedUrls=tmp;thumburl=tmp3}function contains_thumbs(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false}function printRelatedLabels_thumbs(){for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==currentposturl)||(!(relatedTitles[i]))){relatedUrls.splice(i,1);relatedTitles.splice(i,1);thumburl.splice(i,1);i--}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>0)document.write('<h4>'+relatedpoststitle+'</h4>');document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<a style="text-decoration:none;margin:0 4px 10px 0;float:left;');if(i!=0)document.write('"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img class="related_img" src="'+thumburl[r]+'"/><br/><div id="related-title">'+relatedTitles[r]+'</div></a>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)}
//]]>
</script>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

8.       N.B:

·         Remove the code on the second line to show the related posts on both your homepage and post pages.

·         Change the height and width of the thumbnails by changing the 110 and 100 pixel values.

·         Change the color of the thumbnail by changing the color value, blue, on the eleventh (11) line.

9.       Find the line code below. (you will find it twice but choose the second one)

<div class='post-footer'>

10.   Now find this code -<div class='post-footer'> . Before it, paste this 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>
<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: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'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

N.B: A maximum number of five (5) related posts will show. You can change this by changing the value 5 in “max-results=5”.

       11. When you’re done, be sure to save your blog template.

Note: you will not see the changes immediately but it sure will appear maybe after 48 hrs.

WHEN YOU'RE DONE, BE SURE TO SAVE YOUR TEMPLATE.

SAVE TEMPLATE

OVER TO YOU

Hope this post was easy and straight to the point? Hope you enjoyed it?

Ø  What suggestion do you have about the Related posts widget?

Ø  Do you have trouble implementing any of these tips?

Simply, leave a comment in the comment box below and I’ll be happy to join the conversation. Join us by giving us your email only in the "Follow by Email" button  and guess what? You’ll be the first to receive our updates.

P.S- share this post to friends on your social media platforms. Thanks