Related Post Valid HTML5 and Fast Load Blog
Updated on July 10, 2016
Step 1: Open your browser and visit Blogger.com. Sign in to your Blogger account.
Step 2: Click the "Template" > "Edit HTML"
Step 3:
- Click anywhere inside the code area and press CTRL+F keys
- Search for this piece of code adding it inside the search box (hit Enter to find it):
</head>Step 4: Just before/above this code, copy and paste the folowing code:
<!-- related post widget -->Step 5. Find the line below (you will find two times, but you need to stop at the second one):
<b:if cond='data:blog.pageType == "item"'><style type='text/css'>
.related-post-title{font-size:2em;margin: 3px 0px;}
#related-posts {margin: 0px 5px;}
#related-posts a {font-size: 1em;color:#000;text-transform: capitalize;}
#related-posts a:hover {text-decoration: none;color: #F9431A;}
#related-posts ul { margin-left: 20px;padding: 0px;color: #000000;}
#related-posts li { padding: 0.3em ;}
#related-posts li:hover {background: none;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write()}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>
</b:if>
<!-- end related post widget -->
<div class=’post-footer’>Step 6. Now just after/below this code , copy and paste the folowing code:
<!-- Ralated post Start --> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'><h4 class='related-post-title'>You may also like</h4><b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script></div> </b:if> <!-- END Ralated -->
Note:
- Change the 5 value in maxresults=5 with the number of posts you want to be displayed
- If you are unable to see the related posts widget after saving the template, add the code (step 5) just above the </b:includable> tag which can be found above this line (CTRL + F to find it):
<b:includable id='postQuickEdit' var='post'>
Then we have code paragraph like this:
Code from step 5Step 7. Click the "Save template".
</b:includable>
<b:includable id='postQuickEdit' var='post'>