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.

Note: If you have problem on installing this trick, please scroll down and read the update below. you can also the demo here. so if you have problem copying this code, you may download that template and copy the code inside it. thanks

update: to make you easier, you can download the related posts / articles on .txt file here.

Actually Related Article by Label has already created by Hoctro, and i must admit that he had done a really great job. that’s why I didn’t create this hack widget (oh I will mention it as Widget from now) from scratch. I use his widget and modifying it as a better and fit to my need.

First, you may want to read the original article on hoctro blogs here. There are couple thing I don’t like from the original widget. there are;

1. On Previous version, It uses 2 blog’s widget. Now I cut the code, so we can put it anywhere on the same blog widget. Why I don’t like to use 2 different widgets? Because your code would be too long, and you can not have your Related Post List right under your post area and Above the comment section. It is because it uses 2 different widgets.

Sure you can use 2 widgets and place the Related Post Lists under posts area and above the comment section, but that would make your code so not tidy. you with me?

2. On previous version, Users have to modify the code them self so they can use it. They have to fill a Parameter with their Blog Url. Now they need no more! I have modified the code so users will be able to use it just as simply as copy and paste.

3. On Previous Version, and this is important. The Current Article / Post will also be listed inside the Related Post/ Article Lists. that is not right isn’t? Related Posts / Articles means Other Articles / Posts which have relation with the current Article. Not the current Article it self.

I believe Hoctro knows all that points I mentioned above. And I’m sure it is easy for him to update and upgrade the code. It just i don’t know how to contact him, because he hide his comment section on his site. So..

Hope he will permit me to do this, I will modify the code by my self for your use. So here it is.

*Again, if you want to have the old version, you can go to that hoctro’s link above.

and here it is,

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

1. GO to your Template Editor, Under your blogger / blogspot Dashboard.
Click on the DOwnload Full Template Link. save your downloaded template as a back up, just to prevent in case you failed on applying this hack.

Then, tick the Expand Widget Templates.

2. Find this code below

<data:post.body/>

3. Copy this code below

update: to make you easier, you can download the related posts / articles on .txt file here.

<div class='clear-block;'/><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></div>

<script type="text/javascript">

var homeUrl3 = "<data:blog.homepageUrl/>";

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 10;

<b:if cond='data:blog.pageType == "item"'>

maxNumberOfPostsPerLabel = 100;

</b:if>

<b:if cond='data:blog.pageType == "item"'>

maxNumberOfLabels = 3;

</b:if>

function listEntries10(json) {

var ul = document.createElement('ul');

var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?

json.feed.entry.length : maxNumberOfPostsPerLabel;

for (var i = 0; i < maxPosts; i++) {

var entry = json.feed.entry[i];

var alturl;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

alturl = entry.link[k].href;

break;

}

}

var li = document.createElement('li');

var a = document.createElement('a');

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 < json.feed.link.length; l++) {

if (json.feed.link[l].rel == 'alternate') {

var raw = json.feed.link[l].href;

var label = raw.substr(homeUrl3.length+13);

var k;

for (k=0; k<20; k++) label = label.replace("%20", " ");

var txt = document.createTextNode(label);

var h = document.createElement('b');

h.appendChild(txt);

var div1 = document.createElement('div');

div1.appendChild(h);

div1.appendChild(ul);

document.getElementById('data2007').appendChild(div1);

}

}

}

function search10(query, label) {

var script = document.createElement('script');

script.setAttribute('src', query + 'feeds/posts/default/-/'

+ label +

'?alt=json-in-script&callback=listEntries10');

script.setAttribute('type', 'text/javascript');

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 = "<data:label.name/>";

var test = 0;

for (var i = 0; i < labelArray.length; i++)

if (labelArray[i] == textLabel) test = 1;

if (test == 0) {

labelArray.push(textLabel);

var maxLabels = (labelArray.length <= maxNumberOfLabels) ?

labelArray.length : maxNumberOfLabels;

if (numLabel < maxLabels) {

search10(homeUrl3, textLabel);

numLabel++;

}

}

</b:loop>

</b:loop>

</script>

</div>

</div>

</b:if>

3. Paste right after the code #2 (<data:post.body/>)
Please be flexible. You can do experiment by put the <data:post.body/> inside a <p></p> tag like this.

<p><data:post.body/></p> Then_the_related_posts_script_here

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.

Updates | Important Note :

For some people who always failed and/or getting error on installing this related posts trick. Kirk Warren from weeklycrisis.com has founded the solution for you. here is his comment

The reason you are getting the errors is because whatever he did with the formatting in this script boxes has ” and ‘ wrong. If you look at them in the Blogger template when you paste the code, they come off as ’ (notice it is slanted to the left, not straight down like a normal single quote [ ‘ vs ’ ]. Same thing happens with the ” and “. Notice how one is straight down and the other is to the right [” vs “]. This is what is causing all the hassles for people.

Most likely, when he recovered the post from Google cache, it had reformated the quotation marks on him and this is why you get that error. Manually replace all the ‘ and ” in that section of code and you should be fine.

update: to make you easier, you can download the related posts / articles on .txt file here.

Thanks

Have Our Articles Sent To Your Email, Free!

Blogging Related Only:


All Articles:

Readers who viewed this page, also viewed: