How To Add A Related Posts Widget With Image Thumbnails And Blog Post Titles To Blogger

How To Add A Related Posts Widget With Image Thumbnails And Blog Post Titles To Blogger

Related Posts are a great way to increase engagement on your blog and keep readers scrolling through your content. If you'd like to add a simple Related Posts Widget with image thumbnails and blog post titles to you Blogger website then you've come to the right place! Follow this simple step by step tutorial below:


Before you begin, you need to make sure your RSS Feed is turned on, otherwise this widget will not show up on your blog.

To check if your RSS Feed is active, go to your Dashboard and find the navigation menu on the left of your screen. Locate and click Settings.

Blogger Related Posts Widget RSS Feed

Now scroll down until you find the section titled: Site Feed. Click where it says Allow Blog Feed and choose either Full or Until Jump Break and click Save.

Blogger Related Posts Widget RSS Feed

Next, return to the navigation menu on the left of your screen and click on Theme.

Blogger Dashboard Theme

At the top of your page you'll see an orange button with the word Customize. Click on the arrow to the right to open up a Drop Down Menu.

Blogger Dashboard Customize Theme

Now, select Edit HTML.

Blogger Dashboard Theme Edit HTML

Now you'll see the backend code for your blog and you'll need to bring up the Search Box at the top left. To do this click your mouse cursor anywhere inside your code, just make sure you don't erase or add anything accidentally. Now Hit either Ctrl F (windows) or Cmd F (mac) to bring up the Search Box.

Blogger Dashboard Theme Search Box

Search for </head>

Blogger Dashboard Theme Head Tag

Just above the </head> tag paste the following code:

<!--Related Posts Widget Start-->

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {float:left;width:auto;}
#related-posts a {border: 1px solid #eeeeee; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
#related-posts h4 {font:20px;color:#000000;margin-top:25px;margin-left:5px;margin-bottom:5px;}
#related-posts .related_img {margin:5px; border:1px solid #eeeeee; object-fit:cover;width:93px;height:93px;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#0066cc; text-align:center; padding:5px; font-size:11px; width:93px; height:55px;}
#related-posts a:hover {opacity:.4;}
<script type='text/javascript'>
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)} //]]>

<!--Related Posts Widget End-->

Next, search for <div class='post-footer-line post-footer-line-3'>

Blogger Dashboard Theme Footer Code

Just above the <div class='post-footer-line post-footer-line-3'> code paste the following code:

<!--Related Posts Widget 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;'>
<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=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=8;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;

<!--Related Posts Widget End-->

To change how many related post thumbnails display under each post change the number 8 in both of these code snippets: results=8; (8 is the number of posts that show).

If you're not seeing any related posts under your blog posts, make sure that all of your posts have Labels.

That's it you're done! Keep in mind that the Related Posts Widget will not show up on the home page, they will only show up under individual blog posts.

I customized my related posts widget based on this tutorial by Helplogger.

No comments:

Post a Comment

Copyright © justinwoodie.com ©