How To Added Related Posts Widget To Blogger Blog

4
147
 

How To Added Related Posts Widget To Blogger Blog


Do you want to add related post widget to your blog?Adding Related post widget is no longer super story in the blogging sphere. I wonder what you’re currently doing. Although the resurgence of WordPress CMS seems to have outclassed and outranked the  Blogger platform.
When it comes earning or making reasonable amount of money from your blog especially Adsense, page views counts proportionally, if am wrong kindly correct me. Nobody is beyond error.

Related post: How Can i Use Infolinks and Google AdSense Together?

Recently I stumbled on a blog post on How to Add related post widget to blogger blogs from ogbongeblog. After going through that guide on how to add related post widgets, I decided to replicate the same for my readers. So many readers will find it interesting to see related topics with regards their keyword searched through Google. Having such tools in your blog performs a lot of action, Does it makes sense?

This post will reveal how I added the related post widget/plugin to my blog , which displays list of related posts below each post on my Blogger blog.

Yesterday, although my schedule was tight, I had to publish a post on How to Practically Remove the Blogger Attribution Widget from Your Blog.

I hope you’re delighted after going through it.

Additionally, the related posts widget will show a new related posts section below your post. The related posts widget digs out the related posts from those posts having the same label as the current post.

To add the related posts widget to blogger blogs, please kindly follow the illustrated instructions below without mistakes

  • Log in to your blogger dashboard
Go to Template > Edit HTML 
Click inside the HTML and use CTRL+ F to find </head> Immediately above </head>, paste the code below.
<!–Related Posts Scripts and Styles Start–>
<style>
#related-posts {
float : left;
width : 350px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(http://2.bp.blogspot.com/_u4gySN2ZgqE/SnZhv_C6bTI/AAAAAAAAAl4/Rozt7UhvgOo/s200/greentickbullet.png) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style><script type=’text/javascript’>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length – 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length – 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length – 1) * Math.random());
var i = 0;
document.write(‘<ul>’);
while (i < relatedTitles.length && i < 20) {
document.write(‘<li><a href=”‘ + relatedUrls[r] + ‘”>’ + relatedTitles[r] + ‘</a></li>’);
if (r < relatedTitles.length – 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write(‘</ul>’);
document.write(‘<a href=”http://247amend.com/2016/01/how-to-added-related-posts-widget-to.html” target=”_blank” rel=”nofollow”><font size=”1″ color=”black”>[Get Related Posts Widget for Your Blog]</font></a>’);
}
//]]>

</script>

<!–Related Posts Scripts and Styles End–>

 
Click on Save template

Now use CTRL+F to find this line of code
 

<div class=’post-footer-line post-footer-line-1′>
Now paste the code below immediately after any of these lines (Any of them you find sooner):<!– Related Posts with Thumbnails Code Start–>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<div id=’related-posts’>
<font face=’Arial’ size=’3′><b>Related Posts: </b></font><font color=’#FFFFFF’><b:loop values=’data:post.labels’ var=’label’><data:label.name/><b:if cond=’data:label.isLast != &quot;true&quot;’>,</b:if><b:if cond=’data:blog.pageType == &quot;item&quot;’>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;’ type=’text/javascript’/></b:if></b:loop> </font>
<script type=’text/javascript’> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!– Related Posts with Thumbnails Code End–>
CreditOgbongeblog Click on Save Template.

Now, go ahead to view one of your blog posts. You should see the Related posts below it.

You must comprehend that if you did not add a label (category) to a post, you might not see the related posts below it. So carefully do that before following this guide.

In order to alter the look and feel of the widget, you have to meddle with the CSS coding.

If this tutorial/guide was interesting, kindly share with your friends and fellow bloggers.


  • BUYJOBS -Aptitude Test Practice Questions By Clicking Here

  • GETComplete Guide on How to Get Between 10,000 to 1 million Instagram followers in less than 12 MonthsClick here

  • Get Email Address Database from 500k to 5Million US,UK,CANADA & Europe users–Click Here

 

Additionally, you can use the comment box for more related information.



Never Miss An Update; Like Our Facebook Page, Follow Us On Twitter INSTAGRAM Channel. You can also ASK 247AMEND   Any Question Here


Bonus Adverts=> Get Your Ads, Text links,Product Reviews,Music/Videos & Movies  Review Ads, Sponsored contents and Guest post on 247amend for only $45 Per month–Contact us Here to make payment…With Subject Line>>Bonus ADS!! 



 

4 COMMENTS

  1. We've been adding and organizing hundreds of innovation videos onto the innovationvideos.com site. Do you have any videos that you'd like us to add? Perhaps you've done a Ted Talk, presentation, demo, shared some tips, etc. Or, maybe you have a video about innovation you would recommend to others.

     

Leave a Reply