LIST OF RELATED ARTICLES WIDGET FOR BLOSPOT BLOG
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/AVvXsEhsofCrUbRgCS4xoSRPdNiCP42q1b1ceK39nvXAw5pR8Q314E3vosb0vMPGbTMrK7O7N32I6cC27lDuZQQv91INuVuQeahH3cjYY2X3lnhmeYj2iEhyphenhyphenRIAGrXpcRoxTIJi-Z7pMPI0hNVo/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/AVvXsEjfv2jILZDosuojl6mBc0rUrYQ_PbcR_Zq_ZFAT9lvVxxp2rf8CrT5F3m3MCX0P0SHu5Gejs2Y8P84b4nPg52Jp0TGLxy1Q9hukMlshfU7eb1bZhERKk37lrIiw6RIvsWq3uy258AiaUEyP/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.
Tags: blogspot tutorial
Previous Article
Subscribe to:
Post Comments (Atom)
Share your views...
2 Respones to "LIST OF RELATED ARTICLES WIDGET FOR BLOSPOT BLOG"
This stuff is down t earth, hats off buds out there.
writing
19 February 2013 at 14:44
Find all kind of Directory sites in one very own blog.We have free directory, social bookmarking sites, article submission sites,press release sites,rss feed sites,blogs submission sites,free web directories listfree web directories list, seo web directory sites, list of free directories,free directory list..
5 March 2013 at 13:32
Post a Comment