We have written an article How to Add Related Posts Widget with Thumbnails in Blogger? which shows thumbnails or snippets with related posts. In this article we are writing that how you can add simple related posts widget in blogger.
You have to add simple relate posts widget when you are taking care of your site speed. In blogger we can't use plugins etc to make our site speed faster. To make blogspot blog fast loading we have to use minimum scripts, CSS etc. You can see the screenshot of the widget below.
But if you want to make your blog attractive then you should Add Related Posts Widget with Thumbnails in Blogger?
How to Add Simple Related Posts Widget in Blogger?
Step 1. Go to Template > Edit HTML.
Step 2. Find for the following tag.
</head>
Step 3. Paste the following code above the searched tag.
<b:if cond='data:blog.pageType == "item"'><style type='text/css'>
#related-posts {
margin: 15px 0px;
}
#related-posts h2 {
font-size: 27px;font-weight: normal;
color: #fff;text-shadow: 1px 0px 2px #888;
margin-bottom: 0.75em;
}
#related-posts a {
font-size: 13px;
color: #949494;text-transform: capitalize;
border-bottom:1px dotted #E2E2E2;
display:block;
padding:13px;
text-decoration: none;
}
#related-posts a:hover {
color: #555;
background: #F4F4F4;
}
#related-posts ul {
padding: 0px;
list-style-type: none;
background: #f9f9f9;
border-left: 5px solid #f2f2f2;
}
#related-posts li {
padding: 0px;
}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<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('<h2>'+relatedpoststitle+'</h2>')}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>
Customization for Simple Related Posts Widget:
- To change size and color change the values 27px and #fff .
- To change the link color for related posts, change the color code with #949494
- To change background color change color code #f9f9f9 .
- To change background on mouse hover (When mouse will be on widget), change color code #F4F4F4 .
Step 4. Search for the following code.
<b:includable id='postQuickEdit' var='post'>
Step 5. Expand the searched code by clicking on "...".
Step 6. Now paste the following code above </b:includable> tag.
<b:if cond='data:blog.pageType == "item"'><div id='related-posts'> <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&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script><a style="font-size: 9px; color: #CECECE; float: right;" href="https://geekingnerd.blogspot.com/2017/07/add-simple-related-posts-widget-in.html" rel="follow" >Simple Related Posts Widget</a></div></b:if>
Important Note: To change the number of related posts change the value "5".
Step 7. Save Template and You are Done!