// API callback
relatedposts({"version":"1.0","encoding":"UTF-8","feed":{"xmlns":"http://www.w3.org/2005/Atom","xmlns$openSearch":"http://a9.com/-/spec/opensearchrss/1.0/","xmlns$blogger":"http://schemas.google.com/blogger/2008","xmlns$georss":"http://www.georss.org/georss","xmlns$gd":"http://schemas.google.com/g/2005","xmlns$thr":"http://purl.org/syndication/thread/1.0","id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243"},"updated":{"$t":"2023-12-14T08:32:55.007-08:00"},"category":[{"term":"how to"},{"term":"Blog Design"},{"term":"Widgets"},{"term":"posts"},{"term":"css"},{"term":"Comments"},{"term":"adsense"},{"term":"SEO"},{"term":"jQuery"},{"term":"social media"},{"term":"Image Effects"},{"term":"beginner's guide"},{"term":"blogger posts"},{"term":"Navigation"},{"term":"make money online"},{"term":"javascript"},{"term":"adsense optimization"},{"term":"menus"},{"term":"Facebook"},{"term":"adsense tips"},{"term":"social media plugins"},{"term":"popular posts"},{"term":"blogger"},{"term":"blogger pages"},{"term":"navigation menu"},{"term":"recent posts"},{"term":"threaded comments"},{"term":"google plus"},{"term":"related posts"},{"term":"blogging tips"},{"term":"recent comments"},{"term":"slideshows"},{"term":"static pages"},{"term":"tools"},{"term":"Templates"},{"term":"backlinks"},{"term":"custom domain"},{"term":"emoticons"},{"term":"instagram"},{"term":"labels"},{"term":"sitemap"},{"term":"RSS"},{"term":"click bombing"},{"term":"feedburner"},{"term":"firebug"},{"term":"font awesome"},{"term":"google analytics"},{"term":"homepage"},{"term":"invalid clicks"},{"term":"robots"},{"term":"statcounter"}],"title":{"type":"text","$t":"Helplogger"},"subtitle":{"type":"html","$t":""},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/recent+posts?alt=json-in-script\u0026max-results=6"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/search\/label\/recent%20posts"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"5"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"6"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-8736368861274781333"},"published":{"$t":"2014-11-15T12:55:00.001-08:00"},"updated":{"$t":"2020-04-17T10:12:06.261-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"Blog Design"},{"scheme":"http://www.blogger.com/atom/ns#","term":"recent posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"5 Cool Recent Post Widgets for Blogger"},"content":{"type":"html","$t":"For bloggers that pride themselves on always staying up-to-date with new content, a \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/05\/recent-posts-widget-with-thumbnails-for.html\"\u003Erecent post widget for Blogger\u003C\/a\u003E can be an invaluable tool. A recent posts widget for blogger is in many ways similar to a 'breaking news alert' that journalists love to use during their reports, providing the most recent and relevant posts that you have to offer.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"hidden-image\"\u003E\u003Cimg alt=\"recent posts for blogger\" src=\"https:\/\/1.bp.blogspot.com\/-CsF_3elyJOQ\/Xpng-xaL3nI\/AAAAAAAAMQk\/ULq7cErTOAg8F-PHDWiKYNBtxKRIZZp2gCLcBGAsYHQ\/s1600\/recent-posts-gadget-blogger.jpg\" title=\"5 Cool Recent Post Widgets for Blogger\"\/\u003E\u003C\/div\u003E\nAdding a recent post widget for Blogger helps to reduce the dependency on email marketing, because you don't have to send out an email just to let people know you made a new post. Instead, it updates automatically for everyone to see. You can then use this information to design scheduled email newsletters, and take advantage of what's often referred to as the 'Twitter effect' where audiences will regularly check back on your site for the possibility that new posts are available. Without this, you force people to do run their own search for information and content, increasing the likelihood that they'll leave the site and hurt your bounce rate.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\"\u003E\u003Cimg alt=\"blogger recent posts widgets\" src=\"https:\/\/1.bp.blogspot.com\/-bFHYZD-Fdec\/XpnjMfXMWnI\/AAAAAAAAMQ0\/k1jb7DzVciMWzoDwohC-NyoOJenUrxflgCLcBGAsYHQ\/s1600\/recent-posts-widget-for-blogger.jpg\" title=\"5 Cool Recent Post Widgets for Blogger\"\/\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nOnce you've managed to attract visitors to one of your posts using the \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/04\/recent-posts-widget-for-bloggerblogspot.html\"\u003Erecent post widget for Blogger\u003C\/a\u003E, it will continue to act as an accessible secondary resource to navigate around your site. That way, you can avoid having them sifting through old content that might be outdated. If you'd rather show off some of your best posts instead of your most recent posts, you can do that instead, or add that feature to the bar with just a few alterations.\u003Cbr \/\u003E\u003Cbr \/\u003E\nApart from looking great and taking up minimal space, there are too many benefits for you not to have a recent post widget for Blogger. The best part about these add-ons is that they come in a wide variety of designs that will fit any theme.\u003Cbr \/\u003E\u003Cbr \/\u003E\nIf you're interested in adding a widget to your site, here are 5 cool recent post widgets that might catch your eye and fit perfectly with your Blogger template:\u003Cbr \/\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Posts Style #1\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"rainbow widget, recent posts\" border=\"0\" src=\"https:\/\/2.bp.blogspot.com\/-EWNUyAP_D5Q\/VGe8VQE8bqI\/AAAAAAAAKsg\/dnZV8lo50vo\/s1600\/rainbow-colorful-recent-posts-widget-for-blogger.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestpostswiththumbs(t){document.write('\u0026lt;ul class=\"recent-posts-container\"\u0026gt;');for(var e=0;e\u0026lt;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\u0026lt;n.link.length;o++){if(\"replies\"==n.link[o].rel\u0026amp;\u0026amp;\"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(\"\u0026lt;img\"),b=s.indexOf('src=\"',a),c=s.indexOf('\"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a\u0026amp;\u0026amp;-1!=b\u0026amp;\u0026amp;-1!=c\u0026amp;\u0026amp;\"\"!=d?d:\"http:\/\/2.bp.blogspot.com\/-C3Mo0iKKiSw\/VGdK808U7rI\/AAAAAAAAAmI\/W7Ae_dsEVAE\/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('\u0026lt;li class=\"recent-posts-list\"\u0026gt;'),1==showpoststhumbs\u0026amp;\u0026amp;document.write('\u0026lt;a href=\"'+r+'\"\u0026gt;\u0026lt;img class=\"recent-post-thumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;'),document.write('\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;a href=\"'+r+'\" target =\"_top\"\u0026gt;'+i+\"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\"),\"content\"in n)var A=n.content.$t;else if(\"summary\"in n)var A=n.summary.$t;else var A=\"\";var k=\/\u0026lt;\\S[^\u0026gt;]*\u0026gt;\/g;if(A=A.replace(k,\"\"),1==post_summary)if(A.length\u0026lt;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('\u0026lt;br\u0026gt;\u0026lt;div class=\"recent-posts-details\"\u0026gt;'),1==posts_date\u0026amp;\u0026amp;(_=_+w[parseInt(g,10)]+\" \"+v+\" \"+f,$=1),1==readmorelink\u0026amp;\u0026amp;(1==$\u0026amp;\u0026amp;(_+=\" | \"),_=_+'\u0026lt;a href=\"'+r+'\" class=\"url\" target =\"_top\"\u0026gt;Read more\u0026lt;\/a\u0026gt;',$=1),1==showcommentslink\u0026amp;\u0026amp;(1==$\u0026amp;\u0026amp;(_+=\" \u0026lt;br\u0026gt; \"),\"1 Comments\"==l\u0026amp;\u0026amp;(l=\"1 Comment\"),\"0 Comments\"==l\u0026amp;\u0026amp;(l=\"No Comments\"),l='\u0026lt;a href=\"'+m+'\" target =\"_top\"\u0026gt;'+l+\"\u0026lt;\/a\u0026gt;\",_+=l,$=1),document.write(_),document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/li\u0026gt;\")}document.write(\"\u0026lt;\/ul\u0026gt;\")}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;\u003Cbr \/\u003E\nvar showpoststhumbs = true;\u003Cbr \/\u003E\nvar readmorelink = true;\u003Cbr \/\u003E\nvar showcommentslink = false;\u003Cbr \/\u003E\nvar posts_date = true;\u003Cbr \/\u003E\nvar post_summary = true;\u003Cbr \/\u003E\nvar summary_chars = 70;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showlatestpostswiththumbs\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a style=\"font-size: 9px; color: #CECECE; margin-top: 10px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\" rel=\"nofollow\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Ubuntu+Condensed' rel='stylesheet' type='text\/css' \/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nimg.recent-post-thumb{width:50px;height:50px;float:right;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}\u003Cbr \/\u003E\nul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}\u003Cbr \/\u003E\nul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width: 80%;}\u003Cbr \/\u003E\nul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}\u003Cbr \/\u003E\n.recent-posts-container a { text-decoration:none; }\u003Cbr \/\u003E\n.recent-posts-container a:hover { color: #222;}\u003Cbr \/\u003E\n.post-date {color:#e0c0c6; font-size: 11px; }\u003Cbr \/\u003E\n.recent-post-title a {font-size: 14px;color: #444; font-weight: bold;}\u003Cbr \/\u003E\n.recent-post-title {padding: 6px 0px;}\u003Cbr \/\u003E\n.recent-posts-details a{ color: #222;}\u003Cbr \/\u003E\n.recent-posts-details {padding: 5px 0px 5px; }\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Posts Style #2\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts widget for blogger\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-lo0g9x57zfM\/VGdGdgukhuI\/AAAAAAAAKrM\/01hWV5z4SSc\/s1600\/recent-posts-widget-for-blogger.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;div class=\"recentpoststyle\"\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestposts(e){for(var t=0;t\u0026lt;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\u0026lt;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=\/\u0026lt;\\S[^\u0026gt;]*\u0026gt;\/g;if(d=d.replace(v,\"\"),document.write('\u0026lt;li class=\"recent-post-title\"\u0026gt;'),document.write(n),document.write('\u0026lt;\/li\u0026gt;\u0026lt;div class=\"recent-post-summ\"\u0026gt;'),1==post_summary)if(d.length\u0026lt;summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(\" \");d=d.substring(0,f),document.write(d+\" \"+i)}document.write(\"\u0026lt;\/div\u0026gt;\"),1==posts_date\u0026amp;\u0026amp;document.write('\u0026lt;div class=\"post-date\"\u0026gt;'+m[parseInt(u,10)]+\" \"+c+\" \"+o+\"\u0026lt;\/div\u0026gt;\")}}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;amp;alt=json-in-script\u0026amp;amp;callback=showlatestposts\"\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u0026lt;a style=\"font-size: 9px; color: #CECECE;margin-top:10px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\" rel=\"nofollow\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\n.recentpoststyle {counter-reset: countposts;list-style-type: none;}\u003Cbr \/\u003E\n.recentpoststyle a {text-decoration: none;color: #49A8D1;}\u003Cbr \/\u003E\n.recentpoststyle a:hover {color: #000;}\u003Cbr \/\u003E\n.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;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-bottom: 5px;padding: 0;}\u003Cbr \/\u003E\n.recent-post-title a {color: #444;text-decoration: none;font: bold 13px \"Avant Garde\",Avantgarde,\"Century Gothic\",CenturyGothic,AppleGothic,sans-serif;}\u003Cbr \/\u003E\n.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}\u003Cbr \/\u003E\n.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,\"Baskerville Old Face\",\"Hoefler Text\",\"Times New Roman\",serif;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Posts Style #3\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts gadget\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-ovCSmmV2cRA\/VGd60NhBCiI\/AAAAAAAAKrc\/uIEiW2SZdUE\/s1600\/recent-posts-widget-with-comments-count.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestpostswiththumbs(t){document.write('\u0026lt;ul class=\"recent-posts-container\"\u0026gt;');for(var e=0;e\u0026lt;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\u0026lt;n.link.length;o++){if(\"replies\"==n.link[o].rel\u0026amp;\u0026amp;\"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(\"\u0026lt;img\"),b=s.indexOf('src=\"',a),c=s.indexOf('\"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a\u0026amp;\u0026amp;-1!=b\u0026amp;\u0026amp;-1!=c\u0026amp;\u0026amp;\"\"!=d?d:\"https:\/\/2.bp.blogspot.com\/-C3Mo0iKKiSw\/VGdK808U7rI\/AAAAAAAAAmI\/W7Ae_dsEVAE\/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('\u0026lt;li class=\"recent-posts-list\"\u0026gt;'),1==showpoststhumbs\u0026amp;\u0026amp;document.write('\u0026lt;a href=\"'+r+'\"\u0026gt;\u0026lt;img class=\"recent-post-thumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;'),document.write('\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;a href=\"'+r+'\" target =\"_top\"\u0026gt;'+i+\"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\"),\"content\"in n)var A=n.content.$t;else if(\"summary\"in n)var A=n.summary.$t;else var A=\"\";var k=\/\u0026lt;\\S[^\u0026gt;]*\u0026gt;\/g;if(A=A.replace(k,\"\"),1==post_summary)if(A.length\u0026lt;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('\u0026lt;br\u0026gt;\u0026lt;div class=\"recent-posts-details\"\u0026gt;'),1==posts_date\u0026amp;\u0026amp;(_=_+w[parseInt(g,10)]+\" \"+v+\" \"+f,$=1),1==readmorelink\u0026amp;\u0026amp;(1==$\u0026amp;\u0026amp;(_+=\" | \"),_=_+'\u0026lt;a href=\"'+r+'\" class=\"url\" target =\"_top\"\u0026gt;Read more\u0026lt;\/a\u0026gt;',$=1),1==showcommentslink\u0026amp;\u0026amp;(1==$\u0026amp;\u0026amp;(_+=\" \u0026lt;br\u0026gt; \"),\"1 Comments\"==l\u0026amp;\u0026amp;(l=\"1 Comment\"),\"0 Comments\"==l\u0026amp;\u0026amp;(l=\"No Comments\"),l='\u0026lt;a href=\"'+m+'\" target =\"_top\"\u0026gt;'+l+\"\u0026lt;\/a\u0026gt;\",_+=l,$=1),document.write(_),document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/li\u0026gt;\")}document.write(\"\u0026lt;\/ul\u0026gt;\")}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;\u003Cbr \/\u003E\nvar showpoststhumbs = true;\u003Cbr \/\u003E\nvar readmorelink = true;\u003Cbr \/\u003E\nvar showcommentslink = true;\u003Cbr \/\u003E\nvar posts_date = true;\u003Cbr \/\u003E\nvar post_summary = true;\u003Cbr \/\u003E\nvar summary_chars = 40;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showlatestpostswiththumbs\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a style=\"font-size: 9px; color: #CECECE; margin-top: 10px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\" rel=\"nofollow\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Oswald' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nimg.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px 10px 10px;border: 1px solid #69B7E2;}\u003Cbr \/\u003E\n.recent-posts-container {font-family:'Oswald', sans-serif;font-size:12px;}\u003Cbr \/\u003E\nul.recent-posts-container li{list-style-type: none; margin-bottom: 10px;font-size:12px;float:left;width:100%}\u003Cbr \/\u003E\nul.recent-posts-container {counter-reset: countposts;list-style-type:none;padding:0;}\u003Cbr \/\u003E\nul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}\u003Cbr \/\u003E\n.recent-posts-container a{text-decoration:none;}\u003Cbr \/\u003E\n.recent-post-title {margin-bottom:5px;}\u003Cbr \/\u003E\n.recent-post-title a {font-size:12px; text-transform: uppercase; color: #2aace3;}\u003Cbr \/\u003E\n.recent-posts-details {margin: 5px 0px 0px 92px;font-size:11px;}\u003Cbr \/\u003E\n.recent-posts-details a{color: #777;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Posts Style #4\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts for blogger, cool widgets\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-l7--Ewqgibs\/VGeaBc6EXrI\/AAAAAAAAKrs\/iKLxdHqU3gA\/s1600\/recent-posts-gadget-blogger.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestpostswiththumbs(t){document.write('\u0026lt;ul class=\"recent-posts-container\"\u0026gt;');for(var e=0;e\u0026lt;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\u0026lt;n.link.length;o++){if(\"replies\"==n.link[o].rel\u0026amp;\u0026amp;\"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(p){s=n.content.$t,a=s.indexOf(\"\u0026lt;img\"),b=s.indexOf('src=\"',a),c=s.indexOf('\"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a\u0026amp;\u0026amp;-1!=b\u0026amp;\u0026amp;-1!=c\u0026amp;\u0026amp;\"\"!=d?d:\"http:\/\/2.bp.blogspot.com\/-C3Mo0iKKiSw\/VGdK808U7rI\/AAAAAAAAAmI\/W7Ae_dsEVAE\/s1600\/no-thumb.png\"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]=\"Jan\",A[2]=\"Feb\",A[3]=\"Mar\",A[4]=\"Apr\",A[5]=\"May\",A[6]=\"Jun\",A[7]=\"Jul\",A[8]=\"Aug\",A[9]=\"Sep\",A[10]=\"Oct\",A[11]=\"Nov\",A[12]=\"Dec\",document.write('\u0026lt;li class=\"recent-posts-list\"\u0026gt;'),1==posts_date\u0026amp;\u0026amp;document.write('\u0026lt;div class=\"post-date\"\u0026gt;'+A[parseInt(w,10)]+\" \"+v+\" \"+f+\"\u0026lt;\/div\u0026gt;\"),1==showpoststhumbs\u0026amp;\u0026amp;document.write('\u0026lt;a href=\"'+r+'\"\u0026gt;\u0026lt;img class=\"recent-post-thumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;'),document.write('\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;a href=\"'+r+'\" target =\"_top\"\u0026gt;'+i+\"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\");var g=\"\",k=0;document.write('\u0026lt;div class=\"recent-posts-details\"\u0026gt;'),1==showcommentslink\u0026amp;\u0026amp;(1==k\u0026amp;\u0026amp;(g+=\" \u0026lt;br\u0026gt; \"),\"1 Comments\"==l\u0026amp;\u0026amp;(l=\"1 Comment\"),\"0 Comments\"==l\u0026amp;\u0026amp;(l=\"No Comments\"),l='\u0026lt;a href=\"'+m+'\" target =\"_top\"\u0026gt;'+l+\"\u0026lt;\/a\u0026gt;\",g+=l,k=1),1==readmorelink\u0026amp;\u0026amp;(1==k\u0026amp;\u0026amp;(g+=\" | \"),g=g+'\u0026lt;a class=\"readmorelink\" href=\"'+r+'\" class=\"url\" target =\"_top\"\u0026gt;Read more\u0026lt;\/a\u0026gt;',k=1),document.write(g),document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/li\u0026gt;\")}document.write(\"\u0026lt;\/ul\u0026gt;\")}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;\u003Cbr \/\u003E\nvar showpoststhumbs = false;\u003Cbr \/\u003E\nvar readmorelink = true;\u003Cbr \/\u003E\nvar showcommentslink = true;\u003Cbr \/\u003E\nvar posts_date = true;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showlatestpostswiththumbs\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a style=\"font-size: 9px; color: #CECECE; float: right; margin-top: 5px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Oswald' rel='stylesheet' type='text\/css'\/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nimg.recent-post-thumb {padding: 2px; width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}\u003Cbr \/\u003E\n.recent-posts-container {font-family: 'Oswald', sans-serif;\u0026nbsp; float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}\u003Cbr \/\u003E\nul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}\u003Cbr \/\u003E\nul.recent-posts-container {counter-reset: countposts;list-style-type: none;}\u003Cbr \/\u003E\nul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}\u003Cbr \/\u003E\n.recent-posts-container a { text-decoration:none; }\u003Cbr \/\u003E\n.recent-posts-container a:hover{color: #4DACE3;}\u003Cbr \/\u003E\n.post-date {color:#e0c0c6; font-size: 11px; }\u003Cbr \/\u003E\n.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}\u003Cbr \/\u003E\n.recent-post-title { margin: 5px 0px; }\u003Cbr \/\u003E\n.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}\u003Cbr \/\u003E\n.recent-posts-details a{ color: #888;}\u003Cbr \/\u003E\na.readmorelink {color: #4DACE3;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Ch4 style=\"text-align:center;\"\u003ERecent Post Style #5\u003C\/h4\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts, blogger gadget\" border=\"0\" src=\"https:\/\/4.bp.blogspot.com\/-NP0YePnPRAg\/VGeofTBkflI\/AAAAAAAAKsI\/_QwawiCLWaA\/s1600\/recent-posts-widget-blogger-count.png\" title=\"5 Cool Recent Post Widgets for Blogger\" \/\u003E\u003C\/div\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showlatestpostswiththumbs(t){document.write('\u0026lt;ul class=\"recent-posts-container\"\u0026gt;');for(var e=0;e\u0026lt;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\u0026lt;n.link.length;o++){if(\"replies\"==n.link[o].rel\u0026amp;\u0026amp;\"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(p){s=n.content.$t,a=s.indexOf(\"\u0026lt;img\"),b=s.indexOf('src=\"',a),c=s.indexOf('\"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a\u0026amp;\u0026amp;-1!=b\u0026amp;\u0026amp;-1!=c\u0026amp;\u0026amp;\"\"!=d?d:\"http:\/\/2.bp.blogspot.com\/-C3Mo0iKKiSw\/VGdK808U7rI\/AAAAAAAAAmI\/W7Ae_dsEVAE\/s1600\/no-thumb.png\"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;A[1]=\"Jan\",A[2]=\"Feb\",A[3]=\"Mar\",A[4]=\"Apr\",A[5]=\"May\",A[6]=\"Jun\",A[7]=\"Jul\",A[8]=\"Aug\",A[9]=\"Sep\",A[10]=\"Oct\",A[11]=\"Nov\",A[12]=\"Dec\",document.write('\u0026lt;li class=\"recent-posts-list\"\u0026gt;'),1==posts_date\u0026amp;\u0026amp;document.write('\u0026lt;div class=\"post-date\"\u0026gt;'+A[parseInt(w,10)]+\" \"+v+\" \"+f+\"\u0026lt;\/div\u0026gt;\"),1==showpoststhumbs\u0026amp;\u0026amp;document.write('\u0026lt;a href=\"'+r+'\"\u0026gt;\u0026lt;img class=\"recent-post-thumb\" src=\"'+u+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;'),document.write('\u0026lt;div class=\"recent-post-title\"\u0026gt;\u0026lt;a href=\"'+r+'\" target =\"_top\"\u0026gt;'+i+\"\u0026lt;\/a\u0026gt;\u0026lt;\/div\u0026gt;\");var g=\"\",k=0;document.write('\u0026lt;div class=\"recent-posts-details\"\u0026gt;'),1==showcommentslink\u0026amp;\u0026amp;(1==k\u0026amp;\u0026amp;(g+=\" \u0026lt;br\u0026gt; \"),\"1 Comments\"==l\u0026amp;\u0026amp;(l=\"1 Comment\"),\"0 Comments\"==l\u0026amp;\u0026amp;(l=\"No Comments\"),l='\u0026lt;a href=\"'+m+'\" target =\"_top\"\u0026gt;'+l+\"\u0026lt;\/a\u0026gt;\",g+=l,k=1),1==readmorelink\u0026amp;\u0026amp;(1==k\u0026amp;\u0026amp;(g+=\" | \"),g=g+'\u0026lt;a class=\"readmorelink\" href=\"'+r+'\" class=\"url\" target =\"_top\"\u0026gt;Read more\u0026lt;\/a\u0026gt;',k=1),document.write(g),document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/li\u0026gt;\")}document.write(\"\u0026lt;\/ul\u0026gt;\")}\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nvar posts_no = 5;\u003Cbr \/\u003E\nvar showpoststhumbs = true;\u003Cbr \/\u003E\nvar readmorelink = true;\u003Cbr \/\u003E\nvar showcommentslink = true;\u003Cbr \/\u003E\nvar posts_date = true;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showlatestpostswiththumbs\" rel=\"nofollow\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;a style=\"font-size: 9px; color: #CECECE; float: right; margin-top: 5px;\" href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\" rel=\"nofollow\"\u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\n\u0026lt;link href='http:\/\/fonts.googleapis.com\/css?family=Lobster|Gloria+Hallelujah' rel='stylesheet' type='text\/css' \/\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E\nimg.recent-post-thumb {width:50px;height:50px;float:right;margin: -4px -35px 0px 0px; border: 4px solid #FCD6CB; border-radius: 100%;}\u003Cbr \/\u003E\n.recent-posts-container {font-family: 'Gloria Hallelujah', cursive;\u0026nbsp; float: left;width: 100%;min-height: 55px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}\u003Cbr \/\u003E\nul.recent-posts-container {counter-reset: countposts;list-style-type: none; background: #fff; }\u003Cbr \/\u003E\nul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: -20px; font-size: 16px;color: #616662;background: #FCD6CB;padding: 9px 14px; border-radius: 100%; margin-top: 15px;}\u003Cbr \/\u003E\nul.recent-posts-container li {padding:5px 0px;min-height:50px; list-style-type: none; margin: -2px 5px 5px 5px;\u0026nbsp; border-top: 2px solid #FCD6CB;}\u003Cbr \/\u003E\nul.recent-posts-container {border: 2px solid #FCD6CB; }\u003Cbr \/\u003E\n.recent-posts-container a { text-decoration:none; }\u003Cbr \/\u003E\n.recent-posts-container a:hover { color: #222;}\u003Cbr \/\u003E\n.post-date {color:#e0c0c6; font-size: 11px; }\u003Cbr \/\u003E\n.recent-post-title a {font-size: 14px;color: #616662;}\u003Cbr \/\u003E\n.recent-post-title {padding: 6px 0px;}\u003Cbr \/\u003E\n.recent-posts-details a{ color: #888;}\u003Cbr \/\u003E\n.recent-posts-details {padding-bottom: 5px;}\u003Cbr \/\u003E\na.readmorelink {color: #4DACE3;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EHow to Add Recent Posts Widget on Blogger\u003C\/h2\u003E\nWant to add one of the styles above? Just follow the following steps below:\u003Cbr \/\u003E\n\u003Col\u003E\u003Cli\u003ELog into your Blogger dashboard and click on your blog.\u003C\/li\u003E\n\u003Cli\u003EGo to \"Layout\" and click the \"Add a gadget\" link on the right side.\u003C\/li\u003E\n\u003Cli\u003EFrom the pop-up window, scroll down and select the \"HTML\/JavaScript\" gadget:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"316\" src=\"https:\/\/3.bp.blogspot.com\/-pJWeUlhQv9E\/VD1bzt1qKoI\/AAAAAAAAKpQ\/OlBnyqkUI1k\/s1600\/add-html-javascript-gadget-blogger.png\" width=\"640\" \/\u003E\u003C\/div\u003E\u003C\/li\u003E\n\u003Cli\u003EPaste the code of the chosen widget found below it.\u003C\/li\u003E\n\u003Cli\u003EHit the \"Save\" button and you're done!\u003C\/li\u003E\u003C\/ol\u003E\n\u003Ch3\u003EKeep Your Blog Updated\u003C\/h3\u003E\nUsing a recent post widget for Blogger can truly benefit you and improve your skill as a blogger. As you can see, these designs can look great on Blogger sites, but they do act a little bit like a progress report for the author. If you start to fall behind, the dates on your recent post widget will definitely give you away.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ca href=\"http:\/\/helplogger.blogspot.com\/2016\/09\/how-to-hide-posts-from-blogger-homepage.html\"\u003ESet a schedule\u003C\/a\u003E and make sure that you are making regular posts on the blog. These posts will be automatically updated on your widget and readers can view this information whenever they want. Add your recent post widget for Blogger on the every page of the blog or in your template so that these posts can encourage others to continue reading, thus increasing the total time spent on your site."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/8736368861274781333\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html#comment-form","title":"23 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8736368861274781333"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8736368861274781333"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html","title":"5 Cool Recent Post Widgets for Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/1.bp.blogspot.com\/-CsF_3elyJOQ\/Xpng-xaL3nI\/AAAAAAAAMQk\/ULq7cErTOAg8F-PHDWiKYNBtxKRIZZp2gCLcBGAsYHQ\/s72-c\/recent-posts-gadget-blogger.jpg","height":"72","width":"72"},"thr$total":{"$t":"23"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-8111109165573234969"},"published":{"$t":"2013-11-19T05:41:00.001-08:00"},"updated":{"$t":"2016-10-31T15:29:59.597-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"recent posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Recent Rotating Post Gadget with Excerpt For Blogger"},"content":{"type":"html","$t":"This JavaScript code will display the latest posts of any feed, the difference being that it has two parts which can be used individually or combined. The top of this widget will show a single post along with the title (link), author, date and a brief summary of its content. In addition, this post will rotate automatically within a list whose number of elements will be decided by us. At the bottom, we'll find a full list with recent posts that, on mouse over, will replace the post above, thus breaking the automatic cycle.\u003Cbr \/\u003E\u003Cbr \/\u003E\nBefore adding anything, let's see it in action to decide if it does what we want.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv style=\"text-align: center\"\u003E\u003Ca class=\"demo-link\" href=\"http:\/\/widgets-tricks.blogspot.com\/2014\/10\/recent-rotating-posts-widget-for-blogger.html\" rel=\"nofollow\" target=\"_blank\"\u003EDemo blog\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts widget for blogger\" border=\"0\" height=\"261\" src=\"https:\/\/2.bp.blogspot.com\/-4biMUQKDQss\/UrZ2MMqMlvI\/AAAAAAAAFkE\/ZaF_KVqIBqU\/s320\/recent-rotating-posts-widget-for-blogger.png\" title=\"how to add rotating recent posts gadget to blogger\" width=\"310\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EHow to Add Recent Rotating Posts Widget to Blogger\u003C\/h2\u003E\nStep 1. Go to \"Layout\" \u0026gt; click on the \"Add a Gadget\" link.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"148\" src=\"https:\/\/4.bp.blogspot.com\/-LcW_xNLozrI\/UTJQzFPdhEI\/AAAAAAAAC4c\/LQFO0DKxxm4\/s640\/blogger-layout-add+a+gadget-how-to.png\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 2. From the pop-up window, choose the \"HTML\/JavaScript\" gadget\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"195\" src=\"https:\/\/2.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4k\/tqQrar_00tM\/s400\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 3. Paste this code inside the empty box:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;style\u0026gt;\u003Cbr \/\u003E\n.gfg-root {\u003Cbr \/\u003E\nwidth: 100%;\u003Cbr \/\u003E\nheight : auto;\u003Cbr \/\u003E\nposition : relative;\u003Cbr \/\u003E\noverflow : hidden;\u003Cbr \/\u003E\nmargin: 0 auto;\u003Cbr \/\u003E\ntext-align : center;\u003Cbr \/\u003E\nfont-size: 12px;\u003Cbr \/\u003E\nborder: 1px solid #DBDBDB;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-title {\u003Cbr \/\u003E\nfont-size: 16px;\u003Cbr \/\u003E\nfont-weight : bold;\u003Cbr \/\u003E\ncolor : #6B6B6B;\u003Cbr \/\u003E\nbackground:#F3F3F3;\u003Cbr \/\u003E\nbackground-repeat: repeat;\u003Cbr \/\u003E\nline-height : 1.4em;\u003Cbr \/\u003E\noverflow : hidden;\u003Cbr \/\u003E\nwhite-space : nowrap;\u003Cbr \/\u003E\npadding: 5px;\u003Cbr \/\u003E\ntext-shadow: 0px 2px #fff;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-entry {\u003Cbr \/\u003E\nbackground-color: #FFFFFF;\u003Cbr \/\u003E\nwidth : 100%;\u003Cbr \/\u003E\nheight : 9.2em;\u003Cbr \/\u003E\nposition : relative;\u003Cbr \/\u003E\noverflow : hidden;\u003Cbr \/\u003E\ntext-align : left;\u003Cbr \/\u003E\nmargin-top : 3px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gf-title a {\u003Cbr \/\u003E\ntext-transform: capitalize;\u003Cbr \/\u003E\ncolor: #0000ff;\u003Cbr \/\u003E\nfont-size: 14px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-subtitle {\u003Cbr \/\u003E\ndisplay: none;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-list {\u003Cbr \/\u003E\nposition : relative;\u003Cbr \/\u003E\noverflow : hidden;\u003Cbr \/\u003E\ntext-align : left;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-listentry {\u003Cbr \/\u003E\nline-height : 1.5em;\u003Cbr \/\u003E\noverflow : hidden;\u003Cbr \/\u003E\nwhite-space : nowrap;\u003Cbr \/\u003E\ntext-overflow : ellipsis;\u003Cbr \/\u003E\npadding-left : 15px;\u003Cbr \/\u003E\npadding-right : 5px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-listentry-odd {\u003Cbr \/\u003E\nbackground-color : #F3F3F3;\u003Cbr \/\u003E\nborder-bottom : 1px dotted #CCCCCC;\u003Cbr \/\u003E\npadding: 5px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-listentry-even {\u003Cbr \/\u003E\nbackground-color : #F3F3F3;\u003Cbr \/\u003E\nborder-bottom : 1px dotted #CCCCCC;\u003Cbr \/\u003E\npadding: 5px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-listentry-odd a{\u003Cbr \/\u003E\ncolor: #595959;\u003Cbr \/\u003E\npadding: 0 0px 0 10px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-listentry-even a{\u003Cbr \/\u003E\ncolor: #242424;\u003Cbr \/\u003E\npadding: 0 0px 0 10px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-listentry-highlight {\u003Cbr \/\u003E\nbackground: #FFFFFF;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-listentry-highlight:before {\u003Cbr \/\u003E\nposition: absolute;\u003Cbr \/\u003E\nleft: 0;\u003Cbr \/\u003E\ncontent: '\\25BA ';\u003Cbr \/\u003E\nfont-size: 14px;\u003Cbr \/\u003E\ncolor: #DBDBDB;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-listentry-highlight a {\u003Cbr \/\u003E\ncolor: #242424;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-root .gfg-entry .gf-result {\u003Cbr \/\u003E\nposition : relative;\u003Cbr \/\u003E\nbackground-color: #ffffff;\u003Cbr \/\u003E\nwidth : auto;\u003Cbr \/\u003E\nheight : 100%;\u003Cbr \/\u003E\npadding-left : 20px;\u003Cbr \/\u003E\npadding-right : 5px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-root .gfg-entry .gf-result .gf-title {\u003Cbr \/\u003E\nfont-size: 14px;\u003Cbr \/\u003E\nline-height : 1.2em;\u003Cbr \/\u003E\noverflow : hidden;\u003Cbr \/\u003E\nwhite-space : nowrap;\u003Cbr \/\u003E\ntext-overflow : ellipsis;\u003Cbr \/\u003E\nmargin-bottom : 2px;\u003Cbr \/\u003E\nmargin-top: 5px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.gfg-root .gfg-entry .gf-result .gf-snippet {\u003Cbr \/\u003E\nheight : 3.8em;\u003Cbr \/\u003E\ncolor: #000000;\u003Cbr \/\u003E\nmargin-top : 3px;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n.clearFloat {\u003Cbr \/\u003E\nclear : both;}\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"http:\/\/www.google.com\/jsapi\" type=\"text\/javascript\"\u0026gt;\u0026lt;\/script\u0026gt;\u0026lt;script src=\"http:\/\/www.google.com\/uds\/solutions\/dynamicfeed\/gfdynamicfeedcontrol.js\" type=\"text\/javascript\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003E\nfunction showGadget() {var feeds = [{title:'List',url:'\u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\u003C\/b\u003E\/feeds\/posts\/default?redirect=false\u0026amp;\u003Cb\u003E\u003Cspan style=\"color: #cc0000;\"\u003Estart-index=1\u003C\/span\u003E\u003C\/b\u003E\u0026amp;\u003Cb\u003E\u003Cspan style=\"color: #6aa84f;\"\u003Emax-results=10\u003C\/span\u003E'\u003C\/b\u003E},];\u003Cbr \/\u003E\nnew GFdynamicFeedControl(feeds, 'feedGadget',{\u003Cb\u003Etitle: \u003C\/b\u003E'\u003Cb\u003ELatest Posts\u003C\/b\u003E', \u003Cb\u003EnumResults : 10\u003C\/b\u003E, \u003Cb\u003EdisplayTime : 5000\u003C\/b\u003E, \u003Cb\u003EhoverTime : 500\u003C\/b\u003E});} google.load(\"feeds\", \"1\");\u003Cbr \/\u003E\ngoogle.setOnLoadCallback(showGadget);\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;div id=\"feedGadget\"\u0026gt;Loading...\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\n\u003Ch3\u003EHow to Customize the Recent Rotating Post Gadget\u003C\/h3\u003E\nThe URL in blue is for the feed. So, the \u003Cb\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/b\u003E URL should be replaced with the feed URL of your blog.\u003Cbr \/\u003E\u003Cbr \/\u003E\nNext is \u003Cb\u003Estart-index=1\u003C\/b\u003E. This number indicates which post will appear first on the list. By default, it is the latest post published on your blog, so if you want to begin displaying older posts, change the 1 value.\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cb\u003Emax-results=10\u003C\/b\u003E indicates the maximum number of posts that we will be reading from the feed, beginning from the one that we have set up before in the start-index=1. This number always needs to be equal or greater to what we should see later and what it does is to set the number of posts that will be shown in the gadget. The easiest way would be to put 500 in order not to fail, but the higher the number is, the longer this gadget will take to load, so it's better to adjust to what we need to show.\u003Cbr \/\u003E\u003Cbr \/\u003E\nFinally, here are some other script parameters:\n\u003Cul\u003E\u003Cli\u003E\u003Cb\u003Etitle: 'Latest Posts'\u003C\/b\u003E, is the widget's title that appears on top.\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EnumResults: 10\u003C\/b\u003E, number of posts that will show in the list.\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EdisplayTime: 5000\u003C\/b\u003E, the delay time between posts in the rotator (in milliseconds).\u003C\/li\u003E\n\u003Cli\u003E\u003Cb\u003EhoverTime: 500\u003C\/b\u003E, minimum time for an item in the list to be displayed at the top.\u003C\/li\u003E\u003C\/ul\u003E\nIf you want to hide the list and show only the posts, change this part: \u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n.gfg-list {\u003Cbr \/\u003E\nposition : relative;\u003Cbr \/\u003E\noverflow : hidden;\u003Cbr \/\u003E\ntext-align : left;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nTo: \u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n.gfg-list {\u003Cbr \/\u003E\ndisplay:none;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nIf you want to display only the list, change this: \u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n.gfg-entry {\u003Cbr \/\u003E\nbackground-color: #FFFFFF;\u003Cbr \/\u003E\nwidth : 100%;\u003Cbr \/\u003E\nheight : 9.2em;\u003Cbr \/\u003E\nposition : relative;\u003Cbr \/\u003E\noverflow : hidden;\u003Cbr \/\u003E\ntext-align : left;\u003Cbr \/\u003E\nmargin-top : 3px;\u003Cbr \/\u003E\n}\u003C\/blockquote\u003E\nTo: \u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n.gfg-entry {\u003Cbr \/\u003E\ndisplay: none;\n} \u003C\/blockquote\u003E\u003Cbr \/\u003E\nStep 4. Save the gadget and you're done adding the recent rotating post widget with excerpt in Blogger."},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/8111109165573234969\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2013\/11\/recent-posts-widget-for-blogger.html#comment-form","title":"9 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8111109165573234969"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8111109165573234969"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2013\/11\/recent-posts-widget-for-blogger.html","title":"Recent Rotating Post Gadget with Excerpt For Blogger"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/2.bp.blogspot.com\/-4biMUQKDQss\/UrZ2MMqMlvI\/AAAAAAAAFkE\/ZaF_KVqIBqU\/s72-c\/recent-rotating-posts-widget-for-blogger.png","height":"72","width":"72"},"thr$total":{"$t":"9"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-3798068948574786374"},"published":{"$t":"2013-04-01T19:23:00.001-07:00"},"updated":{"$t":"2014-07-30T15:09:47.165-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"labels"},{"scheme":"http://www.blogger.com/atom/ns#","term":"recent posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Show Recent Posts With Thumbnails For Particular Label or Category in Blogger "},"content":{"type":"html","$t":"Sometimes we want to have everything organized, so that our readers can find topics of interest more easily. To accomplish this, 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.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-UFTmOqEIqv4\/U9lsa7aMwVI\/AAAAAAAAJxM\/NwsBFWsdR5Y\/s1600\/recent-posts-widget-by-labels-for-blogger-blogspot.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"recent posts by labels\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-UFTmOqEIqv4\/U9lsa7aMwVI\/AAAAAAAAJxM\/NwsBFWsdR5Y\/s1600\/recent-posts-widget-by-labels-for-blogger-blogspot.png\" height=\"215\" title=\"Recent Posts widget by labels or category for Blogger\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\nTo add this recent posts widget for labels or categories in a Blogger blog, follow the next steps:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Ch2\u003E\nRecent Posts with Thumbnails Sorted by Labels\u003C\/h2\u003E\n\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 1.\u003C\/b\u003E\u003C\/span\u003E From your \u003Ca href=\"https:\/\/www.blogger.com\/home\" rel=\"nofollow\" target=\"_blank\"\u003EBlogger Dashboard\u003C\/a\u003E, go to 'Template' and click the 'Edit HTML' button\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/1.bp.blogspot.com\/-9PJxe92QMdU\/UTOPNGadxaI\/AAAAAAAAC5Y\/FvfeI-b1ymo\/s1600\/blogger-template-edit-html.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/1.bp.blogspot.com\/-9PJxe92QMdU\/UTOPNGadxaI\/AAAAAAAAC5Y\/FvfeI-b1ymo\/s1600\/blogger-template-edit-html.png\" height=\"137\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 2. \u003C\/b\u003E\u003C\/span\u003EClick anywhere inside the code area and search (CTRL + F) for this piece of code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\nJust above \u003Cspan style=\"background-color: yellow;\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E, paste this CSS style:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\/* Recent posts by labels\u003Cbr \/\u003E\n--------------------------------- *\/ \u003Cbr \/\u003E\nimg.label_thumb{\u003Cbr \/\u003E\nfloat:left;\u003Cbr \/\u003E\nmargin-right:10px !important;\u003Cbr \/\u003E\nheight:65px; \u003Cspan style=\"color: #38761d;\"\u003E\/* Thumbnail height *\/\u003C\/span\u003E\u003Cbr \/\u003E\nwidth:65px; \u003Cspan style=\"color: #38761d;\"\u003E\/* Thumbnail width *\/\u003C\/span\u003E\u003Cbr \/\u003E\nborder: 1px solid #fff;\u003Cbr \/\u003E\n-webkit-border-radius: 10px;\u003Cbr \/\u003E\n-moz-border-radius: 10px;\u003Cbr \/\u003E\nborder-radius: 10px;\u003Cbr \/\u003E\n-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);\u003Cbr \/\u003E\n-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);\u003Cbr \/\u003E\nbox-shadow: 0 1px 1px rgba(0, 0, 0, .4);\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n#label_with_thumbs {\u003Cbr \/\u003E\nfloat: left;\u003Cbr \/\u003E\nwidth: 100%;\u003Cbr \/\u003E\nmin-height: 70px;\u003Cbr \/\u003E\nmargin: 0px 10px 2px 0px;\u003Cbr \/\u003E\npadding: 0;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nul#label_with_thumbs li {\u003Cbr \/\u003E\npadding:8px 0;\u003Cbr \/\u003E\nmin-height:65px;\u003Cbr \/\u003E\nmargin-bottom:0px;\u003Cbr \/\u003E\nborder-bottom: 1px dotted #999999;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n#label_with_thumbs li{\u003Cbr \/\u003E\nlist-style: none ;\u003Cbr \/\u003E\npadding-left:0px !important;\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n#label_with_thumbs a { text-transform: uppercase;}\u003Cbr \/\u003E\n#label_with_thumbs strong {padding-left:0px; }\u003C\/blockquote\u003E\n\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 3.\u003C\/b\u003E\u003C\/span\u003E Now try to find this tag: \u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/head\u0026gt;\u003C\/blockquote\u003E\n... just above \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E add this script:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\n\/\/\u0026lt;![CDATA[\u003Cbr \/\u003E\nfunction labelthumbs(json){document.write('\u0026lt;ul id=\"label_with_thumbs\"\u0026gt;');for(var i=0;i\u0026lt;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\u0026lt;entry.link.length;k++){if(entry.link[k].rel=='replies'\u0026amp;\u0026amp;entry.link[k].type=='text\/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}\u003Cbr \/\u003E\nif(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)\u003Cbr \/\u003E\n{s=entry.content.$t;a=s.indexOf(\"\u0026lt;img\");b=s.indexOf(\"src=\\\"\",a);c=s.indexOf(\"\\\"\",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)\u0026amp;\u0026amp;(b!=-1)\u0026amp;\u0026amp;(c!=-1)\u0026amp;\u0026amp;(d!=\"\")){thumburl=d;}else thumburl='\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/3.bp.blogspot.com\/-zP87C2q9yog\/UVopoHY30SI\/AAAAAAAAE5k\/AIyPvrpGLn8\/s1600\/picture_not_available.png\u003C\/span\u003E';}\u003Cbr \/\u003E\nvar 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('\u0026lt;li class=\"clearfix\"\u0026gt;');if(showpostthumbnails==true)\u003Cbr \/\u003E\ndocument.write('\u0026lt;a href=\"'+posturl+'\" target =\"_top\"\u0026gt;\u0026lt;img class=\"label_thumb\" src=\"'+thumburl+'\"\/\u0026gt;\u0026lt;\/a\u0026gt;');document.write('\u0026lt;strong\u0026gt;\u0026lt;a href=\"'+posturl+'\" target =\"_top\"\u0026gt;'+posttitle+'\u0026lt;\/a\u0026gt;\u0026lt;\/strong\u0026gt;\u0026lt;br\u0026gt;');if(\"content\"in entry){var postcontent=entry.content.$t;}\u003Cbr \/\u003E\nelse\u003Cbr \/\u003E\nif(\"summary\"in entry){var postcontent=entry.summary.$t;}\u003Cbr \/\u003E\nelse var postcontent=\"\";var re=\/\u0026lt;\\S[^\u0026gt;]*\u0026gt;\/g;postcontent=postcontent.replace(re,\"\");if(showpostsummary==true){if(postcontent.length\u0026lt;numchars){document.write('');document.write(postcontent);document.write('');}\u003Cbr \/\u003E\nelse{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(\" \");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}\u003Cbr \/\u003E\nvar towrite='';var flag=0;document.write('\u0026lt;br\u0026gt;');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}\u003Cbr \/\u003E\nif(showcommentnum==true)\u003Cbr \/\u003E\n{if(flag==1){towrite=towrite+' | ';}\u003Cbr \/\u003E\nif(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='\u0026lt;a href=\"'+commenturl+'\" target =\"_top\"\u0026gt;'+commenttext+'\u0026lt;\/a\u0026gt;';towrite=towrite+commenttext;flag=1;;}\u003Cbr \/\u003E\nif(displaymore==true)\u003Cbr \/\u003E\n{if(flag==1)towrite=towrite+' | ';towrite=towrite+'\u0026lt;a href=\"'+posturl+'\" class=\"url\" target =\"_top\"\u0026gt;More »\u0026lt;\/a\u0026gt;';flag=1;;}\u003Cbr \/\u003E\ndocument.write(towrite);document.write('\u0026lt;\/li\u0026gt;');if(displayseparator==true)\u003Cbr \/\u003E\nif(i!=(numposts-1))\u003Cbr \/\u003E\ndocument.write('');}document.write('\u0026lt;\/ul\u0026gt;');}\u003Cbr \/\u003E\n\/\/]]\u0026gt;\u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\n\u003Ci\u003E\u003Cb\u003ENote: \u003C\/b\u003Eto add your own pic for the posts with no thumbnail, replace the image url in blue with your own\u003C\/i\u003E\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"color: #cc0000;\"\u003E\u003Cb\u003EUpdate!\u003C\/b\u003E\u003C\/span\u003E For a better image resolution add this script above the \u003Cspan style=\"background-color: yellow;\"\u003E\u003Cb\u003E\u0026lt;\/body\u0026gt;\u003C\/b\u003E\u003C\/span\u003E tag:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u003Cbr \/\u003E\nfunction changeThumbSize(id,size){\u003Cbr \/\u003E\nvar blogGadget = document.getElementById(id);\u003Cbr \/\u003E\nvar replacement = blogGadget.innerHTML;\u003Cbr \/\u003E\nblogGadget.innerHTML = replacement.replace(\/s72-c\/g,\"s\"+size+\"-c\");\u003Cbr \/\u003E\nvar thumbnails = blogGadget.getElementsByTagName(\"img\");\u003Cbr \/\u003E\nfor(var i=0;i\u0026amp;lt;thumbnails.length;i++){ \u003Cbr \/\u003E\nthumbnails[i].width = size; \u003Cbr \/\u003E\nthumbnails[i].height = size; \u003Cbr \/\u003E\n}\u003Cbr \/\u003E\n}\u003Cbr \/\u003E\nchangeThumbSize(\"label_with_thumbs\",210);      \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u003Cbr \/\u003E\n\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\nNow Save the template to finish with your changes.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nSo, what we have added, is 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:\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 4.\u003C\/b\u003E\u003C\/span\u003E Go to Layout - click on Add a Gadget\u003Cbr \/\u003E\n\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\n\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-oZmNJfD1NP4\/U9ls2ucXxzI\/AAAAAAAAJxU\/-MCQYeUvzNI\/s1600\/blogger-layout-add_a_gadget-how-to.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"blogger layout, add a gadget\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-oZmNJfD1NP4\/U9ls2ucXxzI\/AAAAAAAAJxU\/-MCQYeUvzNI\/s1600\/blogger-layout-add_a_gadget-how-to.png\" height=\"152\" title=\"Recent Posts widget by categories or labels\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\n\u003Cbr \/\u003E\n\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 5.\u003C\/b\u003E\u003C\/span\u003E From the pop-up window, choose the HTML\/Javascript widget and paste this script inside the empty box:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;script type='text\/javascript'\u0026gt;var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 100;\u0026lt;\/script\u0026gt; \u003Cbr \/\u003E\n\u0026lt;script type=\"text\/javascript\" src=\"\/feeds\/posts\/default\/-\/\u003Cspan style=\"color: #cc0000;\"\u003EName-of-the-label\u003C\/span\u003E?published\u0026amp;alt=json-in-script\u0026amp;callback=labelthumbs\"\u0026gt;\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n\u003Cb\u003ENote:\u003C\/b\u003E Where it says \u003Cspan style=\"color: red;\"\u003E\u003Cspan style=\"color: #cc0000;\"\u003EName-of-the-label\u003C\/span\u003E \u003C\/span\u003Eshould be the name of the label that you want to display, and if your label is case sensitive, like in my example, then you should type it that way.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nWithin the last code, there are these parts which can be customized - change \u003Ci\u003Etrue \u003C\/i\u003Ewith \u003Ci\u003Efalse \u003C\/i\u003Eor vice versa:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\nvar numposts \u003Cspan style=\"color: #666666;\"\u003E← Number of posts to display\u003C\/span\u003E\u003Cbr \/\u003E\nvar showpostthumbnails \u003Cspan style=\"color: #666666;\"\u003E← Show\/hide thumbnails\u003C\/span\u003E\u003Cbr \/\u003E\nvar displaymore \u003Cspan style=\"color: #666666;\"\u003E← Show or hide the read more link\u003C\/span\u003E\u003Cbr \/\u003E\nvar displayseparator \u003Cspan style=\"color: #666666;\"\u003E← Show\/hide separator\u003C\/span\u003E\u003Cbr \/\u003E\nvar showcommentnum\u003Cspan style=\"color: #666666;\"\u003E ← Show\/hide the number of comments\u003C\/span\u003E\u003Cbr \/\u003E\nvar showpostdate \u003Cspan style=\"color: #666666;\"\u003E← Show\/hide the posts dates\u003C\/span\u003E\u003Cbr \/\u003E\nvar showpostsummary \u003Cspan style=\"color: #666666;\"\u003E← Show or not the posts summaries\u003C\/span\u003E\u003Cbr \/\u003E\nvar numchars \u003Cspan style=\"color: #666666;\"\u003E← Number of posts characters (here you have to change the 100 value)\u003C\/span\u003E\u003C\/blockquote\u003E\nRemember that the gadget displays the latest posts from a particular label... therefore, if you want to display the latest posts from other labels, repeat step 5 for each additional category that you want to add.\u003Cbr \/\u003E\n\u003Cbr \/\u003E\nThat's it :) Enjoy!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/3798068948574786374\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2013\/04\/show-recent-posts-with-thumbnails-for.html#comment-form","title":"86 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3798068948574786374"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3798068948574786374"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2013\/04\/show-recent-posts-with-thumbnails-for.html","title":"Show Recent Posts With Thumbnails For Particular Label or Category in Blogger "}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/2.bp.blogspot.com\/-UFTmOqEIqv4\/U9lsa7aMwVI\/AAAAAAAAJxM\/NwsBFWsdR5Y\/s72-c\/recent-posts-widget-by-labels-for-blogger-blogspot.png","height":"72","width":"72"},"thr$total":{"$t":"86"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-860966100554056963"},"published":{"$t":"2012-05-04T10:07:00.001-07:00"},"updated":{"$t":"2016-10-28T20:51:30.074-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"recent posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Recent Posts Widget with Thumbnails for Blogger\/Blogspot"},"content":{"type":"html","$t":"We have already posted a tutorial on \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2012\/04\/recent-posts-widget-for-bloggerblogspot.html\"\u003Ehow to add a simple recent posts widget\u003C\/a\u003E that shows a list with the most recent posts if you'd prefer a more minimalist look. This tutorial will show you a different way of \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\"\u003Edisplaying the Recent Posts on Blogger\u003C\/a\u003E. This is specially for users who want to show more info like recent posts excerpt or summary and the posts thumbnails.\u003Cbr \/\u003E\u003Cbr \/\u003E\nTo add the Recent Posts widget with thumbnails in Blogger is very easy. Just follow these steps below:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg alt=\"recent posts, blogger widgets\" border=\"0\" height=\"266\" src=\"https:\/\/2.bp.blogspot.com\/-bjLDxA1eI3o\/T6QMNXxGJvI\/AAAAAAAACBQ\/dLUwrAwa-PU\/s320\/recent+posts+widget+with+thumbnails+for+blogger+blogspot.png\" title=\"Recent Posts Widget With Thumbnails \" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n\u003Ch3\u003EHow to Add the Recent Posts Widget to Blogger\u003C\/h3\u003E\nStep 1. From your Blogger Dashboard, go to \u003Cb\u003ELayout\u003C\/b\u003E \u0026gt; click on \u003Cb\u003EAdd a Gadget\u003C\/b\u003E link\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"150\" src=\"https:\/\/4.bp.blogspot.com\/-LcW_xNLozrI\/UTJQzFPdhEI\/AAAAAAAAC4c\/LQFO0DKxxm4\/s640\/blogger-layout-add+a+gadget-how-to.png\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 2. Once the pop-up window appears, scroll down and choose HTML\/JavaScript\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"195\" src=\"https:\/\/2.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4k\/tqQrar_00tM\/s400\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\nStep 3. Inside the empty box, add the following code:\u003Cbr \/\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;div class=\"eggTray\"\u0026gt;\u003Cbr \/\u003E\n\u0026lt;script src=\"https:\/\/googledrive.com\/host\/0B4n9GL3eVuV-bFc4a1RjZ2Zhbjg\"\u0026gt;{\"pipe_id\":\"1a6640e2a78b2c6e736f2220529daae5\",\"_btype\":\"list\",\u003Cbr \/\u003E\n\"pipe_params\":{\"URL\":\"\u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003EYOUR-BLOG\u003C\/span\u003E\u003C\/b\u003E\/feeds\/posts\/default\"},\u003Cbr \/\u003E\n\"hideHeader\":\"false\",\"height\":\"\u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003E500\u003C\/span\u003E\u003C\/b\u003E\",\"count\": \u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003E8\u003C\/span\u003E\u003C\/b\u003E }\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\n\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\n\u0026lt;style type=text\/css\u0026gt;\u003Cbr \/\u003E\n.eggTray {margin:10px 0px;padding:0px;}\u003Cbr \/\u003E\n.ybr li \u0026nbsp;{border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}\u003Cbr \/\u003E\n.pipesTitle {\u003Cb\u003E\u003Cspan style=\"color: #38761d;\"\u003Epadding-top:0px;\u003C\/span\u003E\u003C\/b\u003E}\u003Cbr \/\u003E\n.pipesDescription {display:\u003Cspan style=\"color: red;\"\u003E\u003Cb\u003Etrue\u003C\/b\u003E\u003C\/span\u003E;}\u003Cbr \/\u003E\n.ycdr, .ycdr a {color:#999999;}\u003Cbr \/\u003E\n.widget .popular-posts ul {padding-left:0;}\u003Cbr \/\u003E\n\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\n\u003Cbr \/\u003E\n\u003Ch4\u003ERecent Posts widget settings\u003C\/h4\u003E\n- replace \u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003EYOUR-BLOG\u003C\/span\u003E\u0026nbsp;\u003C\/b\u003Ewith the url of your site or blog (ex: http:\/\/helplogger.blogspot.com) and look to have just one forward slash symbol \"\u003Cb\u003E\/\u003C\/b\u003E\" at the end of the url otherwise will not work\u003Cbr \/\u003E\n- to disable the scroll bar, remove the \u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003E500\u003C\/span\u003E\u003C\/b\u003E value\u003Cbr \/\u003E\n- by default, this widget is set to display a maximum of 8 recent posts. To change this number, replace \u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003E8\u003C\/span\u003E\u003C\/b\u003E with the number of posts that you want to show\u003Cbr \/\u003E\n- to display only the post titles, change \u003Cb\u003E\u003Cspan style=\"color: red;\"\u003Etrue\u003C\/span\u003E\u003C\/b\u003E to \u003Cb\u003Enone\u003C\/b\u003E and \"0\" from \u003Cb\u003E\u003Cspan style=\"color: #38761d;\"\u003Epadding-top:0px\u003C\/span\u003E\u003C\/b\u003E with 10\u003Cbr \/\u003E\u003Cbr \/\u003E\nStep 4. Save your widget. And you're done!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/860966100554056963\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2012\/05\/recent-posts-widget-with-thumbnails-for.html#comment-form","title":"138 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/860966100554056963"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/860966100554056963"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2012\/05\/recent-posts-widget-with-thumbnails-for.html","title":"Recent Posts Widget with Thumbnails for Blogger\/Blogspot"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/2.bp.blogspot.com\/-bjLDxA1eI3o\/T6QMNXxGJvI\/AAAAAAAACBQ\/dLUwrAwa-PU\/s72-c\/recent+posts+widget+with+thumbnails+for+blogger+blogspot.png","height":"72","width":"72"},"thr$total":{"$t":"138"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-5197552418331573382"},"published":{"$t":"2012-04-28T08:42:00.003-07:00"},"updated":{"$t":"2016-10-28T21:09:13.385-07:00"},"category":[{"scheme":"http://www.blogger.com/atom/ns#","term":"posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"recent posts"},{"scheme":"http://www.blogger.com/atom/ns#","term":"Widgets"}],"title":{"type":"text","$t":"Simple Recent Posts Widget for Blogger\/Blogspot"},"content":{"type":"html","$t":"The main advantage on this \u003Ca href=\"http:\/\/helplogger.blogspot.com\/2014\/11\/5-cool-recent-post-widgets-for-blogger.html\"\u003ERecent Posts widget\u003C\/a\u003E is that it will show not only post titles, but also post excerpts or snippets, and it's easy to customize or apply different style on it. To make it fit your own design, you will need to modify the CSS style - you can change the link or background color, the size and color of text\/links.\u003Cbr \/\u003E\u003Cbr \/\u003E\nWhat you can do with this widget:\u003Cbr \/\u003E\n- display post titles only \u003Cbr \/\u003E\n- change the number of posts \u003Cbr \/\u003E\n- change the number of characters of the post snippet\/excerpt \u003Cbr \/\u003E\n- show the post dates \u003Cbr \/\u003E\u003Cbr \/\u003E\nSee the screenshot below:\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"318\" src=\"https:\/\/2.bp.blogspot.com\/-q7SOzY4de4Q\/T5wFy7i6p3I\/AAAAAAAACAU\/qiXglTJHxIc\/s320\/add+recent+posts+widget+for+blogger+blogspot.png\" width=\"320\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch2\u003EHow to add Recent Posts Widget to Blogger\u003C\/h2\u003E\n1. Log in to your Blogger Dashboard \u0026gt; go to \"Layout\" and click the \"Add a Gadget\" link:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"148\" src=\"https:\/\/2.bp.blogspot.com\/-LcW_xNLozrI\/UTJQzFPdhEI\/AAAAAAAAC4Y\/o4QyC_MnUBg\/s1600\/blogger-layout-add+a+gadget-how-to.png\" width=\"640\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n2. From the pop-up window, scroll down and choose HTML\/JavaScript from the list...\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Cimg border=\"0\" height=\"196\" src=\"https:\/\/4.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4g\/hoQcqhyvYU0\/s1600\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" width=\"400\" \/\u003E\u003C\/div\u003E\u003Cbr \/\u003E\n3. Select \u0026amp; copy the code below the chosen widget and paste it into the HTML\/JavaScript content box:\u003Cbr \/\u003E\u003Cbr \/\u003E\n\u003Ch3\u003ERecent Posts Widget with Snippets\u003C\/h3\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;div id=\"hlrpsa\"\u0026gt;\u003Cbr \/\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003Efunction showrecentposts(t){for(var e=0;e\u0026lt;numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var s=0;s\u0026lt;r.link.length;s++)if(\"alternate\"==r.link[s].rel){n=r.link[s].href;break}i=i.link(n);var a=\"...\",d=r.published.$t,u=d.substring(0,4),o=d.substring(5,7),c=d.substring(8,10),l=new Array;if(l[1]=\"Jan\",l[2]=\"Feb\",l[3]=\"Mar\",l[4]=\"Apr\",l[5]=\"May\",l[6]=\"Jun\",l[7]=\"Jul\",l[8]=\"Aug\",l[9]=\"Sep\",l[10]=\"Oct\",l[11]=\"Nov\",l[12]=\"Dec\",\"content\"in r)var m=r.content.$t;else if(\"summary\"in r)var m=r.summary.$t;else var m=\"\";var w=\/\u0026lt;\\S[^\u0026gt;]*\u0026gt;\/g;if(m=m.replace(w,\"\"),document.write('\u0026lt;div class=\"rctitle\"\u0026gt;'),standardstyling\u0026amp;\u0026amp;document.write(\"\u0026lt;br\/\u0026gt;\"),document.write(i),1==showpostdate\u0026amp;\u0026amp;document.write(\" - \"+l[parseInt(o,10)]+\" \"+c+\" \"+u),document.write('\u0026lt;\/div\u0026gt;\u0026lt;div class=\"rcsumm\"\u0026gt;'),1==showpostsummary)if(standardstyling\u0026amp;\u0026amp;document.write(\"\"),m.length\u0026lt;numchars)standardstyling\u0026amp;\u0026amp;document.write(\"\u0026lt;i\u0026gt;\"),document.write(m),standardstyling\u0026amp;\u0026amp;document.write(\"\u0026lt;\/i\u0026gt;\");else{standardstyling\u0026amp;\u0026amp;document.write(\"\"),m=m.substring(0,numchars);var g=m.lastIndexOf(\" \");m=m.substring(0,g),document.write(m+a),standardstyling\u0026amp;\u0026amp;document.write(\"\")}document.write(\"\u0026lt;\/div\u0026gt;\"),standardstyling\u0026amp;\u0026amp;document.write(\"\")}standardstyling||document.write('\u0026lt;div class=\"bbwidgetfooter\"\u0026gt;'),standardstyling\u0026amp;\u0026amp;document.write(\"\"),document.write(\"\"),standardstyling||document.write(\"\")}\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003Evar numposts = \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E5\u003C\/b\u003E\u003C\/span\u003E;var showpostdate = \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003Etrue\u003C\/b\u003E\u003C\/span\u003E;var showpostsummary = true;var numchars = \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E100\u003C\/b\u003E\u003C\/span\u003E;var standardstyling = true;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/blog-address.blogspot.com\u003C\/span\u003E\/feeds\/posts\/default?orderby=published\u0026amp;amp;alt=json-in-script\u0026amp;amp;callback=showrecentposts\"\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;a style=\"font-size: 9px; color: #CECECE; float: right; margin-top: 10px;\" href=\"http:\/\/helplogger.blogspot.com\/2012\/04\/recent-posts-widget-for-bloggerblogspot.html\" rel=\"nofollow\" \u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=\"text\/css\"\u0026gt;\u003Cbr \/\u003E.rctitle a{color:\u003Cspan style=\"color: blue;\"\u003E#000000\u003C\/span\u003E;text-transform:capitalize;font-size:\u003Cspan style=\"color: #a64d79;\"\u003E\u003Cb\u003E13px\u003C\/b\u003E\u003C\/span\u003E;}#hlrpsa {color: \u003Cspan style=\"color: #38761d;\"\u003E\u003Cb\u003E#999999\u003C\/b\u003E\u003C\/span\u003E; font-size: \u003Cspan style=\"color: orange;\"\u003E\u003Cb\u003E12px\u003C\/b\u003E\u003C\/span\u003E;}.rcsumm {border-bottom:1px dotted #cccccc; padding-bottom:10px;margin-top:5px;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch3\u003ERecent Posts Widget Showing Post Titles Only\u003C\/h3\u003E\n\u003Cblockquote class=\"tr_bq\"\u003E\n\u0026lt;div id=\"hlrpsb\"\u0026gt;\u003Cbr \/\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003Efunction showrecentposts(t){for(var e=0;e\u0026lt;numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var d=0;d\u0026lt;r.link.length;d++)if(\"alternate\"==r.link[d].rel){n=r.link[d].href;break}i=i.link(n);var s=r.published.$t,a=s.substring(0,4),o=s.substring(5,7),l=s.substring(8,10),u=new Array;u[1]=\"Jan\",u[2]=\"Feb\",u[3]=\"Mar\",u[4]=\"Apr\",u[5]=\"May\",u[6]=\"Jun\",u[7]=\"Jul\",u[8]=\"Aug\",u[9]=\"Sep\",u[10]=\"Oct\",u[11]=\"Nov\",u[12]=\"Dec\",standardstyling||document.write(\"\"),document.write('\u0026lt;div class=\"rctitles2\"\u0026gt;'),standardstyling\u0026amp;\u0026amp;document.write(\"\"),document.write(i),standardstyling\u0026amp;\u0026amp;document.write(\"\"),1==showpostdate\u0026amp;\u0026amp;document.write(\" - \"+l+\" \"+u[parseInt(o,10)]+\" \"+a),standardstyling||document.write(\"\u0026lt;\/div\u0026gt;\"),document.write(\"\u0026lt;\/div\u0026gt;\"),standardstyling\u0026amp;\u0026amp;document.write(\"\")}standardstyling||document.write('\u0026lt;div class=\"bbwidgetfooter\"\u0026gt;'),standardstyling\u0026amp;\u0026amp;document.write(\"\"),document.write(\"\"),standardstyling||document.write(\"\/div\")}\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script type=\"text\/javascript\"\u0026gt;var numposts = \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003E10\u003C\/b\u003E\u003C\/span\u003E;var showpostdate = \u003Cspan style=\"color: red;\"\u003E\u003Cb\u003Efalse\u003C\/b\u003E\u003C\/span\u003E;var standardstyling = true;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/blog-address.blogspot.com\u003C\/span\u003E\/feeds\/posts\/default?orderby=published\u0026amp;alt=json-in-script\u0026amp;callback=showrecentposts\"\u0026gt;\u0026lt;\/script\u0026gt;\u0026lt;\/div\u0026gt;\u0026lt;a style=\"font-size: 9px; color: #CECECE; float: right; margin-top: 10px;\" href=\"http:\/\/helplogger.blogspot.com\/2012\/04\/recent-posts-widget-for-bloggerblogspot.html\" rel=\"nofollow\" \u0026gt;Recent Posts Widget\u0026lt;\/a\u0026gt;\u003Cbr \/\u003E\u0026lt;noscript\u0026gt;Oops! Make sure JavaScript is enabled in your browser.\u0026lt;\/noscript\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=text\/css\u0026gt;\u003Cbr \/\u003E#hlrpsb a {color: \u003Cspan style=\"color: blue;\"\u003E#000000\u003C\/span\u003E;font-size:\u003Cspan style=\"color: #a64d79;\"\u003E\u003Cb\u003E13px\u003C\/b\u003E\u003C\/span\u003E;text-transform:capitalize;}.rctitles2 {padding-bottom:10px;margin-bottom:10px;border-bottom: 1px dotted #cccccc;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\n\u003Ch4\u003EHow to customize the recent posts widget:\u003C\/h4\u003E\n\u003Cul\u003E\u003Cli\u003ETo set how many posts to display, change the \u003Cspan style=\"color: red;\"\u003E5\u003C\/span\u003E value for the recent posts widget with snippets and the \u003Cspan style=\"color: red;\"\u003E10\u003C\/span\u003E for the recent posts widget with post titles only.\u003C\/li\u003E\n\u003Cli\u003EIf you want to display the post dates, change \"false\" to \"true\".\u003C\/li\u003E\n\u003Cli\u003EThe recent posts widget with summary will display 100 characters; if you want more or less characters, change the \"100\" value.\u003C\/li\u003E\n\u003Cli\u003ETo change the color of the links, modify the values in blue and for the font size, the values violet.\u003C\/li\u003E\n\u003Cli\u003ETo change the color of the posts snippets modify the values in green and the values in orange for the font size.\u003C\/li\u003E\n\u003Cli\u003EReplace the \u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/blog-address.blogspot.com\u003C\/span\u003E text with your URL.\u003C\/li\u003E\u003C\/ul\u003E\n4. Save your widget... and that's it. Enjoy!\u003Cbr \/\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"https:\/\/helplogger.blogspot.com\/feeds\/5197552418331573382\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2012\/04\/recent-posts-widget-for-bloggerblogspot.html#comment-form","title":"110 Comments"},{"rel":"edit","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5197552418331573382"},{"rel":"self","type":"application/atom+xml","href":"https:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5197552418331573382"},{"rel":"alternate","type":"text/html","href":"https:\/\/helplogger.blogspot.com\/2012\/04\/recent-posts-widget-for-bloggerblogspot.html","title":"Simple Recent Posts Widget for Blogger\/Blogspot"}],"author":[{"name":{"$t":"Unknown"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"16","height":"16","src":"https:\/\/img1.blogblog.com\/img\/b16-rounded.gif"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"https:\/\/2.bp.blogspot.com\/-q7SOzY4de4Q\/T5wFy7i6p3I\/AAAAAAAACAU\/qiXglTJHxIc\/s72-c\/add+recent+posts+widget+for+blogger+blogspot.png","height":"72","width":"72"},"thr$total":{"$t":"110"}}]}});