Recent Posts By Label Gadget For Blogger




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

Drop Your Comments, Views And Opinions Below.


Join over 5000 Subscribers! Please sign up to receive Updates.

SUYB has its Focus on Quality. If we post Crap, you can unsubscribe.

No Spam and No Garbage! - Use RSS, Twitter & Facebook as an Alternative


If You Enjoyed This Post Please Take 5 Seconds To Share It.

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
    1. yeah i also wanna ask that question,can i show only post title without arrow sign?

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

    ReplyDelete
  5. @ 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
  6. now it is easy to set-up a blog..with this tips and tricks..this is great thanks for sharing this information..

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

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

    ReplyDelete
  9. 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
  10. This comment has been removed by the author.

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

    ReplyDelete
  12. 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
  13. @ 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
  14. 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
  15. @ 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
  16. 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
  17. WORKS PERFECT THANKS

    ReplyDelete
  18. Brilliant! Thanks so much for a WONDERFUL article!

    ReplyDelete
  19. 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
  20. 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
  21. Its better if you can add this gadget screen shot. Then everyone can see how much attractive it.

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

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

    ReplyDelete
  24. @ 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
  25. 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
  26. 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
  27. this is great but how do you remove the bullet point?

    ReplyDelete
  28. how do u get rid of the bullet point and how do you change the view to 2x2 instead of thumnail list

    ReplyDelete
  29. Thanks for this wonderful tutorial. It worked.

    ReplyDelete
  30. 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
  31. 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
  32. please tell me how to show more than 25 thumbnails.
    thanks

    ReplyDelete
  33. When I show without thumbnail there's a big gap. How to I solve that?

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

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

    ReplyDelete
  36. 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
  37. How could I show this label post at the corner of the page like you are showing recommended for you

    ReplyDelete
  38. Thanks for sharing m in search of this type of code.. Thanks again :)

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

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

    ReplyDelete
  41. Thanks For the post . It helped me a lot

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

    ReplyDelete
  43. Thank you sir, it works perfectly

    ReplyDelete
  44. 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
    1. 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
  45. Is there a way to show title and thumbnail only along with the number of comments?

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

    ReplyDelete
  47. excellent article. thank you.

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

    ReplyDelete
  49. Wowwww... its working for me thank u boss

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

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

    ReplyDelete
  52. wow... good... thanks, work properly...!

    ReplyDelete
  53. but only 25 posts showing

    ReplyDelete
  54. 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
  55. 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
  56. This is awsome widget, as cool as your blog! I used it to my site and I`m very glad :) Thank you SpiceUpYourBlog!!!

    ReplyDelete



Important - If you ask a question make sure you tick the "Notify Me" box below the comment form to be notified of follow up comments and replies.


Hire Us