How to add blogger related post widget in blog

on

How to add blogger related post widget in blog

This is awesome widget in blogger for showing related post from your blog posts. This widget show the post which is related to your post category/tag/label by using this your readers can read your blog for a long period of time and visit your site many times. So here you check how to install this post in your blog. How to add blogger related post widget in blog step by step method..
blogger related post widget in blog

How to add blogger related post widget in blog?


  • Open layout- open Edit html in your blogger dashboard
  • Search this </head> tag.
  • Add this code now before this one </head>

<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/AVvXsEjmBSWY5tUPOKiU1OLTNoqOSSTBoY95q4hmopl_16ty9WP3KAZKusjkW-IqaOjBmVswrX0zhzXXrLK-Mt8Obbd8PEgARsVbr0mOMYIbZBo6Kfep9c67Aogy1SfTzQ5xAU8EZzwQqZNckDs/") 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://yourjavascript.com/10121340032/btsnts_related_posts.js' type='text/javascript'/>

  • Now time to search this <data:post.body/> or if you cant find this search for this <div class='post-body>
  • Add this code after that <div class='post-body>
<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>

  • Time to save your work 

Comments

Post a Comment