How To Add Related Posts Widgets With Thumbnails In Blogger -Tips 2021

Related Posts With Thumbnail In Blogger Post

135

How To Add Related Posts Widgets With Thumbnails In Blogger Post ( Random Post)

How To Add Related Posts Widgets With Thumbnails In Blogger Post ( Random Post)

Today we insert how to add related posts with thumbnails in Blogger blog post footer and we can say show related post under each post, it is linked to related stories using our Blogger blog labels.

How to add Random Post in blogger post

Add Related posts widget will also help you reduce rate on your website, Increasing your website pageviews and revenue generated by the adsense. As Blogger doesn’t have built-in related posts widgets, so you have to add it manually on your blog.However, see this post A to Z.
We have a simple related posts widget for Blogger website.Which is created using HTML, JavaScript. It will display the most views or featured posts based on the post label or tags.

Add Related Posts Widgets With Thumbnails to the end of every blog post will help keep more visitors on your blogger website, as they will get to the end of the post and then click on a related post/article. It increases traffic, increase SEO Level, and is relevant to the visitor. Therefore,easy way to Add Related Posts Widgets With Thumbnails to the end of every blogger post that doesn’t got thumbnails included next to every link.

How To Setup Blogger Related Post With Thumbnail

  • Step 1: Go to Blogger Theme then click Edit HTML button.
  • Step 2 : Press Ctrl+F or Find This tag <head>.

Add Related Posts Widgets With Thumbnail

Step 2: Paste the Code before in the </head> tag.

<!–Related Posts with thumbnails Scripts 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]=’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 End–>

  • Step 4: Press Ctrl+F type “ <div class=’post-footer’> “

How To Add Related Posts Widgets With Thumbnail

Step 5: Then hit Enter Two times and Paste this Code before in <div class=’post-footer’> tag and click Save Theme.

<!– 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=”https://techtspot.blogspot.com/2016/08/add-related-posts-widget-to-blog.html” rel=”nofollow” >Related Posts Widget</a></div> </b:if> <!– Related Posts with Thumbnails Code End–>

 

Add Related Posts Widgets With Thumbnails Show On Blogger Post

 

More : Best E-Commerce Blogger Template 

HelpBN On Facebook : HelpBN Blog

2 Comments
  1. WeewsNone says
Leave A Reply

Your email address will not be published.