there are many related post articles widegts for blogspot blogs like linkwithin and many more.but they show a related post thumbnail view of your articles.but if you want to show only related articles list for your blogspot blog.you can do that easily with the help some html codes.
the related articles will look like this.
 |
| related articles-post widget for blogger |
PROCESS TO SHOW RELATED ARTICLES-POST WIDGET FOR BLOGSPOT BLOGS:
to get started do the following things:
1-first back up your templates html codes.you do not want to lose your blog.
2-now just go to edit html page.
3-check on templates button.
4-search for this code.
</head>
5-now before this,paste this code directly.
<!--Related Posts Scripts and Styles www.bdlab.blogspot.com Start-->
<!--Remove--><b:if cond='data:blog.pageType == "item"'>
<a href='http://24work.blogspot.com' target='_blank' title='Blogger Widgets'><img alt='Blogger Widgets' border='0' src='http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png' style='position:absolute; top: 0px; right: 0px;'/></a><style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;
}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9oNDF_98zGtq5o0s1qlL0uQhuC-rpHz7DAs5_H5p5FejviJQTgSOCGvVSo3pQ5VPMd8IIM2TwlNg92o6xKt4_641YaOle-zw6-49qZizRXAjEiC7HbM2US9zTRJgzlfWuYRe1Ku0SsGc/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://safir85.ucoz.com/24work-blogspot/related-posts/related-posts-for-blogger-24work.js' type='text/javascript'/>
<!--Remove--></b:if>
<!--Related Posts Scripts and Styles www.bdlab.blogspot.com End-->
6-now,search for this code,
<post-footer>
now after this paste this code.
<!-- Related Posts Code www.bdlab.blogspot.com Start-->
<!--Remove--><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><a href='http://24work.blogspot.com'><img alt='Related Posts Widget for Blogger' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh14o6Nn563UPEBgsDFmhVPeVksoxFnGdmmD10dJ5hUqgsIcWukjQ6PZgSMO8eCgDadhCulWGi6Cj-MmE4RJX3DgfR9enYvPTfhdtXZOcJltFlT-8wlJ_6tZxTR7GLTaZN0NgLVfenpCZxa/s1600/blogger-widgets.png' style='border: 0'/></a>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
<!--Remove--></b:if>
<!-- Related Posts Code www.bdlab.blogspot.com End-->
7-save templates.refersh the blog and see the changes.
Jillur Rahman
I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.
No Comment to " LIST OF RELATED ARTICLES WIDGET FOR BLOSPOT BLOG "