How to Add a Simple Recent Posts Widget in Blogger

0
16
related posts widget

Every blogger’s dream is to see visitors spending more time on their blog which helps to reduce the blog’s bounce rate. This can be achieved in so many ways but the most popular method via which you as a blog owner can make your blog visitors spend more time on the blog is to add a related posts widget to the blog. With this widget added to your blog, visitors will be shown random posts that are related to the post they are accessing which they are likely going to click on, thus reducing your blog’s bounce rate.

The related posts widget I will be showing you guys today can be added to a Blogger blog by following the easy steps below;

  • Login to your Blogger Dashboard.
  • Navigate to Template >>> Edit HTML.
  • Click anywhere inside the Edit HTML page and search for </head> with the help of Ctrl + F.
  • Copy the code below and paste just immediately above/before the </head>
<style>

#EdHelper_RP {

float : left;

width : 350px;

margin-top:20px;

margin-left : 5px;

margin-bottom:20px;

font : 11px Verdana;

margin-bottom:10px;

}

#EdHelper_RP .widget {

list-style-type : none;

margin : 5px 0 5px 0;

padding : 0;

}

#EdHelper_RP .widget h2, #EdHelper_RP h2 {

font-size : 20px;

font-weight : normal;

margin : 5px 7px 0;

padding : 0 0 5px;

}

#EdHelper_RP a {

text-decoration : none;

}

#EdHelper_RP a:hover {

text-decoration : none;

}

#EdHelper_RP ul {

border : medium none;

margin : 10px;

padding : 0;

}

#EdHelper_RP ul li {

display : block;

background : url(&quot;https://www.educativehelper.com/wp-content/uploads/2019/10/educativehelper-pin.png&quot;)

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.educativehelper.com/2019/10/24/how-to-add-a-simple-recent-posts-widget-in-blogger/" target="_blank" rel="nofollow"><font size="1" color="black">[Get This Widget for Your Blog]</font></a>');

}

//]]>

</script>
  • Next search for any of the below code using Ctrl + F

<data:post.body/>

OR

<div class=’post-footer-line post-footer-line-1′>

OR

<div class=’post-footer-line post-footer-line-2′>

OR

<div class=’post-footer-line post-footer-line-3′>

  • Copy the code below and paste just after/below any of the code you found above.
<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=8&quot;' type='text/javascript'/></b:if></b:loop> </font>

<script type='text/javascript'>

removeRelatedDuplicates(); printRelatedLabels();

</script>

</div>

</b:if>

Changes to Make:

By default, the related widget will only display eight recent posts when added to your Blogger blog. To make the widget start displaying less than or more than the eight posts, simply replace the 8 in max-results=8 for the above code snippet with the number of posts you want the widget to display in your blog.

  • Finally click on Save Template and you are done.

Now check any of the post in your blog and you shall see the recent posts widget appearing below the post. Note that the recent posts widget can only appear below your posts if that post has been listed under a tag. This means that the posts that will be displayed in the recent posts widget will only be those posts that have the same tag as the said post that the visitor has viewed.