To keep the visitors stay longer in our blog is every blogger's dream. Therefore, we will need a real effort to do in order to keep visitors stay much longer to explore and read further our blog. By adding a related posts plugin to our blog post can be one of the many efforts that can keep visitors from leaving our blog. Adding related posts plugin is also a great way to encourage readers on reading other articles in our blog that have relevancy with the post they are currently reading, which eventually will also increase the number of pageviews of our blog.
Anyway, related posts plugin is a widget that shows you a group of titles (under the post footer) that has a relevance with the post you are currently reading, depends on the "labels" you've already set on that article.
But if you don't understand with what related posts plugin really is. Look at the picture below.
Okay then, if you are really interested on installing this related posts plugin on your blog, read the rest of this article to find out how...1. Log in to Blogger
Now visit Blogger.com and sign in to your account.
2. Go to Edit HTML
In the Dashboard page, press Layout/Design > Page Element > Edit HTML.
Anyway, before any attempt to edit your blog template, i think it's a wise decision to save your existing template into your computer. Now click at the link Download Full Template.
In the Edit HTML Page, find a small box over the HTML box called Expand Widget Templates, and then, press it.
4. Find the code
By pressing Ctrl + F, now find the code below in your blog template.
<p><data:post.body/></p>
<div class='clear'/>
<div class='clear'/>
5. Copy the code
Now copy the script of related posts plugin below and then paste it under the code <div class='clear'/> (number 4). By adding this script code into your blog template, you are about to install the widget on the bottom position of blog articles.
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 5;
maxNumberOfLabels = 2;
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>
<span style="float: right; font-size: x-small;">Widget By <a href="http://www.blogger.com/http" www.whatmakesblog.com="">Tutorial for Bloggers</a></span>
</b:if>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts :</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 2;
maxNumberOfPostsPerLabel = 5;
maxNumberOfLabels = 2;
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>
<span style="float: right; font-size: x-small;">Widget By <a href="http://www.blogger.com/http" www.whatmakesblog.com="">Tutorial for Bloggers</a></span>
</b:if>
6. Save the Change
Now by pressing the Save Template button, save the current change you've just made.As you can in the result directly to your blog, the related posts plugin has been successfully installed into your blog.
Troubleshooting: The related posts plugin cannot be installed on your blog?
If your blog template has been added with the read more code, this related posts plugin will not work on your blog. Therefore, you must firstly find the location where the read more function in your blog template has been placed. Now find the code below by pressing Ctrl + F at the same time:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>
After that, paste the related posts plugin script code (on number 5 of this tutorial) in the middle of that code above. (Look at the red words)
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
Paste Your Script here!
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read more...</strong></a></p>
</b:if>
Hope that related posts plugin works perfectly on your blog and hopefully it can let the readers stay in our blog little bit longer. Okay, that's it for this tutorial. Are you having any trouble on applying this tutorial on your blog? Don't be shy, just leave your question on the comment section below. I'll try my best effort on helping you with your problem.
Good luck bloggy!
You might also like to read :
Share This Article to Other People Across the World !
Thanks!
Get the fresh update from Whatmakesblog.com!
To get updates from this blog, just enter your email address in the below subscription form and then click Subscribe.
Your email address will not be shared to any third party
Delivered by FeedBurner
Labels:
Posts,
Related Posts Plugin
6 comments:
How do i reduce the number of related items to display????
Okay, anonymous.
I'll show you how to set up the number of posts/labels shown on the Related Topic widget in my next post.. I'll see you around..
Anyway, i am sincerely sorry it took you so long to get my reply..
Thanks Daniel for the post on my query.
This is exactly what I have been looking for. Thanks again!
I'll keep visiting!!!
Hi!There is a problem in finding the code you gave to add in search bar.
Very useful widget, i used it and it increased my daily pageviews.
Post a Comment