How to Add feed style related post widget to Blogger ~ Blogger Tips And Tools |Latest Blogger Tricks| SEO Tips

How to Add feed style related post widget to Blogger

Hi friends now add feed style related post widget below all post in blogger easily.

Follow simple step to adding this related post widget in your blogger blog ---->>>>

* First go to your blogger Dashboard.

* Now click in design tab and edit HTML.

* Click in small box to expand your blogger template.

* Now find this code </head> by CTRL+F key and copy below code and paste before </head>

<script src='http://yourjavascript.com/164413501/Relatedposts.js' type='text/javascript'/><script type='text/javascript'>

  var _gaq = _gaq || [];
  _gaq.push([&#39;_setAccount&#39;, &#39;UA-21840797-1&#39;]);
  _gaq.push([&#39;_trackPageview&#39;]);

  (function() {
    var ga = document.createElement(&#39;script&#39;); ga.type = &#39;text/javascript&#39;; ga.async = true;
    ga.src = (&#39;https:&#39; == document.location.protocol ? &#39;https://ssl&#39; : &#39;http://www&#39;) + &#39;.google-analytics.com/ga.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<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/AVvXsEho43l19PceWkD2836w_0qMZjeOMjCU8BCapYq5rvq06zAONQgse8ehF7WLrlbyScxIycZPWgUUb53M6rtFZT8vzeNuXT1EKjeKqAUeAyRvZaGfi83oZ4Shqtc1zbBVTp3Yckf8b1iKfzo/") 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>

* Now again find this code by <div class='post-footer'> ctrl+F key.

* Now copy below code and post before <div class='post-footer'>

<div id='related-posts'>
<font face='Arial' size='5'><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>

* Now click to save your blogger template and now you are done.