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.

35 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. very nice: it really helps on my blog: http://stuffyoumaylike.blogspot.com
    I have now a related post..:) thanks for sharing..

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

    ReplyDelete
  6. 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
  7. thanks for this. really worked on http://trueinternetworld.com

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

    ReplyDelete
  9. Thanks, it works on my blog!

    Http://igoroyoroyo.blogspot.com :D

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

    ReplyDelete
  11. thank you very much

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

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

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

    ReplyDelete
  15. Thanks for sharing this.........

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

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

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

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

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

    www.allgreektoyou.com

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

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

    ReplyDelete
  23. 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
  24. 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
  25. 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