Method 1:
The related posts widget will display a latest related posts segment below your blog post. The related posts widget collects the related posts from those blog posts having the equivalent label as the present post.
To execute the related posts widget you will have to go with following easy understudy steps.
Step 1: Go to: DESIGN>> EDIT HTML>> check “EXPAND WIDGET TEMPLATES”.
Step 2: Find following code,
]]></b:skin>
And exactly below this, paste following code
570px : you may change this according to your post content size.<style> #related-posts{float:left;width:570px;margin:20px 20px 20px 0px;}#related-posts .widget{list-style-type:none;margin:5px 0;padding:0;}#related-posts .widget h2,#related-posts h2{color:#940f04;font-size:20px;font-weight:400;margin:5px 7px 0;padding:0 0 5px;}#related-posts a{color:#054474;font-size:11px;text-decoration:none;}#related-posts a:hover{color:#054474;text-decoration:none;}#related-posts ul{margin:10px;padding:0;}#related-posts ul li{display:block;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinnv9eOYtfbD4hKd3Jmwvb9FDxlhV2ypu40OB6k1eq06quXCzVUFTCqlCbfkV6LkaRPS_5GoWM-sC31bGTzo_z2153zZJnVbaSFz7dkv4uA31hh631XdA2IuNH1aVZpBVH2RsSo_3wTsg/s400/Proknowliz+bullet+.png") no-repeat 0 0;line-height:2em;border-bottom:1px dotted #ccc;margin:0 0 5px;padding:0 0 1px 22px;}</style>
Step 3: Find following code,
<data:post.body/>
And exactly below this, paste following code
<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'><div style='background-color: none; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Nv4U1abQJxQkheZt3KePdDEY7hF7YSyUdgifhjmnlcnBPHRKNzccMS4gXLPup8M9BdX0l_ZZyVlszHdfoICQCCthS2YTYuD27v-YGIAHID2P9-5__paE1Eqk-RX73f768q30aHrW4rQ/s1600/backgrounds-sprite.png) 0 0 repeat-x; font-size: 13px; padding: 10px; border: 1px solid #CCC; border: 1px solid rgba(0, 0, 0, .15); margin: 0 0 1em; max-height: 36px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; line-height: 14px;'><b>See other Posts on <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop></b></div><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script> </div></b:if>
5: You may change this number for showing total number of post titles in this widget.
You may paste this code according to your requirement of blog template; below post or title.
Step 4: Save Template.
Method 2:
We can add related posts plugin to your blogger blog in two methods. Let me guide you with those two methods one by one. But remember to take a backup of your existing template before editing and adding related posts widget.
1. Log in to your blogger Dashboard.
2. Navigate to your blog’s Layout >> Edit HTML
3. Expand your widget by clicking on Expand widget templates
4. Find the following code in your template. (Press Ctrl+F to make a search)
<p><data:post.body/></p>
5. Now paste the following code just below the above code.
<b:if cond=’data:blog.pageType == “item”‘>
<div class=’similiar’>
<!– *****************http://blogger.com*****Jan,2007****************** –>
<!– *****************Related Articles by Labels – Take Two****************** –>
<!–
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/>
<div id=’SolidBlogger’>
Related Posts Widget by <u><a href=’http://solidblogger.com’>SolidBlogger</a></u>
</div>
<script type=’text/javascript’>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
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);
}
}
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>
6. Check out the below screenshot for the correct implementation of the code.
7. Save your template to see that you have just added the related posts plugin to your blogger blog.
8. You are done.
Method 3:
Unlike the above manual method, second method allows you to add related posts widget with a single click. Follow the below steps.
- Click on the below button.
3. Give a proper title to this widget. You may want to name it as “Related Posts“.
4. Click on Add Widget to get this widget added to your blogger blog’s sidebar.
5. You can change this widget’s location by placing it just below the blog post‘s widget.
Now it will be displayed in Blog post >> Comments >> Related Posts order.
6. Now if you want to add this just below the blog post and above comments, follow the below steps.
7. Navigate to Layout >> Edit HTML >> Expand Widget Templates and search for the below code.
<div class='post-footer-line post-footer-line-3'/>
...
</div>
8. Add the following code just below the above code in your template.
<div id='related_posts'/>
9. Now the whole code should look like the below screenshot :
10. Save your template at this point.
11. Now again search for </body> tag in your template. You can also scroll down to end of your template, it’s located there.
12. Add the following codes just above that </body> tag.
<script src='http://www.google.com/jsapi'/>
<script src='http://brps.appspot.com/brps.js' type='text/javascript'/>
13. Save your template and you are done.
These are the methods to add Related posts blogger widget on your blogspot blog. You can follow either the first or the second method to get the related posts showing just below your blogger posts.
If above methods are not working: Click Here For another methods
