Related Post blogger widget code without Thumbnails - How to Install Related posts custom code for Blog

Here we have come with a wonderful widget for displaying links to related posts below each of your blog posts. Displaying related posts is a very great way to help visitors staying longer on your blog. 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

Sample : Related post blogger widget without any thumbnails

How To Add Related Posts Widget Without Thumbnails?

Installation of related post widget is very easy just follow the given steps to install it.
Step 1: Go to Layout > Edit HTML in your Blogger Dashboard.
Step2: Back up your existing Template before making any changes!
Step3: Make sure to check the "Expand Widget Templates" box.
Step4: Search for the </head> tag.
Step5: Add the following code just before the </head> tag.

<!--Related Post Widget Starts mukutech.blogspot.com--><br /> <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/AVvXsEhomDYwr7c5toYmDBl8oy5H4bVbOOUZtACXKs9GnZc_1V5UShWQhEzpI3WZrvTgSCs3U7HSs-Rlh9FRf_S7EP-H4VQjfuCZozPvLM1MpzLbepLwx1Xj3H3Vbt99Z3T6NlWPr2NdKpoAs0Y/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-->

Step6: 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/>
Step7: 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&callback=related_results_labels&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-->

Step8: 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.

Enjoy!!! If you have any problem related to this Widget, feel free to reply me, I will try my best!!