// API callback
related_results_labels_thumbs({"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":"2014-10-19T07:54:12.616-07:00"},"category":[{"term":"how to"},{"term":"Blog Design"},{"term":"Widgets"},{"term":"css"},{"term":"posts"},{"term":"Comments"},{"term":"jQuery"},{"term":"SEO"},{"term":"Image Effects"},{"term":"adsense"},{"term":"social media"},{"term":"Navigation"},{"term":"menus"},{"term":"adsense optimization"},{"term":"social media plugins"},{"term":"Facebook"},{"term":"blogger posts"},{"term":"popular posts"},{"term":"adsense tips"},{"term":"blogger pages"},{"term":"javascript"},{"term":"threaded comments"},{"term":"navigation menu"},{"term":"recent posts"},{"term":"blogger"},{"term":"google plus"},{"term":"recent comments"},{"term":"related posts"},{"term":"slideshows"},{"term":"tools"},{"term":"Templates"},{"term":"custom domain"},{"term":"emoticons"},{"term":"labels"},{"term":"sitemap"},{"term":"static pages"},{"term":"RSS"},{"term":"feedburner"},{"term":"firebug"},{"term":"robots"}],"title":{"type":"text","$t":"Helplogger"},"subtitle":{"type":"html","$t":""},"link":[{"rel":"http://schemas.google.com/g/2005#feed","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/posts\/default"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/-\/recent+posts?alt=json-in-script\u0026max-results=5"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/search\/label\/recent%20posts"},{"rel":"hub","href":"http://pubsubhubbub.appspot.com/"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"generator":{"version":"7.00","uri":"http://www.blogger.com","$t":"Blogger"},"openSearch$totalResults":{"$t":"4"},"openSearch$startIndex":{"$t":"1"},"openSearch$itemsPerPage":{"$t":"5"},"entry":[{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-8111109165573234969"},"published":{"$t":"2013-11-19T05:41:00.001-08:00"},"updated":{"$t":"2014-01-16T20:44:29.071-08: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 with the distinction of having two parts that can be used individually or combined. At the top 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 chosen posts that will change the post above when we mouse over them, thus breaking the automatic cycle.\u003Cbr \/\u003E\u003C!-- adsense --\u003E\u003Cdiv class=\"ssmainhide\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-4biMUQKDQss\/UrZ2MMqMlvI\/AAAAAAAAFkE\/ZaF_KVqIBqU\/s1600\/recent-rotating-posts-widget-for-blogger.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"recent posts widget for blogger\" border=\"0\" height=\"241\" src=\"http:\/\/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=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003EBefore installing anything, let's see it in action to decide if it does what we want.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cstyle\u003E.gfg-root { width: 100%; height : auto; position : relative; overflow : hidden; margin: 0 auto; text-align : center; font-size: 12px; border: 1px solid #DBDBDB; } .gfg-title { font-size: 16px; font-weight : bold; color : #6B6B6B; background:#F3F3F3; background-repeat: repeat; line-height : 1.4em; overflow : hidden; white-space : nowrap; padding: 5px; text-shadow: 0px 2px #fff; } .gfg-entry { background-color: #FFFFFF; width : 100%; height : 9.2em; position : relative; overflow : hidden; text-align : left; margin-top : 3px; } .gf-title a { text-transform: capitalize; color: #0000ff; font-size: 14px; } .gfg-subtitle { display: none; } .gfg-list { position : relative; overflow : hidden; text-align : left; } .gfg-listentry { line-height : 1.5em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; padding-left : 15px; padding-right : 5px; } .gfg-listentry-odd { background-color : #F3F3F3; border-bottom : 1px dotted #CCCCCC; padding: 5px; } .gfg-listentry-even { background-color : #F3F3F3; border-bottom : 1px dotted #CCCCCC; padding: 5px; } .gfg-listentry-odd a{ color: #595959; padding: 0 0px 0 10px; } .gfg-listentry-even a{ color: #242424; padding: 0 0px 0 10px; } .gfg-listentry-highlight { background: #FFFFFF; } .gfg-listentry-highlight:before { position: absolute; left: 0; content: '\\25BA '; font-size: 14px; color: #DBDBDB; } .gfg-listentry-highlight a { color: #242424; } .gfg-root .gfg-entry .gf-result { position : relative; background-color: #ffffff; width : auto; height : 100%; padding-left : 20px; padding-right : 5px; } .gfg-root .gfg-entry .gf-result .gf-title { font-size: 14px; line-height : 1.2em; overflow : hidden; white-space : nowrap; text-overflow : ellipsis; margin-bottom : 2px; margin-top: 5px; } .gfg-root .gfg-entry .gf-result .gf-snippet { height : 3.8em; color: #000000; margin-top : 3px; } .clearFloat { clear : both; } \u003C\/style\u003E\u003Cscript src=\"http:\/\/www.google.com\/jsapi\" type=\"text\/javascript\"\u003E\u003C\/script\u003E\u003Cscript src=\"http:\/\/www.google.com\/uds\/solutions\/dynamicfeed\/gfdynamicfeedcontrol.js\" type=\"text\/javascript\"\u003E\u003C\/script\u003E\u003Cscript type=\"text\/javascript\"\u003Efunction showGadget() {var feeds = [{title:'List',url:'http:\/\/helplogger.blogspot.com\/feeds\/posts\/default?redirect=false\u0026start-index=1\u0026max-results=10'},]; new GFdynamicFeedControl(feeds, 'feedGadget',{title: 'Latest Posts', numResults : 10, displayTime : 5000, hoverTime : 500});} google.load(\"feeds\", \"1\"); google.setOnLoadCallback(showGadget); \u003C\/script\u003E\u003Cbr \/\u003E\u003Cdiv id=\"feedGadget\"\u003ELoading...\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch2\u003E\u003Cspan style=\"color: #3d85c6;\"\u003EHow to Add Recent Rotating Posts Widget to Blogger\u003C\/span\u003E\u003C\/h2\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 1\u003C\/b\u003E\u003C\/span\u003E. Go to \u003Cb\u003ELayout \u003C\/b\u003E\u0026gt; click on \u003Cb\u003EAdd a Gadget\u003C\/b\u003E link.\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-LcW_xNLozrI\/UTJQzFPdhEI\/AAAAAAAAC4c\/LQFO0DKxxm4\/s1600\/blogger-layout-add+a+gadget-how-to.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"148\" src=\"http:\/\/4.bp.blogspot.com\/-LcW_xNLozrI\/UTJQzFPdhEI\/AAAAAAAAC4c\/LQFO0DKxxm4\/s640\/blogger-layout-add+a+gadget-how-to.png\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 2\u003C\/b\u003E\u003C\/span\u003E. From the pop-up windows, choose the \u003Cb\u003EHTML\/Javascript\u003C\/b\u003E gadget\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4k\/tqQrar_00tM\/s1600\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" height=\"195\" src=\"http:\/\/2.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4k\/tqQrar_00tM\/s400\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 3\u003C\/b\u003E\u003C\/span\u003E. Paste this code inside the empty box:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;style\u0026gt;\u003Cbr \/\u003E.gfg-root {\u003Cbr \/\u003Ewidth: 100%;\u003Cbr \/\u003Eheight : auto;\u003Cbr \/\u003Eposition : relative;\u003Cbr \/\u003Eoverflow : hidden;\u003Cbr \/\u003Emargin: 0 auto;\u003Cbr \/\u003Etext-align : center;\u003Cbr \/\u003Efont-size: 12px;\u003Cbr \/\u003Eborder: 1px solid #DBDBDB;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-title {\u003Cbr \/\u003Efont-size: 16px;\u003Cbr \/\u003Efont-weight : bold;\u003Cbr \/\u003Ecolor : #6B6B6B;\u003Cbr \/\u003Ebackground:#F3F3F3;\u003Cbr \/\u003Ebackground-repeat: repeat;\u003Cbr \/\u003Eline-height : 1.4em;\u003Cbr \/\u003Eoverflow : hidden;\u003Cbr \/\u003Ewhite-space : nowrap;\u003Cbr \/\u003Epadding: 5px;\u003Cbr \/\u003Etext-shadow: 0px 2px #fff;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-entry {\u003Cbr \/\u003Ebackground-color: #FFFFFF;\u003Cbr \/\u003Ewidth : 100%;\u003Cbr \/\u003Eheight : 9.2em;\u003Cbr \/\u003Eposition : relative;\u003Cbr \/\u003Eoverflow : hidden;\u003Cbr \/\u003Etext-align : left;\u003Cbr \/\u003Emargin-top : 3px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gf-title a {\u003Cbr \/\u003Etext-transform: capitalize;\u003Cbr \/\u003Ecolor: #0000ff;\u003Cbr \/\u003Efont-size: 14px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-subtitle {\u003Cbr \/\u003Edisplay: none;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-list {\u003Cbr \/\u003Eposition : relative;\u003Cbr \/\u003Eoverflow : hidden;\u003Cbr \/\u003Etext-align : left;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-listentry {\u003Cbr \/\u003Eline-height : 1.5em;\u003Cbr \/\u003Eoverflow : hidden;\u003Cbr \/\u003Ewhite-space : nowrap;\u003Cbr \/\u003Etext-overflow : ellipsis;\u003Cbr \/\u003Epadding-left : 15px;\u003Cbr \/\u003Epadding-right : 5px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-listentry-odd {\u003Cbr \/\u003Ebackground-color : #F3F3F3;\u003Cbr \/\u003Eborder-bottom : 1px dotted #CCCCCC;\u003Cbr \/\u003Epadding: 5px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-listentry-even {\u003Cbr \/\u003Ebackground-color : #F3F3F3;\u003Cbr \/\u003Eborder-bottom : 1px dotted #CCCCCC;\u003Cbr \/\u003Epadding: 5px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-listentry-odd a{\u003Cbr \/\u003Ecolor: #595959;\u003Cbr \/\u003Epadding: 0 0px 0 10px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-listentry-even a{\u003Cbr \/\u003Ecolor: #242424;\u003Cbr \/\u003Epadding: 0 0px 0 10px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-listentry-highlight {\u003Cbr \/\u003Ebackground: #FFFFFF;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-listentry-highlight:before {\u003Cbr \/\u003Eposition: absolute;\u003Cbr \/\u003Eleft: 0;\u003Cbr \/\u003Econtent: '\\25BA ';\u003Cbr \/\u003Efont-size: 14px;\u003Cbr \/\u003Ecolor: #DBDBDB;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-listentry-highlight a {\u003Cbr \/\u003Ecolor: #242424;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-root .gfg-entry .gf-result {\u003Cbr \/\u003Eposition : relative;\u003Cbr \/\u003Ebackground-color: #ffffff;\u003Cbr \/\u003Ewidth : auto;\u003Cbr \/\u003Eheight : 100%;\u003Cbr \/\u003Epadding-left : 20px;\u003Cbr \/\u003Epadding-right : 5px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-root .gfg-entry .gf-result .gf-title {\u003Cbr \/\u003Efont-size: 14px;\u003Cbr \/\u003Eline-height : 1.2em;\u003Cbr \/\u003Eoverflow : hidden;\u003Cbr \/\u003Ewhite-space : nowrap;\u003Cbr \/\u003Etext-overflow : ellipsis;\u003Cbr \/\u003Emargin-bottom : 2px;\u003Cbr \/\u003Emargin-top: 5px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.gfg-root .gfg-entry .gf-result .gf-snippet {\u003Cbr \/\u003Eheight : 3.8em;\u003Cbr \/\u003Ecolor: #000000;\u003Cbr \/\u003Emargin-top : 3px;\u003Cbr \/\u003E}\u003Cbr \/\u003E.clearFloat {\u003Cbr \/\u003Eclear : both;}\u0026lt;\/style\u0026gt;\u003Cbr \/\u003E\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\u0026lt;script type=\"text\/javascript\"\u0026gt;\u003Cbr \/\u003Efunction 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 \/\u003Enew 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 \/\u003Egoogle.setOnLoadCallback(showGadget);\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;div id=\"feedGadget\"\u0026gt;Loading...\u0026lt;\/div\u0026gt;\u003C\/blockquote\u003E\u003Ch3\u003E\u003Cspan style=\"color: #3d85c6;\"\u003ECustomizations:\u003C\/span\u003E\u003C\/h3\u003EThe url in blue is the feed address. Obviously, the \u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/helplogger.blogspot.com\u003C\/span\u003E\u003C\/b\u003E address should be replaced with yours. \u003Cbr \/\u003E\u003Cbr \/\u003ENext is \u003Cb\u003E\u003Cspan style=\"color: #cc0000;\"\u003Estart-index=1\u003C\/span\u003E\u003C\/b\u003E. This number indicates which post will appear first on the list. By default it is the latest post published on our blog, so if we want to begin displaying older posts, we need to change the 1 value. \u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003E\u003Cspan style=\"color: #6aa84f;\"\u003Emax-results=10\u003C\/span\u003E\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 its purpose is to set the number of posts that will be shown in the gadget. The easy thing would be to put 500 in order not to fail, but the higher the number is, the longer the gadget will take to load, so it's better to adjust to what we need to show.\u003Cbr \/\u003E\u003Cbr \/\u003EFinally here are some other parameters of the script:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cb\u003Etitle: 'Latest Posts'\u003C\/b\u003E, is the widget's title that appears on top.\u003Cbr \/\u003E\u003Cb\u003EnumResults: 10\u003C\/b\u003E, number of posts that will show in the list\u003Cbr \/\u003E\u003Cb\u003EdisplayTime: 5000\u003C\/b\u003E, the delay time between posts in the rotator (in milliseconds)\u003Cbr \/\u003E\u003Cb\u003EhoverTime: 500\u003C\/b\u003E, minimum time for an item in the list to be displayed at the top. \u003Cbr \/\u003E\u003Cbr \/\u003EIf you want to hide the list and show only the posts, then change this part: \u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.gfg-list {\u003Cbr \/\u003Eposition : relative;\u003Cbr \/\u003Eoverflow : hidden;\u003Cbr \/\u003Etext-align : left;\u003Cbr \/\u003E}\u003C\/blockquote\u003E\u0026nbsp;to : \u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.gfg-list {\u003Cbr \/\u003Edisplay:none;\u003Cbr \/\u003E}\u003C\/blockquote\u003Eand if you want to display only the list, then change this part: \u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.gfg-entry {\u003Cbr \/\u003Ebackground-color: #FFFFFF;\u003Cbr \/\u003Ewidth : 100%;\u003Cbr \/\u003Eheight : 9.2em;\u003Cbr \/\u003Eposition : relative;\u003Cbr \/\u003Eoverflow : hidden;\u003Cbr \/\u003Etext-align : left;\u003Cbr \/\u003Emargin-top : 3px;\u003Cbr \/\u003E}\u003C\/blockquote\u003Eto: \u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E.gfg-entry {\u003Cbr \/\u003Edisplay: none; } \u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 4\u003C\/b\u003E\u003C\/span\u003E. Save the gadget and you're done. Enjoy! "},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/8111109165573234969\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2013\/11\/recent-posts-widget-for-blogger.html#comment-form","title":"9 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8111109165573234969"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/8111109165573234969"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2013\/11\/recent-posts-widget-for-blogger.html","title":"Recent Rotating Post Gadget with Excerpt For Blogger"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/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\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\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\u003Cbr \/\u003ETo add this recent posts widget for labels or categories in a Blogger blog, follow the next steps:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch2\u003ERecent Posts with Thumbnails Sorted by Labels\u003C\/h2\u003E\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\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\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\u003Cbr \/\u003E\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\u003Cblockquote class=\"tr_bq\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003EJust above \u003Cspan style=\"background-color: yellow;\"\u003E]]\u0026gt;\u0026lt;\/b:skin\u0026gt;\u003C\/span\u003E, paste this CSS style:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\/* Recent posts by labels\u003Cbr \/\u003E--------------------------------- *\/ \u003Cbr \/\u003Eimg.label_thumb{\u003Cbr \/\u003Efloat:left;\u003Cbr \/\u003Emargin-right:10px !important;\u003Cbr \/\u003Eheight:65px; \u003Cspan style=\"color: #38761d;\"\u003E\/* Thumbnail height *\/\u003C\/span\u003E\u003Cbr \/\u003Ewidth:65px; \u003Cspan style=\"color: #38761d;\"\u003E\/* Thumbnail width *\/\u003C\/span\u003E\u003Cbr \/\u003Eborder: 1px solid #fff;\u003Cbr \/\u003E-webkit-border-radius: 10px;\u003Cbr \/\u003E-moz-border-radius: 10px;\u003Cbr \/\u003Eborder-radius: 10px;\u003Cbr \/\u003E-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);\u003Cbr \/\u003E-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);\u003Cbr \/\u003Ebox-shadow: 0 1px 1px rgba(0, 0, 0, .4);\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#label_with_thumbs {\u003Cbr \/\u003Efloat: left;\u003Cbr \/\u003Ewidth: 100%;\u003Cbr \/\u003Emin-height: 70px;\u003Cbr \/\u003Emargin: 0px 10px 2px 0px;\u003Cbr \/\u003Epadding: 0;\u003Cbr \/\u003E}\u003Cbr \/\u003Eul#label_with_thumbs li {\u003Cbr \/\u003Epadding:8px 0;\u003Cbr \/\u003Emin-height:65px;\u003Cbr \/\u003Emargin-bottom:0px;\u003Cbr \/\u003Eborder-bottom: 1px dotted #999999;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#label_with_thumbs li{\u003Cbr \/\u003Elist-style: none ;\u003Cbr \/\u003Epadding-left:0px !important;\u003Cbr \/\u003E}\u003Cbr \/\u003E\u003Cbr \/\u003E#label_with_thumbs a { text-transform: uppercase;}\u003Cbr \/\u003E#label_with_thumbs strong {padding-left:0px; }\u003C\/blockquote\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 3.\u003C\/b\u003E\u003C\/span\u003E Now try to find this tag: \u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;\/head\u0026gt;\u003C\/blockquote\u003E... just above \u003Cspan style=\"background-color: yellow;\"\u003E\u0026lt;\/head\u0026gt;\u003C\/span\u003E add this script:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;script type='text\/javascript'\u0026gt;\u003Cbr \/\u003E\/\/\u0026lt;![CDATA[\u003Cbr \/\u003Efunction 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 \/\u003Eif(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)\u003Cbr \/\u003E{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 \/\u003Evar 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 \/\u003Edocument.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 \/\u003Eelse\u003Cbr \/\u003Eif(\"summary\"in entry){var postcontent=entry.summary.$t;}\u003Cbr \/\u003Eelse 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 \/\u003Eelse{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(\" \");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}\u003Cbr \/\u003Evar towrite='';var flag=0;document.write('\u0026lt;br\u0026gt;');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}\u003Cbr \/\u003Eif(showcommentnum==true)\u003Cbr \/\u003E{if(flag==1){towrite=towrite+' | ';}\u003Cbr \/\u003Eif(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 \/\u003Eif(displaymore==true)\u003Cbr \/\u003E{if(flag==1)towrite=towrite+' | ';towrite=towrite+'\u0026lt;a href=\"'+posturl+'\" class=\"url\" target =\"_top\"\u0026gt;More »\u0026lt;\/a\u0026gt;';flag=1;;}\u003Cbr \/\u003Edocument.write(towrite);document.write('\u0026lt;\/li\u0026gt;');if(displayseparator==true)\u003Cbr \/\u003Eif(i!=(numposts-1))\u003Cbr \/\u003Edocument.write('');}document.write('\u0026lt;\/ul\u0026gt;');}\u003Cbr \/\u003E\/\/]]\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003E\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\u003Cbr \/\u003E\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\u003Cblockquote class=\"tr_bq\"\u003E\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 \/\u003Efunction changeThumbSize(id,size){\u003Cbr \/\u003Evar blogGadget = document.getElementById(id);\u003Cbr \/\u003Evar replacement = blogGadget.innerHTML;\u003Cbr \/\u003EblogGadget.innerHTML = replacement.replace(\/s72-c\/g,\"s\"+size+\"-c\");\u003Cbr \/\u003Evar thumbnails = blogGadget.getElementsByTagName(\"img\");\u003Cbr \/\u003Efor(var i=0;i\u0026amp;lt;thumbnails.length;i++){ \u003Cbr \/\u003Ethumbnails[i].width = size; \u003Cbr \/\u003Ethumbnails[i].height = size; \u003Cbr \/\u003E}\u003Cbr \/\u003E}\u003Cbr \/\u003EchangeThumbSize(\"label_with_thumbs\",210);      \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp; \u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003C\/blockquote\u003ENow Save the template to finish with your changes.\u003Cbr \/\u003E\u003Cbr \/\u003ESo, 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\u003Cbr \/\u003E\u003Cspan style=\"color: #3d85c6;\"\u003E\u003Cb\u003EStep 4.\u003C\/b\u003E\u003C\/span\u003E Go to Layout - click on Add a Gadget\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\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\u003Cbr \/\u003E\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\u003Cblockquote class=\"tr_bq\"\u003E\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\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\u003Cbr \/\u003E\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\u003Cbr \/\u003EWithin 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\u003Cblockquote class=\"tr_bq\"\u003Evar numposts \u003Cspan style=\"color: #666666;\"\u003E← Number of posts to display\u003C\/span\u003E\u003Cbr \/\u003Evar showpostthumbnails \u003Cspan style=\"color: #666666;\"\u003E← Show\/hide thumbnails\u003C\/span\u003E\u003Cbr \/\u003Evar displaymore \u003Cspan style=\"color: #666666;\"\u003E← Show or hide the read more link\u003C\/span\u003E\u003Cbr \/\u003Evar displayseparator \u003Cspan style=\"color: #666666;\"\u003E← Show\/hide separator\u003C\/span\u003E\u003Cbr \/\u003Evar showcommentnum\u003Cspan style=\"color: #666666;\"\u003E ← Show\/hide the number of comments\u003C\/span\u003E\u003Cbr \/\u003Evar showpostdate \u003Cspan style=\"color: #666666;\"\u003E← Show\/hide the posts dates\u003C\/span\u003E\u003Cbr \/\u003Evar showpostsummary \u003Cspan style=\"color: #666666;\"\u003E← Show or not the posts summaries\u003C\/span\u003E\u003Cbr \/\u003Evar numchars \u003Cspan style=\"color: #666666;\"\u003E← Number of posts characters (here you have to change the 100 value)\u003C\/span\u003E\u003C\/blockquote\u003ERemember 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\u003Cbr \/\u003EThat's it :) Enjoy!"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/3798068948574786374\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2013\/04\/show-recent-posts-with-thumbnails-for.html#comment-form","title":"83 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3798068948574786374"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/3798068948574786374"},{"rel":"alternate","type":"text/html","href":"http:\/\/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":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"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":"83"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-860966100554056963"},"published":{"$t":"2012-05-04T10:07:00.001-07:00"},"updated":{"$t":"2014-07-28T21:59:12.425-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":"A few days ago, I 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 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.\u003Cbr \/\u003E\u003Cbr \/\u003ETo add this gadget is very easy, just follow these steps below:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-bjLDxA1eI3o\/T6QMNXxGJvI\/AAAAAAAACBQ\/dLUwrAwa-PU\/s1600\/recent+posts+widget+with+thumbnails+for+blogger+blogspot.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg alt=\"recent posts, blogger widgets\" border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-bjLDxA1eI3o\/T6QMNXxGJvI\/AAAAAAAACBQ\/dLUwrAwa-PU\/s320\/recent+posts+widget+with+thumbnails+for+blogger+blogspot.png\" height=\"266\" title=\"Recent Posts Widget With Thumbnails \" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch3\u003EHow to Add the Recent Posts Widget to Blogger\u003C\/h3\u003E\u003Cspan style=\"color: #0b5394;\"\u003E\u003Cb\u003EStep 1.\u003C\/b\u003E\u003C\/span\u003E 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\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-LcW_xNLozrI\/UTJQzFPdhEI\/AAAAAAAAC4c\/LQFO0DKxxm4\/s1600\/blogger-layout-add+a+gadget-how-to.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-LcW_xNLozrI\/UTJQzFPdhEI\/AAAAAAAAC4c\/LQFO0DKxxm4\/s640\/blogger-layout-add+a+gadget-how-to.png\" height=\"150\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #0b5394;\"\u003E\u003Cb\u003EStep 2.\u003C\/b\u003E\u003C\/span\u003E From the pop-up window, scroll down and choose HTML\/JavaScript\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4k\/tqQrar_00tM\/s1600\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4k\/tqQrar_00tM\/s400\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" height=\"195\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #0b5394;\"\u003E\u003Cb\u003EStep 3.\u003C\/b\u003E\u003C\/span\u003E Inside the empty box, add the following code:\u003Cbr \/\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div class=\"eggTray\"\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"http:\/\/helplogger.googlecode.com\/svn\/trunk\/listbadge.js\"\u0026gt;{\"pipe_id\":\"1a6640e2a78b2c6e736f2220529daae5\",\"_btype\":\"list\",\u003Cbr \/\u003E\"pipe_params\":{\"URL\":\"\u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003EYOUR-BLOG\u003C\/span\u003E\u003C\/b\u003E\/feeds\/posts\/default\"},\u003Cbr \/\u003E\"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\u0026lt;noscript\u0026gt;Your browser does not support JavaScript!\u0026lt;\/noscript\u0026gt;\u0026lt;\/div\u0026gt;\u003Cbr \/\u003E\u0026lt;style type=text\/css\u0026gt;\u003Cbr \/\u003E.eggTray {margin:10px 0px;padding:0px;}\u003Cbr \/\u003E.ybr li \u0026nbsp;{border-bottom:0px #cccccc dotted; padding:0px 0px 10px 0px!important;}\u003Cbr \/\u003E.pipesTitle {\u003Cb\u003E\u003Cspan style=\"color: #38761d;\"\u003Epadding-top:0px;\u003C\/span\u003E\u003C\/b\u003E}\u003Cbr \/\u003E.pipesDescription {display:\u003Cspan style=\"color: red;\"\u003E\u003Cb\u003Etrue\u003C\/b\u003E\u003C\/span\u003E;}\u003Cbr \/\u003E.ycdr, .ycdr a {color:#999999;}\u003Cbr \/\u003E.widget .popular-posts ul {padding-left:0;}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cspan style=\"color: #0b5394;\"\u003E\u003Cb\u003ENote:\u0026nbsp;\u003C\/b\u003E\u003C\/span\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #0b5394;\"\u003E\u003Cb\u003E- \u003C\/b\u003E\u003C\/span\u003EReplace\u0026nbsp;\u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003EYOUR-BLOG\u003C\/span\u003E\u0026nbsp;\u003C\/b\u003Ewith the url of your site\/blog (ex: http:\/\/helplogger.blogspot.com) and pay attention to have no forward slash symbol \"\u003Cb\u003E\/\u003C\/b\u003E\" at the end of the url\u003Cbr \/\u003E- To disable the scroll bar, remove the number \u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003E500\u003C\/span\u003E\u003C\/b\u003E\u003Cbr \/\u003E- By default, this widget is set to display a maximum of 8 recent posts.  To change this number, replace the number \u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003E8\u003C\/span\u003E\u003C\/b\u003E with the number of posts that you want to appear\u003Cbr \/\u003E- if you want only the posts titles, change \u003Cb\u003E\u003Cspan style=\"color: red;\"\u003Etrue\u003C\/span\u003E\u003C\/b\u003E to \u003Cb\u003Enone\u003C\/b\u003E and \"0\" from\u0026nbsp;\u003Cb\u003E\u003Cspan style=\"color: #38761d;\"\u003Epadding-top:0px\u0026nbsp;\u003C\/span\u003E\u003C\/b\u003Ewith 10\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cspan style=\"color: #0b5394;\"\u003E\u003Cb\u003EStep 4. \u003C\/b\u003E\u003C\/span\u003ESave your widget. And you're done!\u003Cbr \/\u003E\u003C!-- adsense --\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/860966100554056963\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2012\/05\/recent-posts-widget-with-thumbnails-for.html#comment-form","title":"144 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/860966100554056963"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/860966100554056963"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2012\/05\/recent-posts-widget-with-thumbnails-for.html","title":"Recent Posts Widget with Thumbnails for Blogger\/Blogspot"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/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":"144"}},{"id":{"$t":"tag:blogger.com,1999:blog-3126197138969349243.post-5197552418331573382"},"published":{"$t":"2012-04-28T08:42:00.003-07:00"},"updated":{"$t":"2014-08-05T05:52:58.931-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 Recent Posts widget 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 \/\u003EWhat you can do with this widget:\u003Cbr \/\u003E- display post titles only \u003Cbr \/\u003E- change the number of posts \u003Cbr \/\u003E- change the number of characters of the post snippet\/excerpt \u003Cbr \/\u003E- show the post dates \u003Cbr \/\u003E\u003Cbr \/\u003ESee the screenshot below:\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-q7SOzY4de4Q\/T5wFy7i6p3I\/AAAAAAAACAU\/qiXglTJHxIc\/s1600\/add+recent+posts+widget+for+blogger+blogspot.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-q7SOzY4de4Q\/T5wFy7i6p3I\/AAAAAAAACAU\/qiXglTJHxIc\/s320\/add+recent+posts+widget+for+blogger+blogspot.png\" height=\"318\" width=\"320\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003E\u003Ch2\u003EHow to add Recent Posts Widget to Blogger\u003C\/h2\u003EStep 1. Log in to your Blogger Dashboard \u0026gt; go to \"Layout\" and click the \"Add a Gadget\" link\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/2.bp.blogspot.com\/-LcW_xNLozrI\/UTJQzFPdhEI\/AAAAAAAAC4Y\/o4QyC_MnUBg\/s1600\/blogger-layout-add+a+gadget-how-to.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/2.bp.blogspot.com\/-LcW_xNLozrI\/UTJQzFPdhEI\/AAAAAAAAC4Y\/o4QyC_MnUBg\/s1600\/blogger-layout-add+a+gadget-how-to.png\" height=\"148\" width=\"640\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EStep 2. From the pop-up window, scroll down and choose HTML\/JavaScript\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Cdiv class=\"separator\" style=\"clear: both; text-align: center;\"\u003E\u003Ca href=\"http:\/\/4.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4g\/hoQcqhyvYU0\/s1600\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" imageanchor=\"1\" style=\"margin-left: 1em; margin-right: 1em;\"\u003E\u003Cimg border=\"0\" src=\"http:\/\/4.bp.blogspot.com\/-c2r6HAMX2EE\/UTJRX0C3_eI\/AAAAAAAAC4g\/hoQcqhyvYU0\/s1600\/blogger-widgets-gadgets-tutorials-tricks-helplogger-html-javascrip.png\" height=\"196\" width=\"400\" \/\u003E\u003C\/a\u003E\u003C\/div\u003E\u003Cbr \/\u003EStep 3. Select \u0026amp; Copy the code from one of the options below and paste it into the new HTML\/JavaScript:\u003Cbr \/\u003E\u003Cbr \/\u003E\u003Ch3\u003EOption 1: Recent Posts Widget with Snippets\u003C\/h3\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div id=\"hlrpsa\"\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"http:\/\/helplogger.googlecode.com\/svn\/trunk\/recent-posts-with-snippets.js\"\u0026gt;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script\u0026gt;\u003Cbr \/\u003Evar numposts = \u003Cb\u003E\u003Cspan style=\"color: red;\"\u003E5\u003C\/span\u003E\u003C\/b\u003E;var showpostdate = \u003Cb\u003E\u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E\u003C\/b\u003E;var showpostsummary = true;var numchars = \u003Cb\u003E\u003Cspan style=\"color: red;\"\u003E100\u003C\/span\u003E\u003C\/b\u003E;var standardstyling = true;\u003Cbr \/\u003E\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/blog-address.com\u003C\/span\u003E\u003Cb\u003E\u003C\/b\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: 5px;\" href=\"http:\/\/helplogger.blogspot.com\/2012\/04\/simple-related-posts-widget-for-blogger.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#hlrpsa a {color: \u003Cb\u003E\u003Cspan style=\"color: blue;\"\u003E#0B3861\u003C\/span\u003E\u003C\/b\u003E; font-size: \u003Cb\u003E\u003Cspan style=\"color: purple;\"\u003E13px\u003C\/span\u003E\u003C\/b\u003E;} \u003Cbr \/\u003E#rpdr, #rpdr a {color:#808080;}\u003Cbr \/\u003E#hlrpsa\u0026nbsp;{ color:\u003Cb\u003E \u003Cspan style=\"color: #38761d;\"\u003E#999999\u003C\/span\u003E\u003C\/b\u003E; font-size: \u003Cb\u003E\u003Cspan style=\"color: orange;\"\u003E11px\u003C\/span\u003E\u003C\/b\u003E; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}\u003Cbr \/\u003E.hlrps\u0026nbsp;a {font-weight:bold; }\u003Cbr \/\u003E.hlrpssumm {}\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003E\u003Cbr \/\u003E\u003Ch3\u003EOption 2: Recent Posts Widget Showing Post Titles Only\u003C\/h3\u003E\u003Cblockquote class=\"tr_bq\"\u003E\u0026lt;div id=\"hlrpsb\"\u0026gt;\u003Cbr \/\u003E\u0026lt;script style=\"text\/javascript\" src=\"http:\/\/helplogger.googlecode.com\/svn\/trunk\/recent-posts-with-titles-only.js\"\u0026gt;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script style=\"text\/javascript\"\u0026gt;var numposts = \u003Cb\u003E\u003Cspan style=\"color: red;\"\u003E10\u003C\/span\u003E\u003C\/b\u003E;var showpostdate =\u003Cb\u003E\u003Cspan style=\"color: red;\"\u003E false\u003C\/span\u003E\u003C\/b\u003E;var showpostsummary = false;var numchars =\u0026nbsp;100;var standardstyling = true;\u0026lt;\/script\u0026gt;\u003Cbr \/\u003E\u0026lt;script src=\"\u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/blog-address.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: 5px;\" href=\"http:\/\/helplogger.blogspot.com\/2012\/04\/simple-related-posts-widget-for-blogger.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\u003Cb\u003E#0B3861\u003C\/b\u003E\u003C\/span\u003E; font-size: \u003Cspan style=\"color: #741b47;\"\u003E\u003Cb\u003E13px\u003C\/b\u003E\u003C\/span\u003E;} \u003Cbr \/\u003E#rpdr, #rpdr a {color:#808080;}\u003Cbr \/\u003E.bbrecpost2 {\u003Cbr \/\u003Epadding-top:6px;\u003Cbr \/\u003Epadding-bottom:6px;\u003Cbr \/\u003Eborder-bottom: 1px #cccccc dotted; }\u003Cbr \/\u003E\u0026lt;\/style\u0026gt;\u003C\/blockquote\u003EStep 4. Customize it:\u003Cbr \/\u003E- Change \u003Cb\u003E\u003Cspan style=\"color: red;\"\u003E5\u003C\/span\u003E\u003C\/b\u003E (option 1) and \u003Cb\u003E\u003Cspan style=\"color: red;\"\u003E10\u003C\/span\u003E\u003C\/b\u003E (option 2) with the number of posts that you want to display.\u003Cbr \/\u003E- Change \u003Cb\u003E\u003Cspan style=\"color: red;\"\u003Efalse\u003C\/span\u003E\u003C\/b\u003E to true if you want the posts dates to appear\u003Cbr \/\u003E- Change 100 (option 1) if you want more characters to be displayed.\u003Cbr \/\u003E- To change the color and font size of the links, modify the values in \u003Cspan style=\"color: blue;\"\u003E\u003Cb\u003Eblue\u003C\/b\u003E\u003C\/span\u003E (links) and \u003Cspan style=\"color: #741b47;\"\u003E\u003Cb\u003Eviolet\u003C\/b\u003E\u003C\/span\u003E (font-size)\u003Cbr \/\u003E- To change the style of posts summary, modify the values in \u003Cspan style=\"color: #38761d;\"\u003E\u003Cb\u003Egreen\u003C\/b\u003E\u003C\/span\u003E (color) and \u003Cspan style=\"color: orange;\"\u003E\u003Cb\u003Eorange\u003C\/b\u003E\u003C\/span\u003E (font size)\u003Cbr \/\u003E- Replace the \u003Cspan style=\"color: blue;\"\u003Ehttp:\/\/blog-address.com\u003C\/span\u003E text with your URL\u003Cbr \/\u003E\u003Cbr \/\u003EStep 5. Save your widget. And that's it! Enjoy!\u003Cbr \/\u003E\u003C!-- adsense --\u003E"},"link":[{"rel":"replies","type":"application/atom+xml","href":"http:\/\/helplogger.blogspot.com\/feeds\/5197552418331573382\/comments\/default","title":"Post Comments"},{"rel":"replies","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2012\/04\/recent-posts-widget-for-bloggerblogspot.html#comment-form","title":"111 Comments"},{"rel":"edit","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5197552418331573382"},{"rel":"self","type":"application/atom+xml","href":"http:\/\/www.blogger.com\/feeds\/3126197138969349243\/posts\/default\/5197552418331573382"},{"rel":"alternate","type":"text/html","href":"http:\/\/helplogger.blogspot.com\/2012\/04\/recent-posts-widget-for-bloggerblogspot.html","title":"Simple Recent Posts Widget for Blogger\/Blogspot"}],"author":[{"name":{"$t":"Admin"},"email":{"$t":"noreply@blogger.com"},"gd$image":{"rel":"http://schemas.google.com/g/2005#thumbnail","width":"32","height":"32","src":"http:\/\/3.bp.blogspot.com\/-4pyCAhWdT7s\/T4btRz2H1DI\/AAAAAAAABwU\/1pKKjTPZa4E\/s220\/Zen-Stones.jpg"}}],"media$thumbnail":{"xmlns$media":"http://search.yahoo.com/mrss/","url":"http:\/\/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":"111"}}]}});