Wednesday, July 9, 2008

How to Add Related Post Widget to Your Blogger's Blog

I saw a lot of Wordpress blogs are having the related posts function after every post. I am curious why blogger does not provide such function for blogger's blog. So, I started searching the internet to search for answer.

I found a lot of posts that teach bloggers how to add related post to their blog but a lot of them are not working until I found a blog which has a full functioning code to enable blogger's blogs to use the related post function.

In order to place use the related post function on blogger's blog, you need to make several changes to the HTML code of your blog.

1. Login to you blogger.com account and then go to "Edit HTML".

2. Check the "Expand Widget Templates".

3. You need to find the following code:

<data:post.body/>
4. Copy all the code below and paste it after the code <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='similar'> <div class='widget-content'> <h3>Related Posts</h3> <div id='data2007'/><br/><br/> <div id='hoctro'> </div> <script type='text/javascript'> var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; 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); } } 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>

5. Finally, click "Save Template". That is it, your readers can now enjoy the newly added related post widget on your blog.

Don't Forget to Subscribe to eBlog Entrepreneur Feed & Get more Updates!!!

5 comments:

wendy presseisen, said...

i tried it and it doesnt show up on mine. is there some additional script that you have to add????

HELP!!!!

http://just-cool-design.com

Greenleaf said...

Hi wendy presseisen,
The "related posts" widget is not working properly sometimes. If my code doesn't work, you can try to use the code in the site below:
http://realtrix.blogspot.com/2008/09/create-related-posts-plugin-for-blogger.html

I hope the site will help you solve your problem. :)

Jerry said...

thanks

Ches said...

Hi thx it works on my blog but the result more than 4 related posts, how to reduce it to 4 posts only each label?

Greenleaf said...

Hi Ches,
I think that you can try to make some changes to the numbers of the maxNumberOfLabels, maxNumberOfPostsPerLabel and maxNumberOfLabels in the code. Try to make some changes, it might help you reduce the number of related posts.

Enjoy.

Related Posts with Thumbnails