Simple Recent Post Widget for Blogger

Simple recent post widget for blogger shows up recent posts with only title and thumbnail. The style of this simple recent post widget is not so much attractive this widget is an simple and classic style.

You can use this widget is your website is having classic template but you don't have to worry if a website is not having classic template I am also having responsive and beautiful blogger widgets for you which you can use in your blogger blog.

Search for blogger widgets on the site and you will find many of them choose your style whatever you like.

This widget is for sidebar use you can use this widget in the sidebar of your blogger template and it will not affect your page load time because the source code of this widget is not too much lengthy.

So if you want to add this recent post blogger widget into your blogger blog follow the steps that provided below and do as it is said to make this widget work properly on your blogger blog.

I don't even know that if you like this project or not I think not because it's classic and only classic people will love this project.

1. Go to Blogger Dashboard
2. Go to Layout Section
3. Click Add widget in sidebar
4. Click HTML/Javascript widget from the list
5. Copy the code provided below and paste it in that widget.

<style>
body {
    background: #f8f8f8;
    color: #000;
    font-family: 'Poppins',sans-serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
    font-weight: normal;
}
a{text-decoration:none}
  /* CSS Recent by Label */
.recent-wid .widget-content,.recent-wid2 .widget-content,.recent-wid h2.title,.recent-wid2 h2.title,.widtic .widget-content{display:none}.recent-wid .box-title h2.title,.recent-wid2 .box-title h2.title{font-size:16px;background:#fff;display:inline-block;padding:12px 0;margin:0}#recent-wid .more-link,#recent-sec2 .more-link{background:#f39c12;color:#fff;float:right;font-size:12px;display:inline-block;padding:2px 10px;border-radius:5px;margin:12px auto 0 auto;transition:all .3s}#recent-wid .more-link i,#recent-sec2 .more-link i{margin-left:5px;font-size:13px;font-weight:normal}#recent-wid .more-link:hover,#recent-sec2 .more-link:hover{background:#e67e22;color:#fff}#recent-wid a.more-link:hover,#recent-wid a.more-link a,#recent-wid2 a.more-link a,#recent-sec2 a.more-link:hover,#recent-sec2 a.more-link a{color:#fff}#recent-wid ul{background:#fff;list-style:none;margin:0;padding:20px;overflow:hidden}.box-title{background:#fff;border:0;border-bottom:1px solid rgba(0,0,0,0.05);padding:0 20px;overflow:hidden}.box-title h2{padding:12px 16px;background:#fff;display:inline-block;font-size:12px;margin:0}.box-title h2 a{color:#222;font-weight:600;display:block}.box-title h2 a:hover{color:#222}.recent-date:before{content:'\f017';font-family:fontawesome;color:#aaa}.recent-date{color:#aaa;font-weight:400;font-size:12px}.recent-author:before{content:'\f007';font-family:fontawesome;color:#aaa}.recent-author{color:#aaa;font-weight:400;font-size:12px}.tabs-content .recent-date:before,.tabs-content .recent-date,.tabs-content .recent-author:before,.tabs-content .recent-author{color:#fff}.first-ld{position:absolute;height:100%;top:50%;left:50%;font-size:20px;color:#aaa}.recent-wid .widget,.recent-wid2 .widget{margin-bottom:20px}.recent-wid .recent-sec .widget:last-child,.recent-wid2 .recent-sec .widget:last-child{margin-bottom:20px}.recent-title{font-size:14px;margin:0}.recent-title a:hover{text-decoration:none;color:#1e90ff}.recent-block .recent-thumb{width:100%;height:150px;display:block}#HTML52 .recent-thumb,#HTML53 .recent-thumb,.recent-block2 .recent-thumb2,.recent-block2 .recent-thumb{width:100%;height:200px;display:block}.recent-block ul li,.recent-block2 ul li{float:left;width:33.3%;display:inline-block;position:relative;padding:0;margin:0}.recent-block .recent-title a,.recent-block2 .recent-title a{font-weight:600;margin-bottom:5px;display:inline-block}.recentbylabel ul li:nth-child(4),.recentbylabel ul li:nth-child(5),.recentbylabel ul li:nth-child(6){margin-bottom:0}.recentbylabel ul li,.recentbylabel2 ul li{width:32%;margin-right:0}.recentbylabel .recent-title a,.recentbylabel2 .recent-title a{color:#222;height:42px;overflow:hidden;margin-bottom:0;padding-bottom:2px}.recentbylabel .recent-title a:hover,.recentbylabel2 .recent-title a:hover{color:#222;text-decoration:underline}.recentbylabel ul li,.recentbylabel .recent-thumb,.recentbylabel2 ul li,.recentbylabel2 .recent-thumb2{margin-bottom:15px;border-radius:5px;overflow:hidden}.recentbylabel ul li .recent-thumb:before,.recentbylabel2 ul li .recent-thumb2:before{background-color:rgba(40,40,40,.4);color:#fff;content:'';position:absolute;height:200px;width:100%;text-align:center;line-height:200px;font-weight:400;opacity:0;overflow:hidden;transition:all .6s}.recentbylabel .recent-thumb,.recentbylabel2 .recent-thumb2{position:relative}.recentbylabel .recent-thumb:hover,.recentbylabel2 .recent-thumb2:hover{opacity:1}.recentbylabel .recent-thumb:hover:before,.recentbylabel2 .recent-thumb2:hover:before{opacity:0.9}.recentbylabel .recent-content,.recentbylabel2 .recent-content{margin-bottom:15px}.recentbylabel ul li:nth-child(1),.recentbylabel ul li:nth-child(2),.recentbylabel ul li:nth-child(4),.recentbylabel ul li:nth-child(5),.recentbylabel2 ul li:nth-child(1),.recentbylabel2 ul li:nth-child(2),.recentbylabel2 ul li:nth-child(4),.recentbylabel2 ul li:nth-child(5){margin-right:2%}.recent-date:before,.recent-author:before{margin-right:5px}.recent-author{margin-right:10px;color:#222;font-weight:600}.item .post-heading{-webkit-border-radius:2px 2px 0 0;border-radius:2px 2px 0 0}.item .recent-wid,.item .recent-wid2{display:none}
/* Responsive */
@media screen and (max-width:768px){
.showpage a,.showpageNum a,.showpagePoint,.showpageOf{margin:0 4px 4px 0}
#featured-posx-section{margin:0 auto}.featured-posx .main-post{width:100%;border-radius:0}.featured-posx .secondary-post.col-post{display:none}}
@media screen and (max-width:640px){
.recent-block .recent-thumb,#HTML52 .recent-thumb,#HTML53 .recent-thumb,.recent-block2 .recent-thumb2,.recent-block2 .recent-thumb{width:100%;height:200px;display:block}
.post-thumbnail{margin:0 0 20px auto;float:none}#blog-pager{padding:12px}#featured-posx-section{max-height:240px}.featured-posx .main-post img{height:240px}.recentbylabel ul li,.recentbylabel2 ul li{width:100%}
.recentbylabel ul li:nth-child(n+3){display:none}}
ul.recent_posts li{display:inline-block;position:relative;width:100%;margin:5px auto;background:#fff;padding:10px 0;transition:all .3s linear;}
ul.recent_posts li:last-child {border:0;}
.recent_posts .wrapinfo{display:inline-block;margin:0 10px 0 0;overflow:hidden;z-index:2;position:relative;width:72px;height:72px;border-radius:5px;float:left;animation:moccaShine 1.25s linear infinite;background:#f5f5f5 linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,.75) 20%,rgba(255,255,255,0) 30%);background-size:400px 50px}
ul.recent_posts li img.recent_thumb{width:100%;height:auto}
.recent_posts {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:.9rem;}
ul.recent_posts li a{color:#222;font-size:13px;font-weight:600;line-height:normal}
ul.recent_posts li a:hover{color:#e74c3c}
.recent_posts i{font-style:normal;color:#999;font-size:13px}
</style>
<script style='text/javascript'>
function recentpost(t) {
    document.write('<ul class="recent_posts">');
    for (var e = 0; e < numposts; e++) {
        var r, n = t.feed.entry[e],
            i = n.title.$t;
        if (e == t.feed.entry.length) break;
        for (var o = 0; o < n.link.length; o++) {
            if ("replies" == n.link[o].rel && "text/html" == n.link[o].type) var m = n.link[o].title,
                u = n.link[o].href;
            if ("alternate" == n.link[o].rel) {
                r = n.link[o].href;
                break
            }
        }
        var l;
        try {
            l = n.media$thumbnail.url
        } catch (h) {
            s = n.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), l = -1 != a && -1 != b && -1 != c && "" != d ? d : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqeuyq8rQsydGCaX6ODGPquQdBqab47b78LBvLdxwDR00LsLOvpz5VJjcNcitQSGEiqbcpEhK055TD8skQdvOzBWSOJvWJIFsWZ5e3XsG-IUrcdLodW7K9h6u7CiqHv8J4jKUWCHVh/s1600/InfoArlina.png"
        }
        var w = n.published.$t,
            f = w.substring(0, 4),
            p = w.substring(5, 7),
            g = w.substring(8, 10),
            v = new Array;
        if (v[1] = "Jan", v[2] = "Feb", v[3] = "Mar", v[4] = "Apr", v[5] = "May", v[6] = "Jun", v[7] = "Jul", v[8] = "Aug", v[9] = "Sep", v[10] = "Oct", v[11] = "Nov", v[12] = "Dec", document.write('<li class="clearfix">'), 1 == showpostthumbnails && document.write('<span class="wrapinfo"><img class="recent_thumb" src="' + l + '"/></span>'), document.write('<b><a href="' + r + '" target ="_top">' + i + "</a></b><br>"), "content" in n) var y = n.content.$t;
        else if ("summary" in n) var y = n.summary.$t;
        else var y = "";
        var k = /<\S[^>]*>/g;
        if (y = y.replace(k, ""), 1 == showpostsummary)
            if (y.length < numchars) document.write("<i>"), document.write(y), document.write("</i>");
            else {
                document.write("<i>"), y = y.substring(0, numchars);
                var _ = y.lastIndexOf(" ");
                y = y.substring(0, _), document.write(y + "..."), document.write("</i>")
            }
        var x = "",
            $ = 0;
        document.write("<br>"), 1 == showpostdate && (x = x + v[parseInt(p, 10)] + "-" + g + " - " + f, $ = 1), 1 == showcommentnum && (1 == $ && (x += " | "), "1 Comments" == m && (m = "1 Comment"), "0 Comments" == m && (m = "No Comments"), m = '<a href="' + u + '" target ="_top">' + m + "</a>", x += m, $ = 1), 1 == displaymore && (1 == $ && (x += " | "), x = x + '<a href="' + r + '" class="url" target ="_top">More -></a>', $ = 1), document.write(x), document.write("</li>"), 1 == displayseparator && e != numposts - 1 && document.write("<hr size=0.5>")
    }
    document.write("</ul>")
}

</script>
<script style='text/javascript'>
var numposts=4,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='https://www.softwebtuts.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpost'></script><-e30/code>

6. Save widget

Replacements:

In the above code you have to make some customization, don't worry i am going to tell you all that see the table below i have listed replacements with their description.

Replacements	Description
https://www.softwebtuts.com	Replce this with your blog or website url.

Changable variables:

This is the list of variables that you can change according to your requirements.

Variable	Description
numposts=4	Specifies number of posts you want to show. By default 4 posts are shown.
showpostthumbnails=!0	Specifies whether you want to show thumbnails or not it's true to make it false remove ! before 0.
displaymore=!1	Specifies whether you want to show read-more button or not.
displayseparator=!1	Specifies whether you want to show separator to separate posts.
showcommentnum=!1	Specifies whether you want to show total comment count of post or not.
showpostdate=!1	Remove ! before 1 if you want to see post publish date.
showpostsummary=!1	Tell's if you want to show post summary or not remove ! before 1 to make it true.
numchars=62	Specifies number of characters to be shown in post summary.

With all variables set to true this widget looks like this:

Conclusion

That's it in today's article I think you have got the thing for which you was searching and I hope you will love this if you did share it with your friends and also subscribe to the notifications of this blog to get daily notifications directly to your mailbox and on your computer or mobile device.

source:softwebtuts.com