How to add related posts in blogger

How to add related posts in blogger. The function of the related post is to display related posts. In general, future post made based label, for example: if we make posts with label bloggers and when such posts open the post that labeled other bloggers will be shown on the related post. Benefits related post for visitors is to allow visitors to find other articles that relate to the post that is being read.
Well, then how do I make a related post on blogger?
Here is how to make the related post on blogger
- Please login to blogger
- Go to Template> Edit HTML
- Search code:

]]></b:skin>

Add the following code below

]]></b:skin>

Add the following code below

<!--RELATEDPOSTMULAI-->
<style>
#related-posts{float:left;width:100%;border-bottom:0 solid #888;border-top:0 solid #88daed;margin:5px 0 10px;padding:15px 0 10px}#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0}#related-posts a{color:#16A1E7;font:12px Verdana}#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8fuDoQrDkmgsr_72V_0iYqmtnIfndZv0oY-KPZ4ShmUfkDcUi4BSx4EcVjfW-6KmIHMn435ZMfpOsLMrE9HdrF_IK0Gx-8SGYhBEEc4cHZxZGYYumu0reY3uso74CsyEkX2KfdwQgmeE/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}#related-posts a:hover{color:#c00;text-decoration:none}#related-posts .widget{margin:0;padding:0}#related-posts ul{list-style:none;margin:0;padding:0}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;<h4>Artikel Mirip denngan : <a expr:href='data:post.url'><data:blog.pageName/></a></h4>&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>
<!--RELATEDPOSTWESLAH-->


- Continue to find the code

<div class = 'post-footer ">

Add the code above:
<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;'> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script>
</div><div class='clear'/>
</b:if>

View image:


- Click SAVE TEMPLATE


To create a related post responsive / mobile version, then we have to add the code:
@media screen and (max-width:320px){.related-posts ul{padding:0;list-style-type:none}.post blockquote{margin:5px;background:#C3C3C3;font-family:"Arial",Verdana;font-style:italic}}.post blockquote{-webkit-touch-callout:text;-webkit-user-select:text;-khtml-user-select:text;-ms-user-select:text;-moz-user-select:text}.post{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-ms-user-select:none;-moz-user-select:none}
above

]]></b:skin>