Blogger Buzz: labels

Customizing Numbered Lists in Posts + 3 Examples

From the Compose tab of a Blogger post, we can create numbered lists using the "Numbered List" tool. <div class="ssmainhide" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqRgPnWFKrmMOfDtlWoE-ncoKMQHPP2bnx7zZqlhLVjWA_fg4CKPppeoJ5l1PVVdmg2ZRJ9DVKI2ApKTysZ3uynDLdzjXufvRT-aX2KeNwQ4nvIgZHxO2jz18IkHliIm26oojxQJEdzgx8/s1600/customizing-numbered-list-in-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqRgPnWFKrmMOfDtlWoE-ncoKMQHPP2bnx7zZqlhLVjWA_fg4CKPppeoJ5l1PVVdmg2ZRJ9DVKI2ApKTysZ3uynDLdzjXufvRT-aX2KeNwQ4nvIgZHxO2jz18IkHliIm26oojxQJEdzgx8/s1600/customizing-numbered-list-in-blogger.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6jk0lIwmAOMG49TyZk3yNEB5ntdohy-CnWP4xORmn7J2dzOIYqCC15_HSAEmf_RdnqMzVb57zQbM3pkWEqiVkVJElyDAET9a_OWrhWjRlXARElRCmYRqSukOo10a0ao9kEzT5uvYwI4l/s1600/blogger-post-editor-numbered-list.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="blogger gadgets, blogger widgets" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6jk0lIwmAOMG49TyZk3yNEB5ntdohy-CnWP4xORmn7J2dzOIYqCC15_HSAEmf_RdnqMzVb57zQbM3pkWEqiVkVJElyDAET9a_OWrhWjRlXARElRCmYRqSukOo10a0ao9kEzT5uvYwI4l/s1600/blogger-post-editor-numbered-list.png" title="how to customize numbered lists on Blogger" /></a></div> A numbered list is achieved through the HTML code of a "ordered list". You don't have to worry about adding the HTML, because the editor does it for you by using this tool. If you go to the HTML tab, you'll see that the list you created appears something like this: <blockquote class="tr_bq">   <ol> <li>The content of the 1st. element</li> <li>The content of the 2nd. element</li> <li>The content of the 3rd. element</li> <li>The content of the 4th. element</li>     etc...   </ol></blockquote>This tool will automatically number each element of the list taking an "order", hence the name "ordered lists in HTML". In each element a number is successively generated (from 1 onwards), though you can not see this in the HTML code. <h3>Using ordered lists in posts</h3>Creating numbered lists is very suitable for giving any instructions. It is ideal for cooking blogs where the steps in a recipe has to be numbered, or in those blogs that share tutorials... but can be used in any type of blog that need to number something. By default, when using this tool, the numbered elements will look like: <ol><li>Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. </li><li>Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. </li><li>Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. </li><li>Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. </li></ol>However, we can customize the elements on the list with CSS. To achieve this, we will rely on this interesting tutorial from <a href="http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/" rel="nofollow">456 Berea ST</a>, that explains a technique in which using some key properties of CSS, we could customize both the numbers of each element in the list, also the content of each element. The trick basically involves canceling the default numbering with "list-style: none", and then use automatic numbering properties: "counter-reset" and "counter-increment". Then the property "content" is added to the index of the counter that is created using the previous two properties. How to Add Some Amazing Styles to Blogger ordered lists Simply choose one of the styles below, then copy and paste the CSS code by going to Template > Customize > Advanced > Add CSS. Some Blogger templates might not allow adding CSS in that location. In that case, for adding the CSS style you need to access the Template's HTML - from your <a href="http://blogger.com/" rel="nofollow">Blogger Dashboard</a>, go to Template > Edit HTML and paste the code just above the ]]></b:skin> tag (press the CTRL + F keys to find it - you might need to click on the arrow to expand the code and after that search it again) Examples Here are three examples that I have prepared for those of you who want to customize numbered lists:   Style 1<style>#style1 ol{ counter-reset: li; list-style: none; *list-style: decimal; padding: 0; margin-bottom: 4em; font: 13px 'trebuchet MS', 'lucida sans'; text-shadow: 0 1px 0 rgba(255,255,255,.5); font-weight: bold; } #style1 ol ol{ margin: 0 0 0 2em; } #style1 ol li{ position: relative; display: block; padding: .4em .4em .4em 4em; *padding: .4em; margin: .5em 0; text-decoration: none; border-radius: .3em; transition: all .2s ease-out; } #style1 ol li:hover:before{ transform: rotate(360deg); } #style1 ol li:before{ content: counter(li); counter-increment: li; position: absolute; left: 10px; top: 50%; margin-top: -1.3em; height: 2em; width: 2em; line-height: 2em; color: #fff; background: #FA8022; border: .2em solid #fff; -webkit-box-shadow: 0 8px 5px -7px #888; -moz-box-shadow: 0 8px 5px -7px #888; box-shadow: 0 8px 5px -7px #888; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out; } </style> <div id="style1"><ol><li>Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. </li><li>Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. </li><li>Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. </li><li>Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. </li></ol></div><blockquote class="tr_bq">.post ol{ counter-reset: li; list-style: none; *list-style: decimal; font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */ padding: 0; margin-bottom: 4em; text-shadow: 0 1px 0 rgba(255,255,255,.5); font-weight: bold; } .post ol li{ position: relative; display: block; padding: .4em .4em .4em 4em; *padding: .4em; margin: .5em 0; text-decoration: none; border-radius: .3em; transition: all .3s ease-out; } .post ol li:hover:before{ transform: rotate(360deg); } .post ol li:before{ content: counter(li); counter-increment: li; position: absolute;   left: 10px; top: 50%; margin-top: -1.3em; height: 2em; width: 2em; line-height: 2em; color: #fff; /* text color of numbers */ background: #FA8022; /* background color of numbers */ border: .2em solid #fff; /* border color */ -webkit-box-shadow: 0 8px 5px -7px #888; -moz-box-shadow: 0 8px 5px -7px #888; box-shadow: 0 8px 5px -7px #888; text-align: center; font-weight: bold; border-radius: 2em; transition: all .3s ease-out; }</blockquote> Style 2<style>#style2 ol{ counter-reset:li; list-style: none; *list-style: decimal; margin-left:0; padding-left:0 } #style2 ol li{ position:relative; margin:0 0 20px 15px !important; padding:4px 5px 4px 10px !important; list-style:none; *list-style: decimal; border-bottom:1px solid #e2e3e2; background:#f2f2f2; text-indent:14px; } #style2 ol li:before{ content:counter(li); counter-increment:li; position:absolute; top:-6px; left:-10px; font-family:'Oswald', serif; font-size:14px; width:20px; margin:0 0 10px 0; padding:4px !important; color:#A5A5A5; text-align:left; background:#e2e2e2; text-indent:6px; text-shadow: 1px 3px 2px #fff; } #style2 ol li:after{ content:""; position:absolute; top:-5px; left:17px; width: 0px; height: 0px; border-style: solid; border-width: 5px 0 0 5px; border-color: transparent transparent transparent #aeaeae; } </style> <div id="style2"><ol><li>Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. </li><li>Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. </li><li>Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. </li><li>Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. </li></ol></div><blockquote class="tr_bq">.post ol{ counter-reset:li; list-style: none; *list-style: decimal; margin-left:0; padding-left:0 } .post ol li{ position:relative; margin:0 0 20px 15px !important; padding:4px 5px 4px 10px !important; list-style:none; *list-style: decimal; border-bottom:1px solid #e2e3e2; /* bottom border of each element */ background:#f2f2f2; /* background color of each element */ text-indent:14px; } .post ol li:before{ content:counter(li); counter-increment:li; position:absolute; top:-6px; left:-10px; font-family:'Oswald', serif; font-size:14px; /* size of the numbers */ width:20px; margin:0 0 10px 0; padding:4px !important; color:#A5A5A5; /* color of the numbers */ text-align:left; background:#e2e2e2; /* background color of the numbers */ text-indent:6px; text-shadow: 1px 3px 2px #fff; } .post ol li:after{ content:""; position:absolute; top:-5px; left:17px; width: 0px; height: 0px; border-style: solid; border-width: 5px 0 0 5px; border-color: transparent transparent transparent #aeaeae; /* color of the triangle behind */ }</blockquote> Style 3<style>#style3 ol{ counter-reset: li; list-style: none; *list-style: decimal; padding: 0; margin-bottom: 4em; font: 13px 'trebuchet MS', 'lucida sans'; text-shadow: 0 1px 0 rgba(255,255,255,.5); } #style3 ol ol{ margin: 0 0 0 2em; } #style3 ol li{ position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 4.5em; text-decoration: none; } #style3 ol li:before{ content: counter(li); counter-increment: li; position: absolute; left: -30px; top: 50%; margin-top: -1em; background: #bada55; height: 2em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; } #style3 ol li:after{ position: absolute; content: ''; left: -5px; margin-top: -.7em; top: 50%; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left:8px solid #bada55; } </style> <div id="style3"><ol><li>Nulla tincidunt, neque nec laoreet iaculis, tellus libero sagittis nisl, sed commodo lacus nulla ac sapien. Pellentesque vel magna vitae diam hendrerit bibendum tempus at magna. </li><li>Nulla pellentesque egestas sagittis. Cras blandit bibendum ante nec placerat. Nulla volutpat diam non quam suscipit et ornare nisi porttitor. Quisque eget elit nulla, et imperdiet nisi. </li><li>Vivamus sit amet nibh vel enim aliquam auctor. Phasellus fringilla eros leo, nec varius lacus. Vestibulum id dolor a nisl venenatis varius in nec enim. Pellentesque feugiat arcu ac purus rhoncus dapibus. </li><li>Etiam rutrum quam ac est bibendum cursus. In porttitor nunc odio, vel porttitor nisi. Pellentesque velit est, sodales luctus feugiat et, porta quis lacus. Vivamus non mauris urna, non commodo dui. </li></ol></div><blockquote class="tr_bq">.post ol{ counter-reset: li; list-style: none; *list-style: decimal; padding: 0; margin-bottom: 4em; font: 13px 'trebuchet MS', 'lucida sans'; /* font size of each element */ text-shadow: 0 1px 0 rgba(255,255,255,.5); } .post ol li{ position: relative; display: block; padding: .4em .4em .4em .8em; *padding: .4em; margin: .5em 0 .5em 4.5em; text-decoration: none; } .post ol li:before{ content: counter(li); counter-increment: li; position: absolute;   left: -30px; top: 50%; margin-top: -1em; background: #bada55; /* background color of the numbers */ height: 2em; width: 2em; line-height: 2em; text-align: center; font-weight: bold; } .post ol li:after{ position: absolute; content: ''; left: -5px; margin-top: -.7em;   top: 50%; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left:8px solid #bada55; /* background color of the right arrow*/ }</blockquote>Note: In blue are highlighted the values that can be edited in the CSS of these three examples, and added some comments highlighted in /* green */, so that you can know what each thing does. Compatibility: This will work in all browsers including IE8 - in the case of Internet Explorer 7, the number' styles will not be seen as it does not support the :before or :after pseudo-elements. However, I have added a line in the CSS that's specific for that browser and will bring up the default numbering of the ordered list. Hopefully this will be useful for you ;)

Blog Design labels Customizing Numbered Lists in Posts + 3 Examples

From the Compose tab of a Blogger post, we can create numbered lists using the "Numbered List" tool. A numbered list is achieved t...

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

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

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

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