How to Add Related Posts Widget to Your Blog ? I was looking for some way to make a related post, finally I found the easiest way to create a related post. This related post was made by widgetforfree, one of very nice blog to visit. Here's how to make a related post on the blog :
1. Go to Layout >Edit HTML in your Blogger Dashboard.
2. Back up your existing Template before making any changes!
3. Make sure to check the "Expand Widget Templates" box.
4. Search for the </head> tag. (use ctrl+f)
Add the following code just before the </head> tag.
<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/AVvXsEi8QZCOwOXkFCOP4c6kd2rt14WaODI7XOEjP5Qu48Q1wBlyYsBB3pgnoMMty2q4g4WDam-XzDP7_eWY3myF3H4qD1SdvbGhqRUU9dj2-UMLeImdbKdLHIwjXHsAuWyQJcTPEDTwuEn3h6o/") 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/widgetsforfree/scripts/Related_posts_hack.js' type='text/javascript'/>
look like this
<div class='post-body>
or
<data:post.body/>
6. Add the following code just beneath the code you just searched for.
<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 != "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>7. Now Save your Template and you're done!
Your related post will look like this :
Customization :
In order to change the number of maximum related posts being displayed for each label, search for the code below (within the code given in step 7) and change the number "5" to any desired number.
max-results=5
