nRelate is one of the popular Related Post Widget used by bloggers. I was also using it on some of my blogs. But recently, it was announced that it will stop serving recommendations on December 31, 2014. All nRelate services including their customer facing dashboards will be terminated, and we have sign up for an alternative discovery platform by the end of December.So keeping this in mind, I’ve prepared another code for related articles widget. It is very much clean and very easy to use. No scripts hosted on third party servers is used, so it will lasts forever without any hiccup.
The lookup of this widget is somewhat like nRelate’s “Default” theme style as shown snapshot in the right figure.
In future, I’ll provide you more theme as like provided by nRelate. So keep in touch for further updates.
How to Install Related Post Widget at Blogger.com?
Step 1. First of all, remove nRelate code for related post posts, if have not done so.Step2. Make a backup of your current template. This will help you get previous look if something wrong takes place with implementation. If you don’t know how to make backup of blogger template, you can use this “Template>> Backup/Restore”.
Step 3. After login to Blogger Dashboard, Go to “Template” and then click “Edit Html”. Click anywhere inside the template code area, then press CTRL + F keys to open search box. Search for following code:
</head>
Step 4. Just above closing head tag, paste the following code:
<!-- Related post widget script starts --> <script type='text/javascript'> var defaultnoimage="http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmkJDpQ4gL8igtGV3EZdfQcWoQUwvhRnJ7cj8HvI8O3R5aQLUGHARkjqVeMzJ18pK6oEsOkGVDVfGCtARGvYGKn1Ecg5aV8S8U3ScthWEalHZd7gNlWNSnbgeDkdi1UoqAgpWItmyTQY/s400/noimage.png"; var maxresults=5; var splittercolor="#fff"; var relatedpoststitle="Related Posts"; </script> <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.media$thumbnail.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{if(typeof(defaultnoimage)!=='undefined'){thumburl[relatedTitlesNum]=defaultnoimage}else{thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZmkJDpQ4gL8igtGV3EZdfQcWoQUwvhRnJ7cj8HvI8O3R5aQLUGHARkjqVeMzJ18pK6oEsOkGVDVfGCtARGvYGKn1Ecg5aV8S8U3ScthWEalHZd7gNlWNSnbgeDkdi1UoqAgpWItmyTQY/s400/noimage.png"}}}if(relatedTitles[relatedTitlesNum].length>65){relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0,65)+"..."}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(current){var splitbarcolor;if(typeof(splittercolor)!=='undefined'){splitbarcolor=splittercolor}else{splitbarcolor="#d4eaf2"}for(var i=0;i<relatedUrls.length;i++){if((relatedUrls[i]==current)||(!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('<h2>'+relatedpoststitle+'</h2>')}document.write('<div style="clear: both;"/>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<div><a style="display:inline-block;float:left"');if(i!=0)document.write(''+splitbarcolor+';"');else document.write('"');document.write(' href="'+relatedUrls[r]+'"><img style="" src="'+thumburl[r]+'"/><br/><div style="">'+relatedTitles[r]+'</div></a></div>');i++;if(r<relatedTitles.length-1){r++}else{r=0}}document.write('</div>');relatedUrls.splice(0,relatedUrls.length);thumburl.splice(0,thumburl.length);relatedTitles.splice(0,relatedTitles.length)} </script> <!-- Related post widget script ends –>
- In the above code, you can change number of related articles by changing value “maxresults=5;” as per your requirement.
- To change heading of the widget, replace code highlighted in Marroon color such as with “You might be interested in”, “You may also like”, “Recommended Articles”, etc.
Step 5. Paste the following code, where you want to appear the related articles widget:
<!-- Related Posts with Thumbnails Code Start--> <div class='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/summary/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style="font-size: 10px; vertical-align: bottom; float: right"><a href="http://blogger-hatchery.blogspot.com/2014/12/nrelate-alternatives-related-post.html" target="_blank">Get this widget</a></div> <!-- Related Posts with Thumbnails Code End—>
For example, search for the following code:
<div class='post-footer'>
and paste just above this code. You may find this code multiple times in template, but you should stick to last one. If this code doesn’t work, then try with other same codes above one by one.
Step 6. Now comes the styling part. Search the following code:
]]></b:skin>
and paste following code just above previous code:
.related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
margin-top:15px;
padding-left:5px;
}
.related-posts a img {
width: 110px;
height: 110px;
padding: 2px; border-radius: 5px;
border: 1px solid #CFCFCF!important;
}
.related-posts a {
padding: 10px;
font-size: 13px;
border: 1px solid #EEEEEE;
border-radius: 5px;
overflow: hidden;
margin-left: 4px;
margin-right: 4px;
margin-top: 5px;
margin-bottom: 5px;
width: 115px;
background: #ffffff;
min-height: 210px;
font-family: sans-serif;
font-weight: 700;
line-height: 140%;
text-align: left;
}
.related-posts a:hover {
background: #44B329;
color: #fff;
border: 1px solid #44B329;
}
.related-posts div {
line-height: normal;
display:inline-block;
}
Step 7. Now you have done. The related posts widget will appear in your website.
Customization:
- Change thumbnail dimensions by changing value in green highlighted code in Step 6. But with this, you must also change width: 115px; in the same step to “your thumbnail width + 5 px” to match the changes.
- Change the code highlighted in red color to change background of widget.
- Change margins in Yellow highlighted codes to change margin between two related posts to fit all the related posts (in present case 6) in the widget in fill in entire width of your website.
I am sure that this posts have helped you. You should share and subscribe for further updates and new themes for the widget.
In case of any inquiry please use comment box.
No comments:
Post a Comment