6.13.2008

How to Put Related Post On Blogger

4 comments

This is a Related Posts step-by-step Manual Instructions. Before applying this blogger hacks (may i call it a blogger hack? : ) I recommend you to create a dummy / test blog, so everything will still be under control if you are having trouble with it.

Actually Related Article by Label has already created by Hoctro, you may want to read the original article on hoctro blogs here.

This code was modified by Jacky Supit. He is the author of Jackbook. He is a Money Maker and a Master of Blogger. You may want to visit Jack on Jackbook.

Before you do anything in your template, please backup your template.

On your blogger dashboard, Click Layout -> Edit HTML -> Download Full Template.

After you have backup your blog. I going to teach your how to add "Related Post" code in blogger.

Step by step to install the RELATED POST FOR BLOGGER / BLOGSPOT.

Step 1

On your blogger dashboard, Click Layout -> Edit HTML -> Expand Widget Templates.

Step 2

Find this code below.

<data:post.body/>

Step 3

Copy this code below, and paste right after the code <data:post.body/>.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->

<!--
Modified by JackBook.Com to make it easier to use.
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->

<div class='widget-content'>
<h3>Related Posts by Categories</h3>
<div id='data2007'/><br/><br/>
<div id='hoctro'>
Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u> | <u><a href='http://www.jackbook.com/' title='Related Posts on Blogger Modified by JackBook.Com. Read More?'>Jack Book</a></u> | <u><a href='http://djyano.blogspot.com'>The-Online-Quest</a></u>
</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>


Example :

<data:post.body/>

Related Posts Code Here

Step 4

Save your template. Refresh your blog, and Done.

That’s all. Enjoy!

Note: Related Posts is a list of all posts related to some article based on the labels. And because this uses Javascript, if you want to create a list of posts related by content, it might be pretty hard to do currently.


Comments

4 comments to "How to Put Related Post On Blogger"

Kwame Owusu said...
January 30, 2009 at 6:59 PM

Hey, there,

You have a nice blog going on here. I was wondering how you customized you "Related Posts" section. I think it looks great.

Regards,


Kwame


Kwame

Anonymous said...
March 3, 2009 at 5:35 PM

I did this way, but no related posts appear. I don't know why. Please recommend me via http://www.lyricsvideo.net

Thank you very much!

jco said...
August 29, 2009 at 11:22 AM

I tried using the steps that was given here but it doesn't work on my blog. Thanks anyway.

spawn said...
September 25, 2009 at 7:00 AM

works fine for me
http://mespawn.blogspot.com/

thanks a lot!

Post a Comment