How to add Related Posts Widget with thumbnails in Blogger

You wish to keep your readers for long on your blog, you
need to have interesting things which can meet their needs. Aside that, what
they want they want may not be the exact post they are seeing, they may get it
from the related post.
How to add Related Posts Widget with thumbnails in Blogger


The “related posts” are chosen from other posts having in
the same category, label or tag. This readers live on your blog for ages when
they see interesting related posts.

WARNING: Before you embark on this journey ensure you back up
your Template.

How to Add the Related
Posts Widget to Blogger
1.
Launch your browser and sign in to your Blogger account
2.
Go to Template and click on “Edit HTML”
How to add Related Posts Widget with thumbnails in Blogger

3.
Click inside the HTML and press the “CTRL + F keys”

How to add Related Posts Widget with thumbnails in Blogger

4.
Type or copy the below tag and paste
it inside the search box and hit Enter to locate it:

</Head>

How to add Related Posts Widget with thumbnails in Blogger

5.
Now Copy the below highlighted code and paste it just above the </head>

<!–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 Arial;padding:3px;color: #000000;
text-transform:uppercase;}#related-posts
.related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;width:100px;height:90px;-webkit-border-radius:
5px;-moz-border-radius: 5px; border-radius: 5px; }
#related-title
{color: #0d0d0d;text-align:center;text-transform:capitalize;padding:
0px 5px 10px;font-size:10px;width:100px; height: 90px;}</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]=’http://2.bp.blogspot.com/-ex3V86fj4dQ/UrCQQa4cLsI/AAAAAAAAFdA/j2FCTmGOrog/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–>

Note: Optional
changes
  • To change the size (width and height) of thumbnails, modify
    the 100 px and 90 px values in red
  • To change the colour and size of related posts titles, you
    will have to alter the #0d0d0d color

6. Copy the below code and
paste in the HTML search box. Please note that the code will appears twice,
work with the second one:

<div class=’post-footer’>

How to add Related Posts Widget with thumbnails in Blogger

7. Now copy and paste the
below code immediately above <div
class=’post-footer’>
:

<!–
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 href=’http://www.tellforceblog.com/’ rel=’nofollow’
style=’font-size: 9px; text-decoration: none;’>TELL-FORCE
Blog</a></div></b:if><!–
Related Posts with Thumbnails Code End–>

How to add Related Posts Widget with thumbnails in Blogger

Note:

Just as in the “Note” for step 5, you can change the 5 value from max-results= 5 (this is the
number of posts to appear)
8.
Save the Template and you are done.
Now enjoy the functions of related post.

Tags

Andre

Andre is a network engineer with a solid technical background and a proven record in building and troubleshooting computer systems, networking, website design and blogging with broad knowledge on call center operations and administration. Above all, a man with great desire in sharing his knowledge and views, cutting across technology, social and politics.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to top button
Free Web Submission
Close

Adblock Detected

Please consider supporting us by disabling your ad blocker