Recent Posts By Label Gadget For Blogger

Posted : Tuesday, February 22, 2011 | Post Author : Paul Crowe | 69 comments

recent posts blogspot gadgetIn 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.We also covered a simple featured posts gadget and Blogger have a one click Popular posts gadget in the gadget gallery.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.

I think this is a neat option to get some of your favorite posts displayed or you could feature a different category daily, weekly or monthly.If used with my Tabbed Sidebar Section you could display three or more categories in your sidebar without using too much room.While there are a number of codes for this gadget credit for the code in this post goes to Blogspottutorial.We have a few pieces of code you will need to add to your blog so make sure to Save your template before making changes.

Live Demo – Recent Posts By Label Gadget

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

]]></b:skin>

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

/*** 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 </head>

<script type='text/javascript'>
//<![CDATA[
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<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='http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg';}
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;}
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('<br>');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>

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/-/LABEL?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

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.
(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.

69 comments:

  1. The images used in your posts are really attractive.

    ReplyDelete

  2. I had done all what you have said in this post but the Label didn’t appear as you can see
    http://mangablaze.blogspot.com/
    In first Blog Archive
    and I have a question
    Is that label looks like this “Find Your Manga” label in this site
    http://rawmangaspot.blogspot.com/
    and If it’s not, Would I found this Label in your site

    And thank you for this amazing site and I like it for sure

    ReplyDelete

  3. nice one, can I show only the titles of the posts?

    ReplyDelete

     

    Replies

     

  4. yeah i also wanna ask that question,can i show only post title without arrow sign?

    Delete

  5.  

  6. nvm, got it : )

    ReplyDelete

  7. corian countertopsMarch 2, 2011 at 5:06 PM

    this is very interesting post..thanks for sharing this information..really cool

    ReplyDelete

  8. @ BLAZ3 – If you have a labels gadget in your sidebar click on the label you wish to use.In the address section of your browser you will see how the label appears.As i said in the post labels with more than one word will have a percentage between words, URL’s can not have any gaps..

    ReplyDelete

  9. hardie board siding costMarch 3, 2011 at 6:56 PM

    now it is easy to set-up a blog..with this tips and tricks..this is great thanks for sharing this information..

    ReplyDelete

  10. sliding glass doorsMarch 8, 2011 at 3:38 PM

    cool gadgets..this really a great post..very interesting and informative post..

    ReplyDelete

  11. corian countertopsMarch 29, 2011 at 12:42 PM

    great..this is waht i’m looking for..thanks sharing this tips..you’re the best..

    ReplyDelete

  12. I would like to have thumbnails bigger, but when I change the size the pictures get weird.

    Could you help me ???

    Thanks !! Great blog btw! =D

    ReplyDelete

  13. This comment has been removed by the author.

    ReplyDelete

  14. Entertainment From D ‘netMay 29, 2011 at 6:04 PM

    What piece of code do I configure to make the thumbnails larger?

    ReplyDelete

  15. Hi
    When I used this its only working with my one label only that is “Social Topic” but when I tried to use it with other its not working
    Help me out plz
    Thanx
    Anyway its a beautiful work I have ever seen………..

    ReplyDelete

  16. @ Md Jamil – If it works for one label it will work for them all.Make sure the label is correct, as i say in the post if it is two words with a space it will be like this – …label/Social%20Media…

    ReplyDelete

  17. thanks for the post, ive tryed it with great success but id like to add also the “share this” buttons, is it possible to do it? thanks for your answer!

    ReplyDelete

  18. @ Federico – One of our latest tutorials covers the share this buttons – http://www.spiceupyourblog.com/2011/06/blogger-tips-share-buttons-count-social.html.

    ReplyDelete

  19. thank you! ill check it, one more question… is it possible to make bigger thumbs? when i resize the actual thumbs with css the image pixelates too much, is it possible to generate bigger images?

    ReplyDelete

  20. WORKS PERFECT THANKS

    ReplyDelete

  21. Brilliant! Thanks so much for a WONDERFUL article!

    ReplyDelete

  22. 2 quick questions…can I remove the label and how can I get them to sort by date published. right now they are showing oldest first instead of most recent. Thanks so much for your help.

    ReplyDelete

  23. I couldnt make thumbnails bigger, but got the solution by uploading images to an external server. Doing that, blogger doesnt generates any thumbnail, just links the original image, so i can resize it to any size

    ReplyDelete

  24. Its better if you can add this gadget screen shot. Then everyone can see how much attractive it.

    ReplyDelete

  25. Silvia MasaracchioJuly 19, 2011 at 12:59 PM

    Thanks, Paul. This widget is really beautiful!!!

    ReplyDelete

  26. Silvia MasaracchioJuly 19, 2011 at 1:04 PM

    I have a problem: this widget doesn’t show last post but olders. Can you explain me why, please?

    ReplyDelete

  27. @ Silvia – That is odd, it could be your feed just has not updated but as soon as it does the latest post will be displayed.

    ReplyDelete

  28. hey! beautiful script, thought i have a weird problem… i’m having two different blogs, but with the same code, which i exported from one of them and uploaded on the other. So they should work the same, look the same and will finally have the same content, just in two different languages… seems easy, no?
    somehow the script works great on one of them:
    http://ossa2011en.blogspot.com/p/theme.html
    and doesnt work at all at the other:
    http://ossa2011.blogspot.com/p/temat_30.html

    what could be wrong? i checked – the label name is correct.
    I run out of ideas how to fix it… Would be gratefull for any hint…

    ReplyDelete

  29. oh, already found a solution: the blog feed was not enabled:) maybe that will come as a reminder of this basic thing to do before using this script.
    once again thanks, it’s the best of this kind of scripts i found, really clear and custiomizable!

    ReplyDelete

  30. this is great but how do you remove the bullet point?

    ReplyDelete

  31. how do u get rid of the bullet point and how do you change the view to 2×2 instead of thumnail list

    ReplyDelete

  32. Thanks for this wonderful tutorial. It worked.

    ReplyDelete

  33. How can i increase the nº of posts because i have for the label collection, 45 posts but it show only 25
    Thanks for the great job

    ReplyDelete

  34. Hi my friend how to increase the number of posts because i have 45 posts for the label collection, but it show only 16

    Thanks for your great job

    ReplyDelete

  35. please tell me how to show more than 25 thumbnails.
    thanks

    ReplyDelete

  36. When I show without thumbnail there’s a big gap. How to I solve that?

    ReplyDelete

  37. thanks u so much 🙂

    ReplyDelete

  38. it looks great is there a way i could not have the summary of the post in the widget? thanks again!

    ReplyDelete

  39. Thank you! I was looking for this.

    ReplyDelete

  40. Thank you!!!! Amazing!

    ReplyDelete

  41. Bhojpuri Song DownloadJanuary 23, 2012 at 3:08 PM

    was looking for it for such a long time..thanks

    ReplyDelete

  42. Değmesin yağlı boyaFebruary 8, 2012 at 8:38 AM

    Very useful thank you so much!

    ReplyDelete

  43. How Many Post Will Be Shown ?

    ReplyDelete

  44. nice post, really helpful

    ReplyDelete

  45. I like your gadget because the picture has frame, not like the blogger has.
    So I want to make it also for my Popular Post, can you please help me with the code? thank you

    ReplyDelete

  46. How could I show this label post at the corner of the page like you are showing recommended for you

    ReplyDelete

  47. Thanks for sharing m in search of this type of code.. Thanks again 🙂

    ReplyDelete

  48. Is there a way to show that Time as well as the date

    ReplyDelete

  49. Thanks, very usefull! I also would like to show more than one colomn of post, is it possible? Could you help me?

    ReplyDelete

  50. Thanks For the post . It helped me a lot

    ReplyDelete

  51. hello!
    can i use more than one label?
    george.

    ReplyDelete

  52. Thank you sir, it works perfectly

    ReplyDelete

  53. Thank you

    ReplyDelete

  54. Thanks this is exactly what I was looking for! Great job! For those of you who want remove the bullets…they are styled by the template CSS. Go to Template > Customize > Add CSS > Add this code to remove the bullet and the indent:

    .widget ul {
    list-style: none;
    padding: 0px;
    }

    Cheers!

    ReplyDelete

     

    Replies

     

  55. thank god Jessica.. i was searching for this all way down, besides the info is great, i liked it and used it at my site

    Delete

  56.  

  57. Is there a way to show title and thumbnail only along with the number of comments?

    ReplyDelete

  58. I wanted a little editorial control over which posts I wanted to feature. Thanks for solving my problem.

    ReplyDelete

  59. excellent article. thank you.

    ReplyDelete

  60. every thing is fine but i want to show it in grid view please help me

    ReplyDelete

  61. Wowwww… its working for me thank u boss

    ReplyDelete

  62. THANK YOU SPICE UP YOURBLOG WE ARE SOOOOOOOOOOOOO HAPPY THANK YOU MAINTAIN LIKE THIS GOOD CODES

    ReplyDelete

  63. how to increase the number of posts its only showing 3 updates for me

    ReplyDelete

  64. LOWONGAN KERJA HHRMASeptember 24, 2012 at 7:20 PM

    wow… good… thanks, work properly…!

    ReplyDelete

  65. 🙂 way to go! awesome!

    ReplyDelete

  66. but only 25 posts showing

    ReplyDelete

  67. Great code Paul and will solve a problem that I have been working on for weeks without much success.

    Is there a way to use this based on title rather than labels? For example, in our theatre group, there is the ‘Star of the week’… I would like to display all of those posts together without depending on the poster to remember to tag it with the star label. If it isn’t an easy solution, then the extra effort isn’t worth it. Just thought I would check. Thanks, Mark

    ReplyDelete

  68. Chakravarthi SreekanthJanuary 4, 2013 at 4:57 AM

    really nice one

    ReplyDelete

  69. Thank you method works but does not show the new threads only display the old threads can you help me plz i really need this

    ReplyDelete

  70. This is awsome widget, as cool as your blog! I used it to my site and I`m very glad 🙂 Thank you SpiceUpYourBlog!!!

    ReplyDelete

  71. cool widget, thanks sir ^^

    ReplyDelete