Recent Posts By Label Gadget For Blogger

Share

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 - More Info)

]]>

Step 3. Copy and paste the following code Directly Above / Before ]]>

/*** Recent Labels Gadget Css ***/
img.label_thumb{
float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
img.label_thumb:hover{
background:#f7f6f6;
}
.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;
min-height:65px;
margin-bottom:10px;
}
.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 - More Info) 

/head

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

script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('

');for(var i=0;iif(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("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('
• ');if(showpostthumbnails==true)
  document.write('');document.write(''+posttitle+'
  ');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.lengthelse{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=''+commenttext+'';towrite=towrite+commenttext;flag=1;;}
  if(displaymore==true)
  {if(flag==1)towrite=towrite+' | ';towrite=towrite+'More »';flag=1;;}
  document.write(towrite);document.write('
');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('

');}
//]]>

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;

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 withGadgets.
(http://www.spiceupyourblog.com/search/label/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 :

http://www.spiceupyourblog.com/search/label/Social%20Media 

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.

Drop Your Comments, Views And Opinions Below.