Recent Posts By Label Gadget For Blogger

1:59 PM |

In this post i want to show you another way to display your recent posts in your blogs sidebar or other gadget sections.We previously covered a number of recent posts gadgets you can use on your blog, and the recent posts gadget is probably the most used type of gadget by bloggers.

So how about displaying your posts from a specific category on your blog.With this gadget you can display a list of posts that you have added the same label to, the gadget will have the title of the post, thumbnail from the post and an optional summery.

Recent Posts By Label Gadget

Step 1. In your Blogger Dashboard click > Design > Edit Html 

Step 2 . Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):


Step 3. Copy and paste the following code Directly Above / Before ]]></b:skin>

/*** Recent Labels Gadget Css ***/
border:1px solid #8f8f8f;
.label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
ul.label_with_thumbs li {
padding:8px 0;
.label_with_thumbs a {}
.label_with_thumbs strong {}

Step 4. Find the following piece of code in your blogs Html : (Click Ctrl and F for a search bar to help find the code):


Step 5. Copy and paste the following code Directly Above / Before </head>

<script type='text/javascript'>
function labelthumbs(json){document.write('<ul class="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<;k++){if([k].rel=='replies'&&[k].type=='text/html'){var[k].title;var[k].href;}
if([k].rel=='alternate'){[k].href;break;}}var thumburl;try{$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='';}
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]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";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('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
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('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
{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(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}

Step 6. Save your template, we have added the Css to style the gadget and the script to make the gadget work.Now we just have to add the gadget code to your sidebar in a Html/Javascript gadget.

Step 7. Click back to your Design Page > Click Add A Gadget > Choose Html/Javascript from the pop up menu :

Step 8. Copy and paste the code below into the Html/Javascript gadget.

<script type='text/javascript'>var numposts = 3;var showpostthumbnails = true;var displaymore = false;var displayseparator = false;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 80;</script>
<script type="text/javascript" src="/feeds/posts/default/-/

Important - You must add the name of the label you want to to the above code. Replace LABEL in red with the label name.

Example - If i wanted to display posts from the gadgets label i would replace LABEL with Gadgets.

If your label is made up of more than one word it can get confusing as the space between the words will be filled automatically as shown below : 

If you are going to use a label with more than one word make sure to first see how the label appears.

Step 9. Save the gadget and you can drag and drop it into the position you want it displayed on your blog.
Gadgets By For Bloggers