Related Post Widgets For Blogger

Save on Delicious

Related Post widgets option for your blog to stay blog readers more time in your blog. My today post is about blogger related post. Some days ago in this blog i have write another post about How to Show related post in blogger. To day i am writing another post about how to show related post in blogger or how to add related post widgets in blogger. I think this process is much easier then my previous post. But This Widgets does not work for any one please try the previous Post about how to show related post in blogger. Now Let see how to add related post widgets in blogger easily.

Instruction For Adding Related Post In Blogger

Go to Layout > Edit HTML in your Blogger Dashboard.
Back up your existing Template before making any changes!
Make sure to check the "Expand Widget Templates" box.
Search for the </head> tag.
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/AVvXsEg5GcEMnTsqIBbLEfGYuLSqHgB_C_KnCwQLtgevg0NY3tAeQNqKbaYi3IBj8S54FPi0OzHsz5S6G4kj2DZt7u4GGJrwDd1t0zHJi4mKPneyrKRMVG9iAD8e9C3R01ub4GYZd0HmfEihrQE/") 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/zawherads/Related_Posts.js' type='text/javascript'/>

6. Now search for <data:post.body/> . In some of the templates this code may look like this <div class='post-body> or <data:post.body/>
7. Add the following code just after 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>

8. Now Save your Template and you're done!