How to make a cool and lightweight Recent post widget on the Blog

There are several ways to create a cool and lightweight recent post widget on a blog. Here are some steps to guide you:

1. Determine the design and layout of your widget. Consider the placement, size, and color scheme that will complement your blog's overall design.

2. Decide on the number of recent posts to display. You can choose to show the most recent 5 or 10 posts, depending on your preference.

3. Use a programming language like HTML, CSS, and JavaScript to create the widget. You can also use a content management system (CMS) like WordPress or Blogger to create the widget.

4. Fetch the recent posts from your blog's database using the blogging platform's API or an RSS feed. This will enable you to retrieve the title, author, and date of the recent posts.

5. Display the recent posts on the widget in a visually appealing way. You can use icons, images, or thumbnails to make the widget more engaging.

6. Add a link to each recent post, which leads to the full post on your blog. This will enable visitors to read the full post and engage more with your blog.

7. Test the widget on different devices to ensure that it is responsive and lightweight. You can use a tool like Google PageSpeed Insights to check the widget's loading time and optimize it for faster performance.

By following these steps, you can create a cool and lightweight recent post widget that will enhance your blog's user experience and engagement.

There are many kinds of widgets on the blog, one of which the admin will discuss the trick this time is the Recent Post Widget. To beautify blog pages, special widgets are needed. As we know, default widgets may look less attractive. this is the factor bloggers are hunting for cool widgets. Now this time the admin will share a tutorial on how to make a cool and light Recent post widget on the Blog. 

As already explained, What is the Recent Post widget?? Recent Post widget is a blogger Widget that functions as a pointer to the last published or recently published article. Now in the Recent post widget all the last articles you published will be one. How interested are you to try the recent post widget?? don't worry, the admin is sharing widgets that are very responsive and light, so don't be afraid... 

Okay, the admin immediately shares the tutorial with the following steps

How to make a cool and lightweight Recent post widget on the Blog

1. Just login to your blogger dashboard page, select LAYOUT => Add Gadget => Html Javascript =>

2. After a new page appears, fill in the title and copy the code below

<script type="text/javascript">
function showlatestpostswiththumbs(t){document.write('<ul class="recent-posts-container">');for(var e=0;e<posts_no;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 l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=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),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRDqTpryBNlHnXZoFk_GGujBdt71sclaJ3XZVWinGdImqehUi25XqF-zc5O4dZBkcF04ZEigULVGUqihW9Omk9uFpHeKKMYHUN-n64YD-rN5cFLsokZprooP0XdBCXQWLo41yCWVBwyvRf/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==readmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcommentslink&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="https://menthorkita.blogspot.com/" rel="nofollow">Recent Posts Widget</a>
<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:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}
.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}
.recent-posts-container a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}
.recent-posts-details a{color: #777;}
</style>

NOTES: NOTES

1. var numposts = 5 is the number of posts that will appear in the widget

2. var show posts thumbs = to set whether to display thumbnails or not, if you don't want to display thumbnails, change the words "true" to "false"

3. var showcommentslink =  to display the comment link + Number of comments from the post that appears. 

4. var posts_date =  > for settings to show the post date

5. var post_summary =  > for settings whether you want to display a summary or not

6. var summary_chars => set the number of initial post characters that appear in the summary. Can be reduced or added. 

7. In essence "true" means the show command and "false" hides the command. Paste all the code in the content field. Then click Save. 

Okay, if you have, please save the javascript and then see the results

Of course you can create your own some other widgets Easy isn't it?? So that's the admin tutorial on how to "How to make a cool and light Recent post widget on the Blog" that's all and thank you for visiting..