Blogger Buzz: recent posts

Show Recent Posts With Thumbnails For Particular Label or Category in Blogger

Sometimes we want to have everything organized so that our readers can find topics of interest more easily, and that's when instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that we'll be able to show the latest posts for each label we want and also display a thumbnail for our category. <table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim5vcX2FoPZ-4hrsejm33RalzPtWSZvxRO_l19-Plo5hIzUuq6ni-Czvop1B7DRBv0m5CJCX2o0fddPW-NNXVu-d4WCON5dShQVyvrLeQM9B834etmRIcWvyrnP4vBwgbrAGtMv5DCcPUR/s1600/recent-posts-widget-by-labels-for-blogger-blogspot.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="recent posts, blogger widgets, blogger gadgets" border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim5vcX2FoPZ-4hrsejm33RalzPtWSZvxRO_l19-Plo5hIzUuq6ni-Czvop1B7DRBv0m5CJCX2o0fddPW-NNXVu-d4WCON5dShQVyvrLeQM9B834etmRIcWvyrnP4vBwgbrAGtMv5DCcPUR/s1600/recent-posts-widget-by-labels-for-blogger-blogspot.png" title="recent posts widget for blogger by labels or category with thumbnails" width="400" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Screenshot</td></tr></tbody></table> To add this cool gadget/widget for the latest categories, just follow the next steps: Steps Step 1. From your <a href="https://www.blogger.com/home">Blogger Dashboard</a>, go to Template/Edit HTML <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7oJbxvPBbc9AF3sFcddx3VZNS9BgRw9YmXHMkFZ07qEw5O4QcxGK05p_lYxNB4aYFXJo8EUsexdEJFC5KXLKZeS6lSK3c1blNR0FnXLiWWzFLBd9U9EKYq6ABemdBSu1uf-H92hyphenhyphenC8C3/s1600/blogger-template-edit-html.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="137" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB7oJbxvPBbc9AF3sFcddx3VZNS9BgRw9YmXHMkFZ07qEw5O4QcxGK05p_lYxNB4aYFXJo8EUsexdEJFC5KXLKZeS6lSK3c1blNR0FnXLiWWzFLBd9U9EKYq6ABemdBSu1uf-H92hyphenhyphenC8C3/s1600/blogger-template-edit-html.png" width="320" /></a></div> Step 2. Click anywhere inside the code area and search (CTRL + F) for this piece of code: ]]></b:skin> ... just above it, paste this one: <blockquote class="tr_bq">/* Recent posts by labels --------------------------------- */ img.label_thumb{ float:left; margin-right:10px !important; height:65px; /* Thumbnail height */ width:65px; /* Thumbnail width */ border: 1px solid #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4); box-shadow: 0 1px 1px rgba(0, 0, 0, .4); } #label_with_thumbs { float: left; width: 100%; min-height: 70px; margin: 0px 10px 2px 0px; padding: 0; } ul#label_with_thumbs li { padding:8px 0; min-height:65px; margin-bottom:0px; border-bottom: 1px dotted #999999; } #label_with_thumbs li{ list-style: none ; padding-left:0px !important; } #label_with_thumbs a { text-transform: uppercase;} #label_with_thumbs strong {padding-left:0px; }</blockquote>Step 3. Now search for this tag (CTRL + F) <blockquote class="tr_bq"></head></blockquote>...and add the following script above it: <blockquote class="tr_bq"><script type='text/javascript'> //<![CDATA[ function labelthumbs(json){document.write('<ul id="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;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 commenttext=entry.link[k].title;var commenturl=entry.link[k].href;} if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=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!="")){thumburl=d;}else thumburl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKQ4j0AgzPG07iYOv_jlwgK-YMN-gn5fhiq6Hd4iI2H-YjG_rZCBPLxzBGkrxDNtQAvNWbgPyep6f0hl2LTP7KkYn5nq81G9qWKrQVlg_5_00BHDtcG_BfITxC5mPw8nQno6-20uRO0ew/s1600/picture_not_available.png';} var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=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]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true) document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<a href="'+posturl+'" target ="_top">'+posttitle+'</a> ');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(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');} else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}} var towrite='';var flag=0;document.write(' ');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;} if(showcommentnum==true) {if(flag==1){towrite=towrite+' | ';} if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;} if(displaymore==true) {if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More �</a>';flag=1;;} document.write(towrite);document.write('</li>');if(displayseparator==true) if(i!=(numposts-1)) document.write('');}document.write('</ul>');} //]]> </script></blockquote>Note: to add your own pic for the posts with no thumbnail, replace the image url in blue with your own Update! For a better image resolution add this script above the </body> tag: <blockquote class="tr_bq"><script type='text/javascript'>                   function changeThumbSize(id,size){ var blogGadget = document.getElementById(id); var replacement = blogGadget.innerHTML; blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c"); var thumbnails = blogGadget.getElementsByTagName("img"); for(var i=0;i&lt;thumbnails.length;i++){ thumbnails[i].width = size; thumbnails[i].height = size; } } changeThumbSize("label_with_thumbs",210);              </script></blockquote>... save the template. So we have added the Css to style the widget and the script to make it work. Now all we have to do is to add the widget's code to the blog sidebar in a Html/Javascript gadget: Step 4. Go to Layout - click on Add a Gadget <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6ExHDmqoHAd_QydvyIO-ZY_SSN557W4eJL6sX_16J7bxzb7XH2JAkwTEG5XFmUpNz0fPkNWhm638Zz7Qx15XNrYrT2722r509Ezi6N0HRbFZ0H0nyL6CktlX5ndUogGY7X5JsCUbFtDw/s1600/blogger-layout-add+a+gadget-how-to.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6ExHDmqoHAd_QydvyIO-ZY_SSN557W4eJL6sX_16J7bxzb7XH2JAkwTEG5XFmUpNz0fPkNWhm638Zz7Qx15XNrYrT2722r509Ezi6N0HRbFZ0H0nyL6CktlX5ndUogGY7X5JsCUbFtDw/s1600/blogger-layout-add+a+gadget-how-to.png" width="640" /></a></div> Step 5. Choose the HTML/Javascript widget and paste this code inside the empty box: <blockquote class="tr_bq"><script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;</script> <script type="text/javascript" src="/feeds/posts/default/-/Name-of-the-label?published&alt=json-in-script&callback=labelthumbs"></script></blockquote> Note: Where it says Name-of-the-label is the name of the label you want to display, and if your label is case sensitive, like in my example, then you should type it that way. Also within the last code, there are parts that we can customize, just change true with false or vice versa: <blockquote class="tr_bq">var numposts ? Number of posts to display var showpostthumbnails ? Show/hide thumbnails var displaymore ? Show or hide the read more link var displayseparator ? Show/hide separator var showcommentnum ? Show/hide the number of comments var showpostdate ? Show/hide the posts dates var showpostsummary ? Show or not the posts summaries var numchars ? Number of posts characters (here you have to change the 100 value)</blockquote>Remember that the gadget displays the latest posts from a particular label, therefore, if you want to display the latest posts from other labels then just repeat step 5 for each additional category you want to add. That's it :) Enjoy!

labels recent posts Widgets Show Recent Posts With Thumbnails For Particular Label or Category in Blogger

Sometimes we want to have everything organized so that our readers can find topics of interest more easily, and that's when instead of p...

Recent Posts Widget with Thumbnails for Blogger/Blogspot

A few days ago, I posted a tutorial on <a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" rel="nofollow">How to Add a Simple Recent Posts Widget</a> that shows a list with the most recent posts if you would prefer a more minimalist look. In this post, you will see a different way of displaying the Recent Posts on Blogger - this is specially for those who want to show more info like the recent posts excerpt / summary and the posts thumbnails. To add this gadget is very simple, just follow these steps below: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhVIdjhbAH3KNDqItvueZzztmg9tD-sPp7NqvrweUOhHqFULvl4pSdzjRgbGeJAfzpN5YfiTS05oK5QSG9Eyg27GEFya9S62z3rs3PZrW2qd2gnISzSlMGrHmGoQQpk8lH3CrVmZ03yNog/s1600/recent+posts+widget+with+thumbnails+for+blogger+blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="recent posts, blogger widgets" border="0" height="266" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhVIdjhbAH3KNDqItvueZzztmg9tD-sPp7NqvrweUOhHqFULvl4pSdzjRgbGeJAfzpN5YfiTS05oK5QSG9Eyg27GEFya9S62z3rs3PZrW2qd2gnISzSlMGrHmGoQQpk8lH3CrVmZ03yNog/s320/recent+posts+widget+with+thumbnails+for+blogger+blogspot.png" title="Recent Posts Widget With Thumbnails " width="320" /></a></div> <h3>How to Add the Recent Posts Widget to Blogger</h3> Step 1. From your Blogger Dashboard, go to Layout > click on Add a Gadget link <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6ExHDmqoHAd_QydvyIO-ZY_SSN557W4eJL6sX_16J7bxzb7XH2JAkwTEG5XFmUpNz0fPkNWhm638Zz7Qx15XNrYrT2722r509Ezi6N0HRbFZ0H0nyL6CktlX5ndUogGY7X5JsCUbFtDw/s1600/blogger-layout-add+a+gadget-how-to.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn6ExHDmqoHAd_QydvyIO-ZY_SSN557W4eJL6sX_16J7bxzb7XH2JAkwTEG5XFmUpNz0fPkNWhm638Zz7Qx15XNrYrT2722r509Ezi6N0HRbFZ0H0nyL6CktlX5ndUogGY7X5JsCUbFtDw/s640/blogger-layout-add+a+gadget-how-to.png" width="640" /></a></div> Step 2. From the pop-up window, scroll down and choose HTML/JavaScript <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-vzXy3N-z9ovc2wKWyOyRKKtpcX9J_UnBSGALgE_5xKevzcSILX-jxpIN3XenHXOi_oHFzsU7uh_pWvIvdG1D5czhULgQebt9G1NnEuKza0YG4qQmKWi4WZy0Qu_orgNvM63GYQmWh9u/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX-vzXy3N-z9ovc2wKWyOyRKKtpcX9J_UnBSGALgE_5xKevzcSILX-jxpIN3XenHXOi_oHFzsU7uh_pWvIvdG1D5czhULgQebt9G1NnEuKza0YG4qQmKWi4WZy0Qu_orgNvM63GYQmWh9u/s400/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" width="400" /></a></div> Step 3. Inside the empty box, add the following code: <blockquote class="tr_bq"><div class="eggTray"> <script src="http://helplogger.googlecode.com/svn/trunk/listbadge.js">{"pipe_id":"1a6640e2a78b2c6e736f2220529daae5","_btype":"list", "pipe_params":{"URL":"YOUR-BLOG/feeds/posts/default"}, "hideHeader":"false","height":"500","count": 8 }</script> <div style="font-family: arial, sans-serif; font-size: 9px;" class="ycdr"><a href="http://helplogger.blogspot.com/2012/05/recent-posts-widget-with-thumbnails-for.html" target="_blank" title="Grab this widget">Recent Posts Thumbnails</a> <a href="http://helplogger.blogspot.com/" target="_blank">Blogger Widget</a></div><noscript>Your browser does not support JavaScript!</noscript></div> <style type=text/css> .eggTray {margin:10px 0px;padding:0px;} .ybr li  {border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;} .pipesTitle {padding-top:0px;} .pipesDescription {display:true;} .ycdr {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz30X6RkEkk-FfqQbWp2GMpgBX-LS2N2C_HdhG1-2fGdseBzuTFq1uFgxqOzThfmxLZEKLu3G_fFVXKdZa0oHgzOon87ioemp1brU8a2ibwsLLCo6P1txeiOOiIdLiuLVgBbTrgUqjFLQ/s1600/logo.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 4px 0px 0px 0px;line-height:14px;} .ycdr, .ycdr a {color:#999999;} .widget .popular-posts ul {padding-left:0;} </style></blockquote>Step 4. Replace YOUR-BLOG with the url of your site/blog (ex: http://helplogger.blogspot.com) and pay attention to have no forward slash symbol "/" at the end of your url, otherwise it won't function properly. <ul><li>To disable the scroll bar, remove the number 500</li><li>By default, this widget is set to display a maximum of 8 recent posts. To change this number, replace the number 8 with the number of posts desired</li><li>if you want only the posts titles to appear, change true to none and "0" from padding-top:0px with 10</li></ul>Step 5. Save your widget. And you're done!

posts recent posts Widgets Recent Posts Widget with Thumbnails for Blogger/Blogspot

A few days ago, I posted a tutorial on How to Add a Simple Recent Posts Widget that shows a list with the most recent posts if you would pr...

Simple Recent Posts Widget for Blogger/Blogspot

The main advantage on this Recent Posts widget is that it will show not only post titles but also post excerpts or snippets and it's easy to customize/ apply different style on it. To style it into your own design, you just have to modify the CSS style - you can change the link or background color, the size and color of text/links. What you can do with this widget: <ul><li>display post titles only</li><li>change the number of posts</li><li>change the number of characters of the post snippet/excerpt</li><li>show the post dates</li></ul> See the screenshot below: <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdERuz-mN3CwTuhl7T3a2WonWjoltmb_VSbJwdHy272c411c-xNLEgn6JjdbohhLT6ez0BME9oPkVy6jCvSjJYLOcIOj6dN_UG0R1e9fR-H_rN9eyim6eeC8KPMtGklE1u3KoTd63Wkdeh/s1600/add+recent+posts+widget+for+blogger+blogspot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="318" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdERuz-mN3CwTuhl7T3a2WonWjoltmb_VSbJwdHy272c411c-xNLEgn6JjdbohhLT6ez0BME9oPkVy6jCvSjJYLOcIOj6dN_UG0R1e9fR-H_rN9eyim6eeC8KPMtGklE1u3KoTd63Wkdeh/s320/add+recent+posts+widget+for+blogger+blogspot.png" width="320" /></a></div> How to add Recent Posts Widget to Blogger Step 1. Log in to your Blogger Dashboard, then go to Layout and click on Add a Gadget link <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_AtKE2J_FkYdP1qleP3q9XHngJhOHDE8dfe3xhf2zwZoB7HMd7DHuu7lOonkwBbApKpmWWGqzEzHyalbED2cEBPgzqKU4jM8VfcQGIJ3xgmB_GaVvYcm_NkRK_x7IeO_Xf3tXyj6v2wKD/s1600/blogger-layout-add+a+gadget-how-to.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="148" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_AtKE2J_FkYdP1qleP3q9XHngJhOHDE8dfe3xhf2zwZoB7HMd7DHuu7lOonkwBbApKpmWWGqzEzHyalbED2cEBPgzqKU4jM8VfcQGIJ3xgmB_GaVvYcm_NkRK_x7IeO_Xf3tXyj6v2wKD/s1600/blogger-layout-add+a+gadget-how-to.png" width="640" /></a></div> Step 2. From the pop-up window, scroll down and choose HTML/JavaScript <div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ31UAj7rXdvuTKGdh0Ck7L9mQeZOg5KVb8zcgx-H4Ux7mrTl_KPMAbo9OJDqn4nuCF6rOvDp_AY7og99doKsgwTw5vCIY0LBgKdlhDjHGViOvON_fThBmy7mzf0etpgtjUqRljXBzu8WG/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="196" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ31UAj7rXdvuTKGdh0Ck7L9mQeZOg5KVb8zcgx-H4Ux7mrTl_KPMAbo9OJDqn4nuCF6rOvDp_AY7og99doKsgwTw5vCIY0LBgKdlhDjHGViOvON_fThBmy7mzf0etpgtjUqRljXBzu8WG/s1600/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png" width="400" /></a></div> Step 3. Select & Copy the code from one of the options below and paste it into the new HTML/JavaScript: Option 1: Recent posts widget with snippets <blockquote class="tr_bq"><div id="hlrpsa"> <script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js"> </script> <script> var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true; </script> <script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"> </script></div> <div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;"> <a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div> <noscript>Your browser does not support JavaScript!</noscript> <style type="text/css"> #hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHeRqoHHQ5X7xiHAgKon2ALQO-gZrF8P9ywVdZA4ttiQbbZURkJVq6se7-JDrswwD8nK4J4ep8Q2IMIkxSiORQRQ8D2_JAnYzv2onJpEsEShOs390LRFVaHwUWiYRK6bTiNYEn86DcSp8/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;} #rpdr, #rpdr a {color:#808080;} #hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;} .hlrps a {font-weight:bold; } .hlrpssumm {} </style></blockquote> Option 2: Recent Posts Widget Showing Post Titles Only <blockquote class="tr_bq"><div id="hlrpsb"> <script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script> <script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script> <script src="http://your-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div> <div style="font-family: arial, sans-serif; font-size: 9px;" id="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript> <style type=text/css> #hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhHeRqoHHQ5X7xiHAgKon2ALQO-gZrF8P9ywVdZA4ttiQbbZURkJVq6se7-JDrswwD8nK4J4ep8Q2IMIkxSiORQRQ8D2_JAnYzv2onJpEsEShOs390LRFVaHwUWiYRK6bTiNYEn86DcSp8/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;} #rpdr, #rpdr a {color:#808080;} .bbrecpost2 { padding-top:6px; padding-bottom:6px; border-bottom: 1px #cccccc dotted; } </style></blockquote> Step 4. <ul><li>Change 5 (option 1) and 10 (option 2) with the number of posts you want to display. </li><li>Change false to true if you want the posts dates to appear </li><li>Change 100 (option 1) if you want more characters to be displayed.</li><li>To change the color and font size of the links, modify the values in blue (links) and violet (font-size)</li><li>To change the style of posts summary, modify the values in green (color) and orange (font size)</li><li>Replace the your-blog text with the name of your blog or if you have a custom domain change all the bolded line with your address like in this example:</li></ul><blockquote class="tr_bq">http://www.your-site.com/feeds/posts/default....</blockquote> Step 5. Save your widget. And that's it! Enjoy!

posts recent posts Widgets Simple Recent Posts Widget for Blogger/Blogspot

The main advantage on this Recent Posts widget is that it will show not only post titles but also post excerpts or snippets and it's eas...