Add Related Posts Without Thumbnail For Blogger

Link within widget to show related posts below every blogger posts is quite popular and useful. But however, there are not every posts that has at least one image in it. Thus, showing related posts with thumbnails may not be chosen by most blogger who in fact may choose to show related posts without thumbnails below blogger posts. If you are interested to show your visitors your blogs related posts without any thumbnail, then lets just do it.

Related Posts Without Thumbnail in Blogger

Step one: Go to Template >> Edit HTML

Step two: Press Ctrl+f Then find </head> and just above it paste the code below.

<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, &#8220;Times New Roman&#8221;, 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(&quot;http://www.netanimations.net/red-arrow-right.GIF&quot;) 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, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
} </style>
<script src='http://blogfilez.googlecode.com/files/related.js' type='text/javascript'/>

Step three: Now again, find <data:post.body/> and just below it, paste the following code.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 == &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>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
<div align='right' style='font-size:11px'><a href='http://qasimple.blogspot.com/2013/08/add-related-posts-without-thumbnail-for.html'>Related Posts for blogger</a></div></div>
</b:if>

Step four: Now click on Save Template and Enjoy!

Are you happy with this post? If you are not happy or facing any kind of difficulties please leave a comment and share with me i will guide you. Stay tuned and good luck!

Disclaimer: There are many different styles in different blogs' template. So having difficulties to fit this widget in your blog perfectly. But if you are facing any kind of problems, then please leave a comment below. I will help you for sure!

Related Posts: