how to add related posts in blogger width html code

How to create related posts in blogger / how to add related posts in blogger. Related posts is a widget that is usually by the owner of blogger articles which are being installed under perform. related_posts contains some discussion of the post with almost the same as the currently displayed article. There are some models that are often shown on related_posts: related_posts showing only post title only, title and snippet display related_posts post content, related_posts by displaying the post title and post footage of images, there is also a display of pictures and only related_posts its title alone. To style the look related_posts, featuring style with simple, related_posts silder with style and more.

For those who want to try making related_posts in blogger, let's follow the guides make related_posts below:
-Login to blogger
-Open-edit template html
-code:

</head>

-Add the code above:

<style>
#related_posts {}
#related_posts h2{border-top:1px solid #F4F3F3;border-bottom:1px solid #F4F3F3;color:#222;font-size:13px;color:#222;text-shadow:white 1px 1px 1px;letter-spacing:0;line-height:20px;background:#C4C4C4;margin:0 0 5px;padding:5px 10px}
#relpost_img_sum{line-height:16px;margin:0;padding:0}
#relpost_img_sum:hover{background:none}
#relpost_img_sum ul{list-style-type:none;margin:0;padding:0}
#relpost_img_sum li{
list-style-type: none;
padding: 5px;
border: 1px solid #eee;
margin: 5px 0;
overflow: hidden;}
#relpost_img_sum .news-title{}
#relpost_img_sum .news-text{display:block;text-align:left;font-weight:400;text-transform:none;}
#relpost_img_sum img{
float: left;
margin-right: 10px;
display: block;
width: 72px;
height: 72px;
}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 5;
var numchars = 170;
var morelink = "";
var reljudul=new Array();
var relurls=new Array();
var relcuplikan=new Array();
var relgambar=new Array();
function saringtags(suchas,panjang)
{
var cuplik=suchas.split("<");
for(var i=0;
i<cuplik.length;
i++)
{
if(cuplik[i].indexOf(">")!=-1)
{
cuplik[i]=cuplik[i].substring(cuplik[i].indexOf(">")+1,cuplik[i].length)
}
}
cuplik=cuplik.join("");
cuplik=cuplik.substring(0,panjang-1);
return cuplik
}
function relpostimgcuplik(json)
{
for(var i=0;
i<json.feed.entry.length;
i++)
{
var entry=json.feed.entry[i];
reljudul[relnojudul]=entry.title.$t;
postcontent="";
if("content"in entry)
{
postcontent=entry.content.$t
}
else if("summary"in entry)
{
postcontent=entry.summary.$t
}
relcuplikan[relnojudul]=saringtags(postcontent,numchars);
if("media$thumbnail"in entry)
{
postimg=entry.media$thumbnail.url
}
else
{
postimg="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE2xqcumTH3vEVtGQ1UTaFbTGmZfbN0Ah1Y9oqsjk0tcR9NgWBtUaHLiR3S1_7r11F0oQvlPwdugHVhNq-XuUXop5DguDS8jgLumqYQpK759SV9Lp7m39OWEN3gyKfme2_wo8_AyqMImUI/s1600/relatedpost.jpg"
}
relgambar[relnojudul]=postimg;
for(var k=0;
k<entry.link.length;
k++)
{
if(entry.link[k].rel=='alternate')
{
relurls[relnojudul]=entry.link[k].href;
break
}
}
relnojudul++
}
}
function contains(a,e)
{
for(var j=0;
j<a.length;
j++)if(a[j]==e)return true;
return false
}
function artikelterkait()
{
var tmp=new Array(0);
var tmp2=new Array(0);
var tmp3=new Array(0);
var tmp4=new Array(0);
for(var i=0;
i<relurls.length;
i++)
{
if(!contains(tmp,relurls[i]))
{
tmp.length+=1;
tmp[tmp.length-1]=relurls[i];
tmp2.length+=1;
tmp2[tmp2.length-1]=reljudul[i];
tmp3.length+=1;
tmp3[tmp3.length-1]=relcuplikan[i];
tmp4.length+=1;
tmp4[tmp4.length-1]=relgambar[i]
}
}
reljudul=tmp2;
relurls=tmp;
relcuplikan=tmp3;
relgambar=tmp4;
for(var i=0;
i<reljudul.length;
i++)
{
var informasi=Math.floor((reljudul.length-1)*Math.random());
var tempJudul=reljudul[i];
var tempUrls=relurls[i];
var tempCuplikan=relcuplikan[i];
var tempGambar=relgambar[i];
reljudul[i]=reljudul[informasi];
relurls[i]=relurls[informasi];
relcuplikan[i]=relcuplikan[informasi];
relgambar[i]=relgambar[informasi];
reljudul[informasi]=tempJudul;
relurls[informasi]=tempUrls;
relcuplikan[informasi]=tempCuplikan;
relgambar[informasi]=tempGambar
}
var rangkumanPosts=0;
var r=Math.floor((reljudul.length-1)*Math.random());
var rini=r;
var relhasil;
var dirURL=document.URL;
while(rangkumanPosts<relmaxtampil)
{
if(relurls[r]!=dirURL)
{
relhasil="<li class='news-title clearfix'>";
relhasil+="<a href='"+relurls[r]+"' rel='nofollow'target='_top' title='"+reljudul[r]+"'><img src='"+relgambar[r]+"' /></a>";
relhasil+="<a href='"+relurls[r]+"' target='_top'>"+reljudul[r]+"</a>";
relhasil+="<span class='news-text'>"+relcuplikan[r]+" ... <span class='news-text'>";
relhasil+="</li>";
document.write(relhasil);
rangkumanPosts++;
if(rangkumanPosts==relmaxtampil)
{
break
}
}
if(r<reljudul.length-1)
{
r++
}
else
{
r=0
}
if(r==rini)
{
break
}
}
}
//]]></script>

-Phase one is complete, proceed again to find the code :

<data:post.body/>

-Add the following code below:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='terkait-emakalahonline'>
<h2>Related : <a expr:href='data:post.url' expr:title='data:post.title'><data:blog.pageName/></a></h2>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'/>
</b:loop>
<ul id='relpost_img_sum'>
<script type='text/javascript'>related posts();</script>
</ul>
</b:if>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

-Save The Template