Saturday, March 12, 2011

How to add related post widget for blogger

How to add related post  for blogger
1. Log it to your blogger and go to Design >> Edit HTML

2. First,download the present template as a backup.

3.Make sure you put check mark to “Expand Widget Templates

4.Find this tag by using Ctrl+F  <data:post.body/>

5. Paste below code after <data:post.body/> tag

<!--related post started-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h2>Related post</h2>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 3;
maxNumberOfPostsPerLabel = 5;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
<!--Bloggertrix.com-->
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

<!--related post end-->


* If you want to add more post , change the value of   maxNumberOfLabels
* If you want to add more label, change the value of   maxNumberOfPostsPerLabel

6. Now click save template you are done.

36 comments:

  1. very useful tutorial,thanks.

    ReplyDelete
  2. http://worldofdefense.blogspot.com/2011/05/sukhois-detected-aircraft-like.html
    This is a much better gadget it shows you related news too and if the tags are not found it gives you an option to search too and on the home page it brings all kind of news and posts

    ReplyDelete
  3. I tried this in my blog but its not working I wonder why? Hope you can help me . Thanks

    ReplyDelete
  4. Thank you for the nice tutorial.

    For a simpler way to add a related post, check out this tutorial which show how to add a related post in less than 2 mins.

    Hope it is useful to all!!!

    ReplyDelete
  5. very nice: it really helps on my blog: http://stuffyoumaylike.blogspot.com
    I have now a related post..:) thanks for sharing..

    ReplyDelete
  6. thanks for this but it does not support my blog.
    My blog is :
    Http://Musicnightmare.blogspot.com

    ReplyDelete
  7. hey admin, i have a problem finding in my blog and so i dn't knw whr to paste this code...hope you can help me out with it...http://webtrends2011.blogspot.com -this is my blog...waiting for ur reply..

    ReplyDelete
  8. thanks for this. really worked on http://trueinternetworld.com

    ReplyDelete
  9. @ Edward, you have to find a tag, showing on 4th step.after found it,you can paste the code.

    ReplyDelete
  10. Thanks, it works on my blog!

    Http://igoroyoroyo.blogspot.com :D

    ReplyDelete
  11. thanks pal. this works perfect of me check it on http://www.trueinternetworld.com

    ReplyDelete
  12. thank you very much

    ReplyDelete
  13. Hello Dear,
    Its not working for me. Is it a fault in my template ?
    Wiki For You
    Thanks.

    ReplyDelete
  14. working perfectly. but labels are black. how to change their colour.
    http://shirdisaibhajanlyrics.blogspot.com/2011/04/hamsar-hayat-ganesh-vandana-lyrics.html

    ReplyDelete
  15. Thanks alot for sharing with us,i will install this widget after this

    ReplyDelete
  16. Thanks for sharing this.........

    ReplyDelete
  17. How to change the color of the relates posts and the links please tell me.

    ReplyDelete
  18. nice widget i've try it on my blogs, thank you its work fine

    ReplyDelete
  19. Thanks for sharing for my blog xay dung use this very resonable

    ReplyDelete
  20. thanks you very much, I searched this and found it here

    ReplyDelete
  21. How can I remove the labels. I just want it to show related posts but hide the label. Thanks!

    www.allgreektoyou.com

    ReplyDelete
  22. very nice: it really helps on my blog: http://mytopfreeware.blogspot.com
    I have now a related post..:) thanks for sharing..

    ReplyDelete
  23. Thanks friend I used this script to my blog.

    ReplyDelete
  24. Thanks Bro ! it's working, with my poor css knowledge, customize it. Take a look http://epsvector.blogspot.com/


    Thank you very, i have try to use linkwithn and other, but it make my blog load slower, but with this..... COOOOOOL!!! Thanks ;)

    ReplyDelete
  25. Thank you so much for this post, i did it. Can I ask something from the author who wrote this tips? I am looking for "related post widget for blogger" but this time, a related post widget with a little sentence (summary snippet).

    Wordpress has a tutorial for that, but in blogger I am trying hard to find that kind of codes, please post it if you have already that blogger tutorials.

    That related post with summary snippet could also help blogger using blogger.com in terms of SEO. Thanks for your time. I am looking forward to see your blog updates.

    Please comment on any pages in my blog at Gilbert Canda so that I will be reminded, I am really looking for that tutorial. I highly appreciate your effort in sharing blogger customization.

    ReplyDelete
  26. Hello and thanks for the tutorial, i tried to incorporate this code but nothing seems to happen, what could be the problem, thanks

    http://mastercircuits.blogspot.com/

    ReplyDelete