How to Create a Recent Post Widget with Read More Link & Comments Count?

Nowadays, many bloggers [not WordPress] are using widgets like Popular Post Widget, Recent Post Widget, Most Discussed Posts and more... But today, we are going to post something different. Yeah! Today, we brought you a New Recent Post widget that includes a Read more link and Comments link and Comments count of every recently posted post. This Recent Post widget will show posts in UL list with an inbuilt amazing hover effects. This Recent Post widget will also show an image from each post in each post's box. We have used some CSS to stylize this widget. Hope You'll like it!

How to add this Recent Post widget in Blogger?

Now are you thinking the same question? Why? We are telling it now! Just follow these simple steps and you will get your new Recent Post widget ready!

• Go to Blogger Dashboard > Layout > Add a Gadget > HTML/JavaScript
• Now, in the title field, write whatever you want.
• Navigate to Content field and paste below code in it:

<script style="text/javascript">function showlatestpostswiththumbs(json) {
    document.write('<ul class="recent-posts-container">');
    for (var i = 0; i < posts_no; i++) {
        var entry = json.feed.entry[i];
        var posttitle = entry.title.$t;
        var postsurl;
        if (i == json.feed.entry.length) break;
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                var commentstext = entry.link[k].title;
                var commentsurl = entry.link[k].href;
            }
            if (entry.link[k].rel == 'alternate') {
                postsurl = entry.link[k].href;
                break;
            }
        }
        var recenthumb;
        try {
            recenthumb = entry.media$thumbnail.url;
        } catch (error) {
            s = entry.content.$t;
            a = s.indexOf("<img");
            b = s.indexOf("src=\"", a);
            c = s.indexOf("\"", b + 5);
            d = s.substr(b + 5, c - b - 5);
            if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
                recenthumb = d;
            } else recenthumb = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheGB_XeNVSZ6TAZk9DmzYXwD6s1GZwf8HY7a8uoGYXzYj8KBwJeO5vU5KBAKIqJZPXUB6UxQkn2MIgpC6BeXmEelpK-L2iiZq9GpSGDUZcT_W7U2uLEiysGp3ebs3LKSKUELjt-oQGRCmq/s1600/no-thumb.png';        }
        var postdate = entry.published.$t;
        var showyear = postdate.substring(0, 4);
        var showmonth = postdate.substring(5, 7);
        var showday = postdate.substring(8, 10);
        var monthnames = new Array();
        monthnames[1] = "Jan";
        monthnames[2] = "Feb";
        monthnames[3] = "Mar";
        monthnames[4] = "Apr";
        monthnames[5] = "May";
        monthnames[6] = "Jun";
        monthnames[7] = "Jul";
        monthnames[8] = "Aug";
        monthnames[9] = "Sep";
        monthnames[10] = "Oct";
        monthnames[11] = "Nov";
        monthnames[12] = "Dec";
        document.write('<li class="recent-posts-list">');
        if (showpoststhumbs == true)
            document.write('<a href="' + postsurl + '"><img class="recent-post-thumb" src="' + recenthumb + '"/></a>');
        document.write('<div class="recent-post-title"><a href="' + postsurl + '" target ="_top">' + posttitle + '</a></div>');
        if ("content" in entry) {
            var postcontent = entry.content.$t;
        } else
        if ("summary" in entry) {
            var postcontent = entry.summary.$t;
        } else var postcontent = "";
        var re = /<\S[^>]*>/g;
        postcontent = postcontent.replace(re, "");
        if (post_summary == true) {
            if (postcontent.length < summary_chars) {
                document.write(postcontent);
            } else {
                postcontent = postcontent.substring(0, summary_chars);
                var quoteEnd = postcontent.lastIndexOf(" ");
                postcontent = postcontent.substring(0, quoteEnd);
                document.write(postcontent + '...');
            }
        }
        var posts_details = '';
        var flag = 0;
        document.write('<div class="recent-posts-details">');
        if (posts_date == true) {
            posts_details = posts_details + monthnames[parseInt(showmonth, 10)] + ' ' + showday + ' ' + showyear;
            flag = 1;
        }
        if (readmorelink == true) {
            if (flag == 1) posts_details = posts_details + ' | ';
            posts_details = posts_details + '<a href="' + postsurl + '" class="url" target ="_top">Read more│</a>';
            flag = 1;;
        }
        if (showcommentslink == true) {
            if (flag == 1) {
                posts_details = posts_details;
            }
            if (commentstext == '1 Comments') commentstext = '1 Comment';
            if (commentstext == '0 Comments') commentstext = 'No Comments';
            commentstext = '<a href="' + commentsurl + '" target ="_top">' + commentstext + '</a>';
            posts_details = posts_details + commentstext;
            flag = 1;;
        }
        document.write(posts_details);
        document.write('</div>');
        document.write('</li>');
    }
    document.write('</ul>');
}</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style type="text/css">
img.recent-post-thumb {padding:2px;width:80px;height:80px;float:left;margin: 0px 10px 10px; background: #fff; border-radius:100px; border: 1px solid #B8B8B8;box-shadow:-1px -1px -1px -1px #818181}
.recent-posts-container {font-family: 'Oswald', sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {min-height:65px; list-style-type: none; margin-left: -10px;transition:0.3s ease;margin-bottom:20px;padding-bottom:22px;border-bottom:2px solid #818181;box-shadow:0px 2px 4px -3px;}
ul.recent-posts-container li:hover{background-color:#FCFCFC;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #888888;}
.recent-post-title a:hover{color:#FEBD17;}
.recent-posts-details a{ color: #777;}
</style>
<script style="text/javascript">
var posts_no = 10;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = false;
var summary_chars = 70;</script>

• Then, click on save and you are done!

Important Customizations:

var showpoststhumbs	Shows Post Thumbnails. Change ‘true’ to ‘false’ to disable it.
var readmorelink	Shows Read More link. Change ‘true’ to ‘false’ disable it.
var showcommentslink	Shows Comment link. Same, Change ‘true’ to ‘false’ to disable it.
var posts_date	Shows Posts Published Date. Change ‘true’ to ‘false’ to disable it.
var post_summary	Shows Posts summary. Change ‘false’ to ‘true’ to enable it.
var summary_chars	Defines Post Summary Characters. Change ‘70’ to whatever characters you want.

Final Words from Author

I hope you liked this widget and going to implement it on your blogger blog. If you got any error or issues while saving or setting up this widget, kindly leave your problem in comments below. We will give our best to solve your problem! Thanks!

Share this post