Related Posts Widget for Blogger Without Thumbnail

Displaying related posts is one of the best ways to keep your readers engaged with your blog and to link new posts directly to other related posts that you've previously written. Sometimes bloggers need only related post without any thumbnails, so this is very beautiful related post widget which also increases the beauty of your posts.

In today's post I will be explaining 'How to use Related posts widget in your blogger blog without thumbnail?’. This widget will be helpful in displaying links to related posts beneath each post.

1. Go to Blogger Dashboard and Select Template.

2. Click on Edit HTML.

3. Back up your existing Template before making any changes.

4. Search for the </head> tag.

5. Add the following code just before the </head> tag.

<!--Related Post Widget Starts safetrickzz.blogspot.com-->

<style> #related-posts { float : left; width : 400px; margin-top:20px; margin-left : 0px; margin-bottom:20px; font : 12px Verdana; font-weight:bold; margin-bottom:10px; }

#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight: bold; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghUoonLOB98WdhMd-q9lVZkNBbPjNbY2h8sdOgZX0c9oE5aWQ56QeXdEfTlgMj5XPRurU8Ji2quALucrwP1YuIj6GMdB7V5irAEDFk1mxu7TZJeDIae6JX7yv4GTu4REWuqIfRYWZ0Z7c/s1600/bw.png") 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; } </style> <script src='https://sites.google.com/site/mukublogs/relatedPost.js' type='text/javascript'/>

<!--Related Post Widget Ends-->

 6. Now search for <data:post.body/> In some of the templates this code may appear twice or thrice then that condition search for <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

7. Add the following code just below/after <data:post.body/>

<!--Related Post Widget Starts--><b:if cond='data:blog.pageType == "item"'><div id='related-posts'><font face='Arial' size='2'><b>Related Posts : </b></font><font color='FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script></div></b:if><!--Related Post Widget Ends-->

 8. Now save your template.

Note: In order to change the number of maximum related posts being displayed for each label, search for the code [ max-results=5 ] and change the number "5" to any desired number.