You have heared many about Related Posts With Thumbnail, Many Bloggers dont like it becouse, Many of there posts have no image.So then it look very ugly and un proffesional.So after a hard work i have completed the coding of Related Posts Without Thumbnail Widget For blogger.It looks very beautifull and display posts related ti the same Category or Label.
So lets start, How to add this widget ti your blog.Complete the below steps Carefully.
Step one: Go to Template >> Edit HTML. [In old blogger Go to Design >> Edit HTML] And then click on Expand Widget Template.
Step two: Find </head> and just above it paste the code below.
Step three: Now again, find <data:post.body/> in your blog template and just below it, paste the below code.
Step four: Now click on Save Template and Enjoy!
So lets start, How to add this widget ti your blog.Complete the below steps Carefully.
Step one: Go to Template >> Edit HTML. [In old blogger Go to Design >> Edit HTML] And then click on Expand Widget Template.
Step two: Find </head> and just above it paste the code below.
<!-- Related Post by www.hacking-articles.blogspot.com !-->
<style>
#related-postz { float: left; width: 100%; margin-top: 20px; margin-bottom: 20px; margin-left: 5px; line-height: 25px; font-weight: bold; font: 18px Arial,sans-serif; margin-bottom: 10px; }
#related-postz .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; }
#related-postz .widget h2, #related-posts h2 {
font-size: 0.7em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em; }
#related-postz a { text-decoration : none; }
#related-postz a:hover { text-decoration : underline; }
#related-postz ul { border : medium none; margin : 10px; padding : 0; }
#related-postz ul li {
display : block;
background : url("http://smallbusiness.chron.com/favicon.ico") no-repeat 0 0;
padding-left : 21px;
padding-bottom : 1px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
font-size: 0.7em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
} </style>
<script src='http://blogfilez.googlecode.com/files/related.js' type='text/javascript'/>
<!-- Related Post by www.hacking-articles.blogspot.com !-->
Step three: Now again, find <data:post.body/> in your blog template and just below it, paste the below code.
<!-- Related Post by www.hacking-articles.blogspot.com !-->
<b:if cond='data:blog.pageType == "item"'>
<div id='related-postz'>
<font face='Verdana' size='4'><b>Related Posts:</b></font>
<b:loop values='data:post.labels' var='label'><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=5"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
<div align='right' style='font-size:1px'><a href='http://hacking-articles.blogspot.com'>Get This Widget</a></div></div>
</b:if>
<!-- Related Post by www.hacking-articles.blogspot.com !-->
Step four: Now click on Save Template and Enjoy!
