Related Post Widget in Blogger [Tutorial]
12:35 PMIf you are on WordPress then you can add related or similar post in your blog easily because there are a lot of plugins are available for this purpose. Even you can also add related post with thumbnail easily.
But if you are on Blogger then it is not so easy to add related post widget because you can not use plugins in Blogger and you have to add code manually.
What is the basic requirements to show related posts below an article
Related posts is a must have widget which is added below article and there are following main reasons to add this widget;
In design option go to the “HTML editor”
Now use the Internet browser “Find” option and locate the following live of code
Now you have to paste the following code just below the above given line;
Save the template and you will observe related post with related tag ( categories)
Dhiti

Dhiti Live is an amazing way to show related posts with thumbnail and also related tags to browse. Dhiti Live is one of the most effective way to show related content on Blogger and WordPress. For Blogger you have to add just a gadget and for WordPress you can use its plugin.
nRelate

nRelate is another great way which shows related posts with thumbnail and with different styles. nRelate can also be added as a gadget in Blogger Blog.
Linkwithin

Linkwitihn is a very popular and easiest way to add related post with thumbnail in Blogger. You have to add just a gadget to add it in your Blogger blog. You can show maximum 4 related posts with thumbnails.
But if you are on Blogger then it is not so easy to add related post widget because you can not use plugins in Blogger and you have to add code manually.
What is the basic requirements to show related posts below an article
Related posts is a must have widget which is added below article and there are following main reasons to add this widget;
- Internal Linking
- Bounce Rate
Easiest way to add Related Post widget in Blogger
First of all login to your Blogger account and go to the “design option”In design option go to the “HTML editor”
Now use the Internet browser “Find” option and locate the following live of code
<data:post.body/>
Now you have to paste the following code just below the above given line;
<!--related post started-->
<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h2>Related post</h2>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 5;
var maxNumberOfLabels = 3;
maxNumberOfPostsPerLabel = 5;
maxNumberOfLabels = 3;
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);
}
}
<!--Bloggertrix.com-->
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>
<!--related post end—>
Save the template and you will observe related post with related tag ( categories)
Related Posts with Thumbnail
There are three plug and play ways are available with which you can show related posts with thumbnail and you will love both these easy to use plugins for BloggerDhiti

Dhiti Live is an amazing way to show related posts with thumbnail and also related tags to browse. Dhiti Live is one of the most effective way to show related content on Blogger and WordPress. For Blogger you have to add just a gadget and for WordPress you can use its plugin.
nRelate

nRelate is another great way which shows related posts with thumbnail and with different styles. nRelate can also be added as a gadget in Blogger Blog.
Linkwithin

Linkwitihn is a very popular and easiest way to add related post with thumbnail in Blogger. You have to add just a gadget to add it in your Blogger blog. You can show maximum 4 related posts with thumbnails.
fine trick but having problem because i found <data:post.body/> many times in my blog. Any idea?
ReplyDeleteIt is simple. If you have this code more than one time you can try for all ( I think it may be 2-3 times) and where you find the trick working, save the template.
ReplyDeletenicee... i'll be checking out...
ReplyDelete