in Uncategorized

How I Added Related Posts Widget To Blogger Blog

updated 76 Comments

Many readers of your blog will spend more time on our blog after reading a post, if they see more related posts. If you really want to increase the page views of your blog, then you must be showing related posts under each post on your blog. In this post, I am sharing with you, how I added a widget/plugin to my blog , which displays list of related posts below each post on my Blogger blog.

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

To add the related posts widget you will have to follow the steps below:.


==> Log in to your blogger dashboard
==> From there go to Layout > Edit HTML and tick the expand your widget templates box (option on the right). If you are using new Blogger dashboard, go to Template > Edit HTML
==> Click inside the HTML and use CTRL+ F to find </head>

Right 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(https://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=”https://www.ogbongeblog.com/2012/01/how-i-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′> 
OR 
<p class=’post-footer-line post-footer-line-1′>

Now paste the code below immediately after any of these lines (whichever you could find): 

<!– 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–>

Click on Save Template.

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

Note: If you did not add a label (category) to a post, you might not see the related posts below it.

You can alter the CSS rules if you want to customize the look and feel

Feel free to share your recommendations or or questions via the comment form.

You can also check out:

“How to Add Related Posts With Pictures Under Each Blogger Post “

How To Add Related Posts Widget To Blogger Mobile View

Cheers!

Please Share :

Receive Alerts In Your Email Inbox

Enter Your Email Address Below To Receive Latest Updates via Inbox, Free of Charge!

What do you think?

93 Points
Upvote Downvote

Written by Jide Ogunsanya

Pro Nigerian Blogger, Digital Marketer and Web designer. I help business owners to grow their businesses online. You can join my Facebook Group here or join my Telegram Group here.

Comments are closed.

76 Comments

  16. Great information Jide. I have tried it and have seen that it worked perfectly well on the custom mobile template. However I am very keen to know how to costumize the default mobile version of my blogger blog. For example, the default mobile version of this blog(ogbongeblog) shows ads, related posts and many other valuable widgets. I have faith that you will reveal this mystery to me and those intrested.

    Sincerely, Adoga | TIPCYCLOPEDIA

    0

  57. First of all, great work you’re doing, Jide. However, I’ve tried to implement your codes and other codes especially concerning RELATED POST WIDGET, MAKING POST APPEARED SIDE BY SIDE ON MY BLOG DESKTOP AND CUSTOMIZED SHARE SOCIAL BUTTONS but to date none seems to work which could be because I’m not that coding savvy. Nevertheless I’m not giving up untill I get those three things implemented on my blog: My question is how can you be of help to get those things done personally or by referrals and at what cost? Thanks!

    0

  59. Hello,
    I tried you process but it did not come out fine instead those words are appearing on my header when someone views my blog. How do I delete it please?

    Secondly,

    Couldn’t find the second code on my html page

    0

Sharemobile.ro: Download Java, Symbian Applications and Games

Get a Valentine Hamper (Chocolate Cake, Chocolate Bars, Red Rose Bottle of Wine)