Show Related Posts in Blogger Without Thumbnails - Nice Styling with Favicon

Blogger by default does not give several useful features however Developers have developed so many useful blogger hacks and tricks. One of these most useful blogger hacks is displaying Related Posts below each single post published in your blogspot blog. This hack displays related posts below your article which navigates your blog readers to other stuff from your blog. This is really a useful way to keep your readers on your blog for more time. "Related Posts" function comes with two options,displaying related links with Thumbnails or without thumbnails. Here we will talk about how to show related links without thumbnails

Step#1 - Show Related Links Without Thumbnails

• Login in Your Blogger Account
• Go to Dashboard > Design > Edit HTML
• Check "Expand Widget Templates" box
• Now search for this code

</head>

•  Replace this code with

<style>
#related-postz { float: left; width: 100%; margin-top: 20px; margin-left: 5px; margin-bottom: 20px; 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: 1.1em;
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 : none; }
#related-postz ul { border : medium none; margin : 10px; padding : 0; }
#related-postz ul li {
display : block;
background : url("http://4.bp.blogspot.com/-UL84g6GAxqA/Ti2byL9zDlI/AAAAAAAADpE/Z5sMO_1KN6w/s1600/ico.gif") 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;
font-size: 1.1em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
} </style>
<script src='http://blogfilez.googlecode.com/files/related.js' type='text/javascript'/>
</head>

• Save Your Template - Step#1 is finished.

Step#2 - Show Related Links Without Thumbnails

•  Search this code

<data:post.body/>

•  Copy-paste this code just Below searched code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-postz'>
<font face='Arial' size='4'><b>Related Posts:</b></font>
<b:loop values='data:post.labels' var='label'><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>
<a href='http://www.folsol.com/' style='display:none;'>zohaib</a>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
<div align='right' style='font-size:11px'><a href='http://www.folsol.com/2011/07/show-related-posts-in-blogger-without.html'>Related Posts for blogger</a></div></div>
</b:if>

• Save Your Template
• Its done!