How to Add Recent Posts in Blogger

In any blog, recent posts and popular posts helps the readers to access the recent posts and popular psots easily, which will increase the user engangement in a blog, in this article we will explain you the general code for listing the recent pots in any blogger websites.

for this,

We need to add HTML or JavaScript code to your Blogger blog, you can use the built-in "HTML/JavaScript" gadget. Here's a step-by-step guide:

1. Log in to your Blogger Account:
2. Go to Blogger and sign in with your Google account.
3. Access the Layout Section:
4. In your Blogger dashboard, go to "Layout" in the left sidebar.
5. Add a Gadget:

Find the section of your blog where you want to add the HTML or JavaScript code.

1. Click on the "+ Add a Gadget" link within that section.
2. Choose the HTML/JavaScript Gadget:

In the "Add a Gadget" window, find and click on the "HTML/JavaScript" gadget. This gadget allows you to add custom HTML or JavaScript code.

Add your HTML or JavaScript Code:

...

<div class="recentpoststyle">

<script type="text/javascript">

function showlatestposts(e) {

    for (var t = 0; t < posts_no; t++) {

        var r, s = e.feed.entry[t],

            n = s.title.$t;

        if (t == e.feed.entry.length) break;

        for (var a = 0; a < s.link.length; a++)

            if ("alternate" == s.link[a].rel) {

                r = s.link[a].href;

                break

            }

        n = n.link(r);

        var i = "... read more";

        i = i.link(r);

        var l = s.published.$t,

            o = l.substring(0, 4),

            u = l.substring(5, 7),

            c = l.substring(8, 10),

            m = new Array;

        if (m[1] = "Jan", m[2] = "Feb", m[3] = "Mar", m[4] = "Apr", m[5] = "May", m[6] = "Jun", m[7] = "Jul", m[8] = "Aug", m[9] = "Sep", m[10] = "Oct", m[11] = "Nov", m[12] = "Dec", "content" in s) var d = s.content.$t;

        else if ("summary" in s) var d = s.summary.$t;

        else var d = "";

        var v = /<\S[^>]*>/g;

        if (d = d.replace(v, ""), 1 == posts_date && document.write('<div class="post-date">' + m[parseInt(u, 10)] + " " + c + " " + o + "</div>"), document.write('<li class="recent-post-title">'), document.write(n), document.write('</li><div class="recent-post-summ">'), 1 == post_summary)

            if (d.length < summary_chars) document.write(d);

            else {

                d = d.substring(0, summary_chars);

                var f = d.lastIndexOf(" ");

                d = d.substring(0, f), document.write(d + " " )

            }

        document.write("</div>")

    }

}

</script>

<script type="text/javascript">

var posts_no = 5;

var posts_date = true;

var post_summary = true;

var summary_chars = 80;

</script>

<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">

</script>

<!-- css-->

<style type="text/css">

.recentpoststyle {

    list-style-type: none;

}

.recentpoststyle a {

    text-decoration: none;

    color: #49A8D1;

}

.recentpoststyle a:hover {

    color: #000;

}

.recentpoststyle li:before {

    float: left;

    z-index: 1;

    position: relative;

    font-size: 15px;

    font-weight: bold;

    color: #fff;

    background: #69B7E2;

    margin: 13px 5px 0px -6px;

    line-height: 30px;

    width: 30px;

    height: 30px;

    text-align: center;

    -webkit-border-radius: 50%;

    -moz-border-radius: 50%;

    border-radius: 50%;

}

li.recent-post-title {

    margin: 7px 0;

    padding: 0;

}

.recent-post-title a {

    color: black;

    text-decoration: none;

    font-weight:bold;

    font-family: 'Poppins', sans-serif;

    font-size: 14px;

}

.post-date {

    font-size: 11px;

    color: #999;

    margin:0;

}

.recent-post-summ {

    color: #777;

    padding: 0 0 15px;

    margin-bottom: 15px;

    font: 13px Verdana,Arial,Helvetica,sans-serif;

    border-bottom: 1px solid #ececec;

}

</style></div>

...

In the configuration window for the "HTML/JavaScript" gadget, paste your HTML or JavaScript code into the content box.

Save Changes:

Click on the "Save" or "Save arrangement" button to apply the changes.

Preview Your Blog:

Preview your blog to make sure the HTML or JavaScript content appears as expected.

Adjust Placement (if needed):

If you want to change the position of the HTML/JavaScript gadget, you can go back to the "Layout" section and drag the gadget to the desired location.

Remember to save your changes after adjusting the layout.

Please note that when adding JavaScript code, you need to ensure it complies with Blogger's policies. Some JavaScript code may be restricted for security reasons.

Keep in mind that the appearance and navigation in Blogger might change over time, so the steps provided here are based on the information available up to my last training cut-off in January 2022. If there have been any changes to the Blogger interface after that date, you might need to adapt the instructions accordingly.