Related Posts Widget would display links to other posts of the same category/label. It also increases SEO and Page views of your blog. This post will show you how to add related posts widget to your blogger blog.
1. Go to yout Blogger Dashboard > Template > Edit HTML
2. Backup your template Before installing
3. check Expand Template
4. Search for </head> (using ctrl+f)
5. Add the following code just before it:
Here is simple Some step to add Related post below your all blog post
1. Go to yout Blogger Dashboard > Template > Edit HTML
2. Backup your template Before installing
3. check Expand Template
4. Search for </head> (using ctrl+f)
5. Add the following code just before it:
<!--Related Posts Start--><style>#related-posts {float : left;width:550px;margin-top:0px;margin-left : 5px;font : 11px Verdana;padding:5px;}#related-posts .widget {list-style-type : none;margin : 5px 0 5px 0;padding : 0;}#related-posts .widget h2, #related-posts h2 {color : #940f04;font-size : 20px;font-weight : normal;margin : 5px 7px 0;padding : 0 0 5px;}#related-posts a {color : #054474;font-size : 12px;text-decoration : none;}#related-posts a:hover {color : #0080ff;text-decoration : none;}#related-posts ul {list-style:none; padding:0px !important;}#related-posts ul li { background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO3Gpk5X_tLAp90BP_iiR79lVibiPL4qKTubfHs0yHP7cq7lY4Zg3KXFGXZNjZMPJ5qDucnRDr-g-XeWlYuKZefWJ8q6H7zRC3lP1RXVjwwkCbfkGe1NWgCI6_CUorR2RicUmZF46Pwd4/s400/255.gif) no-repeat scroll 0px 6px; margin: 0.3em 0 !important; padding: 0 0 0.8em 20px; line-height : 2em; border-bottom:1px dotted #cccccc;}#related-posts ul li:hover{background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoNJcMdudxOd-C8FB706FwXPebwvB0TBr6RHEml7pD_9wb4oCr9prqBXBJ58eQYOe1NBI4aLHT_cj5cmlnNKOlLYjv9DJvbpM2EpPiBgedrbZkXyDU7ECKgV1AbI-vg6n6ABXNOoKnquw/s400/251.gif) no-repeat scroll 0px 6px !important;}</style><script language='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() {var r = Math.floor((relatedTitles.length - 1) * Math.random());var i = 0;document.write('<ul>');while (i < relatedTitles.length && i < 6) {document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');if (r < relatedTitles.length - 1) {r++;} else {r = 0;}i++;}document.write('</ul>');document.write('<a rel="dofollow" href="http://makeurbloguniq.blogspot.com/2012/12/add-related-post.html" style="float:right;font-size:10px;">Get This Widgets</a></font>');}//]]></script><!--Related Posts Stop-->
6.Now search for <data:post.body/>
7. Paste the following code just before it.8. Save your Template you are done
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<font color='#289728' face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
Customize your Widget
- To display any other text in place of "Related Posts" then simply replace it with any text you want
- To change the color of the related post title change this code #289728 to the one you want