Saturday, September 19, 2020
Home Blogging Tips & Tweaks How to Add a Simple Recent Posts Widget in Blogger

How to Add a Simple Recent Posts Widget in Blogger

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.

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

List of All JavaScript Arithmetic Operators With Examples

JavaScript offers several operators to help us work with numbers. All these operators are binary operators, which means they operate on two operands. The operands...

How to Find a Website’s RSS Feed’s URL

Having access to the RSS feed of a website gives you the opportunity to stay up-to-date on everything that website publishes. Whether that’s a...

Laravel: String data, right truncated: 1406 Data too long for column (SOLVED)

I was working on a project today when i ran into the error message "String data, right truncated: 1406 Data too long for column...

How to Enable or Disable Chrome’s Autofill on Android Devices

Storing your login details and other information in Chrome and/or your Google Account isn’t as secure as using an encrypted password manager, but it’s...

Recent Comments