Make a related article on Blogger / Blogspot

This time I will discuss about how to make widgets related articles such as blogs that I have this.

1. Sign in to Blogger
2. Click the Layout
3. Select Edit HTML
4. Search code below:

</head>

5. Add the code below, right above the code  </head>

<style>

#related-posts {

float : left;

width : 540px;

margin-top:20px;

margin-left : 5px;

margin-bottom:20px;

font : 11px Verdana

margin-bottom:10px;

}

#related-posts .widget {

list-style-type : none;

margin : 5px 0 5px 0;

padding : 0;

}

#related-posts .widget h2, #related-posts h2 {

font-size : 20px;

font-weight : normal;

margin : 5px 7px 0;

padding : 0 0 5px;

}

#related-posts a {

text-decoration : none;

}

#related-posts a:hover {

text-decoration : none;

}

#related-posts ul {

border : medium none;

margin : 10px;

padding : 0;

}

#related-posts ul li {

display : block;

background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo1QcleOrQQk8ZB5lcxlV5XNkYsdhyphenhyphenA9auwb3VNZkUaJpQrX9e-1bt44NTAprCHZfxAnzUfV36hMiAvUhNv6rFDRoRkv7YG9_Y8Zlq7reMXTm55K-7G2jqkK5zgmUjYovuhJVod7rSFPk/") no-repeat 0 0;

margin : 0;

padding-top : 0;

padding-right : 0;

padding-bottom : 1px;

padding-left : 21px;

margin-bottom : 5px;

line-height : 2em;

border-bottom:1px dotted #cccccc;

}

</style>

<script src='http://zonabagus.googlecode.com/files/Related%20Posts%20Widget.js' type='text/javascript'/>

6. after that look for the code <p><data:post.body/></p> must expand widget templates you have checked

7. Add the code below, right below the code  <p><data:post.body/></p>

<b:if cond='data:blog.pageType == "item"'>

<div id="related-posts">

<font 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 != &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=5&quot;' type='text/javascript'/></b:if></b:loop> </font>

<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();

</script>

</div></b:if> 

8. Then Save Template.
I hope this tutorial useful