How to Add Related Post Widget for Blogger

Do you think adding related post widget on blogger.com is impossible?

In this post I show you how to do just that. With this trick, lots of your visitors will remain on your site for longer period of time when they see the related post widget just below of each for your blog post.

Preview of the related post widget.

Following this exact steps can lead you in great result.

Step 1: Log in to you blogger account.
Step 2: Go to Dashboard > Template > Edit HTML.
Step 3: Back up your template for incase.
Step 4: Click the Expand Widget Templates checkbox.
Step 5: Find this code (press CTRL F and paste the code)

</head>

Step 6: Add this code before the code above.

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; 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 : normal; 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/AVvXsEhyMSb4_gmqqC8UpAjVwJIxd4O1DnAY_DDgN9BDzB16ZheTu7ANNM20sk4yIQd2_AGRMXRvo7tWYmQKoNFVuwBkk-spomOJ-VmXE7hNvTA66ZTy-3yzCDj1KaiRhGT9hedcblDCERFsvCs/") 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='http://theblogtemplates.com/scripts/Related_posts_hack.js' type='text/javascript'/>

Step 7: Find one of the code below, it depends on your template.

Option 1: <data:post.body/>
Option 2: <div class='post-body>
Option 3: <data:post.body/>

Step 8: Add this code below one of the code above in Step 7.

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><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 != &quot;true&quot;'>,</b:if><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> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

Step 9: Save your template, and your done.

If you want to change the maximum related post displayed in each of your every post, find the code below and change it with your desired number.

max-results=5

I hope this post will help you making your site better.

If you have any questions or suggestion write a comment, and I will be glad to help.