[Blogger] Automatic Featured posts widget with Thumbnails using Labels

Featured Posts widget on WordPress is very easy to use. You just tag / label the post as ‘Featured’ and they end up in the Featured. Easy huh? Blogger users are not left behind! Here’s a tweak I could find out.

I was browsing through Aneesh’s Blog and could find out about a Recent Post Widget which uses feeds. Then I could find in Amanda’s Post that every single label emits its own feed. I combined both the widgets and TADA! – Amazing, Easy to use Featured Posts widget!! ..*cough* *cough*

Major Update:

This plugin has been updated to the newest version. Now, you are just a click away from featured post goodness.

If you want to change your label for your featured post, just edit the featured label column.

If you are looking for the thumbnail, you can change the “Snippet Style” to “Summary and Thumbnail” or whatever you want. Theres a lot of options to explore, do check them out.

Also, thumbnails from youtube videos, flickr are now supported. 🙂

Some configurations and their corresponding settings:

Extra Tips:

Some of you might not want ‘featured’ label on your Label widget. To remove  it from the list, just press edit on the Label Widget and follow these steps:

UncheckLabel

Please do report of your successes, failures and doubts.

In case, you need the old version, here it is. This is outdated and is not very user friendly.

Post Updated: Finally, Blogger team gave us a standalone label specific blog feed. It’s now the easiest widget to install. 🙂

1) Go to the Dashboard –> Layout –> Page elements –> Add a Widget –> HTML/Javascript

Now, add this

<style>img.recent_thumb {padding:1px;width:55px;height:55px;border:0;<br />float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;<br />margin: 5px 0px 5px 0px;padding: 0;<br />font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;<br />min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}</style><br /><script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js"></script><br /><script style="text/javascript">var numposts = 5;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 100;</script><br /><script src="/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

If you want to change your label for your featured post, just change /feeds/posts/default/-/featured to /feeds/posts/default/-/YOURLABEL (Optional)

3) Now just add ‘featured’ label (case-sensitive) when you are writing any post and its on the featured post column. YAY!

Thanks to Kang Rohman for this tip.


So lazy that he can't even fill this column out.

  • Vishal

    Hi, thanks for the widget.

    I have a small problem with this widget. When I add it to my blog, the text alignment of the widget appears incorrect. The first line of text goes towards the left, while the following line shifts slightly towards the right. Not a big issue, but it would be great to see a proper alignment.

  • Suhas

    @Vishal …. First of all…sorry for the late reply…

    you'll need to tweak the template to get the desired result .. check out the CSS and change the margin..

    search for "sidebar ul" or something similar…
    Just set margin to "margin: 0px;"

  • Suhas

    @Vishal .. if you still have some problems.. feel free to email me.

  • LittleMeTG

    Doesn't seem to be working for me. Text does not appear. Entered blog ID and featured label. It should show up above my posts but doesn't. Any help is appreciated.

    http://blessingstestblog.blogspot.com/

  • Suhas

    Went through your blog.. its working fine..imo

    Its simple as this..
    *u install the widget
    *u label your post with the 'featured' tag
    then, the posts should show up..

    a little more info wud be helpful..

  • Anurag

    Thanx for the script, I successfully add this feature to my blog, It is working well. Thanx again for your efforts.

  • hi thanks for the tips. but mine’s not working…

  • Hi Eric,

    Anything else you can share with us? Error reports and stuff?

  • Hi,
    I tried putting it on http://www.freecallshub.com but it seems I can’t get it working. You mind checking out what did I do wrong? Thanks.

    Regards,
    Blogger
    Free Calls Hub

  • hi i am debashish from bangalore,can u help me to put featured post in my website.. i have tried your trick but it is not working.. i have same website template as yours..

  • @debashish.. your blog address?

  • sorry for late reply.. my blog address is this sysblaze.blogspot.com

  • @debashish… Post updated… try the new method…

    I think they trashed the old feed URL

  • Thanx.. i will try it. and one more thing i want to know how to get website without any subdomain. i mean instead of sysblaze.blogspot.com i want sysblaze.com , is it possible for free.

  • @deb … umm.. you’ll need to buy yourself a domain name ($10)…

    you can get something like sysblaze.co.cc or sysblaze.co.tv for free …
    but I wouldn’t recommend it… because when you decide to move onto .com (later)… it can pose some problem…fixable problem

  • Is there a way to make this dynamic with tags? For instance, when the user clicks a label, this is the way their results show up? So, let’s say if someone clicked the “Desserts” label in my blog, or a link that says “Desserts” they will get something like this page: http://cookiesandtomatoes.blogspot.com/p/desserts.html

    I am asking for a dynamic way because there is a limit of 10 pages for blogger, and there are many labels that I’d love to do this with!

  • Well I tried to go around it by embedding the code several times in one page, but I can’t seem to fix the formatting: http://cookiesandtomatoes.blogspot.com/p/reviews_08.html

    As you can see, it keep indenting! Any ideas on how to clear all html tags and get it to just start again? Thanks!

  • This is absolutely gorgeous, elegant and amazing, and the easiest thing I’ve run into in weeks. It’s pretty much exactly what I’ve been lookin for for ages and it’s formatted better than most. I’m also in the process of launching some wordpress blogs (cityrat.com, tincanstring.com) and I wish I’d been finding as good-looking solutions for those. Thank you!

    I’m wondering how a mod of this would work in the header spot across the top where my labels are now (honestly ive been searching high and low to find a totally simple, non splashy header for the WP ones and haven’t). I threw it in there briefly (in the blogger one of course) and it looked a bit funky but I think I can tweak it so it’ll work.

  • If I want to show only post title and thumbnail, How can I do ?
    Because I make a gallery that no need to show content and I don’t know what’s is “undefied” mean.
    When I click it, It appear like “http://MY BLOG URL/undefied”.
    I know I must edit Javascript but of cousre, I can’t.
    Would you kindly to edit it for me to don’t show content, undefied and change More -> to Download. I’ll be appreciate.

    Will check again soon for your reply.

  • @Siameseoo … No need to edit the javascript.. Just change the variables..
    Set
    var showpostsummary = false .. That’s it

    If you want you can disable all these things
    showcommentnum = false
    showpostdate = false

    <script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js"></script><script style="text/javascript">var numposts = 5;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = false;var numchars = 100;</script>
  • Thank you very much for the widget, it works really well

  • How can i hide the list-bullets? do i need to apply a new CSS on the desirable spots? can i do it by changing this code?

  • SOLVED xD
    Thanks a lot. It’s a great widget and works perfectly 😀

  • ale

    is there a way to personal the “no image” thumbnail?

  • ale

    that is, i meant to say, is there a way to personalIZE the “no image” thumbnail.

  • Is it possible to make the title “{Featured Posts}” in bold print to match the rest of the titles on the page?

    Thanks for all your help in advance. I really appreciate it!

  • Not working for me.. doesnt show anything.
    i added code as given , changed YOURBLOG to my blog name. labelled post as ” featured ” .. but nothing appears ??

  • @ale yes, you can… download the javascript included.. ( http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js )

    edit it… search for ‘noimage.png” you’ll get the image ( http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png )

    Just replace the image path with your own image path..

    upload the javascript somewhere… ( say yoursite.com/js/recentpostthumbnail.js)

    Now, instead of this,

    <script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js"></script>

    use this

    <script style="text/javascript" src="http://yoursite.com/js/recentpostthumbnail.js"></script>
  • @Carrie.. I think what you are trying to say is make the “featured post” title or heading… look like the other titles…

    Thats pretty easy with CSS…

    1) Go to your blog.. View its source (View -> Page Source)
    2) Search for the title you want a match for… ( say “Some other title”)
    3) See the tag its enclosed with … (some thing like

    <h2 class='title'>Some other title</h2>

    )
    4) Use similar tags with your “featured post” title..

  • thx 4 the info..
    how can i edit the thumbnail size,
    post title size and colour, and how to bold them?

  • p1

    My java script doesnt get saved for some reason. I mean each time i click on the widget edit button , the code seems to be gone in the pop up.

    This is my website: http://p1sdiary.blogspot.com/

    As you can see the the widget part under “check these posts” appears blank.
    I think its problem with blogger but not sure.

    This is the code I am using

    img.recent_thumb {padding:1px;width:55px;height:55px;border:0;    float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}var numposts = 5;var showpostthumbnails = true;var displaymore = true;var displayseparator = true;var showcommentnum = true;var showpostdate = true;var showpostsummary = true;var numchars = 100;
  • @p1… Blogger is working fine on my side…

    just a thought… you did click on the save button.. right? 🙂

    @seizer … you can change the thumbnail size by editing the first line of the code.

    img.recent_thumb {padding:1px;width:55px;height:55px

  • Thank you for your amazing post.

    However, in your script:

    <script src=”http://YOURBLOG.blogspot.com/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs”></script>

    and you say: Replace YOURBLOG with your blog name.

    I think that will be done with this:

    <script src=”/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs”></script>

    and user no need change anything. I’ve try this and work fine for me.

    One again, the label name is case sensitive. ” Featured ” is different with ” featured “, be sure the label name is same with label name in the script.

    Thanks

  • @Kang… Thanks a lot, buddy! Why didn’t I think of that, it seems so obvious. 😀

    Given you a back link! Check it out 🙂

  • @Suhas

    Thank you for your backlink to my site.

    Keep good work my friend 🙂

  • So I’ve successfully installed the widget into my blog and I’m trying to tinker with it. I want to run my model posts and so far, that’s what it runs but because they are model posts and because of the overall layout of the blog I want the images to be very large. Is there a way that I could possibly take place the image directly under the title, like in lieu of a summary and enlarge it? I look forward to your response as soon as possible.

  • @mikelle… sorry if I’m late… here’s your solution…

    You’ll need to edit the JavaScript Included…Do do so, you can download the javascript included.. ( http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js )

    edit it (Notepad would be sufficient)..

    You can add a line break after the image.

    Add a

    <br/>

    after the

    <img class="recent_thumb" src="'+thumburl+'"/>

    tag

    To increase the image size, you can edit the style (in the widget code)..

    img.recent_thumb {padding:1px;width:55px;height:55px;border:0; float:right;margin:0 0 5px 10px;}.recent_posts_with_thumbs {float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;min-height:65px;}.recent_posts_with_thumbs a {text-decoration:none;}.recent_posts_with_thumbs strong {font-size:10px;}

    Now, upload the javascript somewhere… ( say yoursite.com/js/recentpostthumbnail.js)

    Now (in the widget code), instead of this,

    <script style="text/javascript" src="http://blogergadgets.googlecode.com/files/recentpostswiththumbnailsv3.js"></script>

    use this

    <script style="text/javascript" src="http://yoursite.com/js/recentpostthumbnail.js"></script>

    PS: Will be added a customizing section to this tutorial..

    Cheers,
    Suhas

  • what a fantastic tweak, many many thanks for sharing this. Earlier, a commenter asked a question about getting rid of the bullet points, and then wrote back problem solved – can you share how to do this?

    I’ve tweaked the code thus far to my liking but I would like to get rid of the bullet points, as well as the indent so that the article links start on the left hand margin (i.e align like the other images in my left hand nav area)

    site is http://www.djmadwax.com

    many thanks!

  • @dj … try this…

    follow the instructions given in the previous comment… while editing ur JS, add

    style="list-style-type:none"

    after

     <li 

    ie… this attribute should be inside the

    <li>

    tag…

  • many thanks, I dug around in the css code and figured out how to tweak. much respect for droppin’ knowledge!

  • @dj …I did try some stuff..

    It seems you have to make changes in the template to get invisible bullets…

    or you can just ditch the

    <li>

    tag..

  • Worked like a charm on my site, tweaked a bit—perfect! thanks a bunch Suhas!

  • J

    This widget has a problem with picture captions. It shoves the caption text in at the beginning of the text in the sidebar listings, making the text nonsensical. Otherwise a good widget so I hope someone can sort it out.

  • hey nice post, but how can this thumbnail appear at the left side of the widget, can you suggest any trick here with this code..

    ProBogBooster

  • Hi Vinayak,

    You can do it by editing the JS file. One of my comments can help.

    http://suhastech.com/blogger/blogger-featured-posts-widget-with-thumbnails-using-labels/comment-page-1/#comment-1293

    Sorry, I don’t have much time nowadays so I’m being a little vague here(dealing with the 12th standard crap 🙁 ).

  • nice trick.. i was searching it for a long time.. thanks a lot…

  • I have tried several featured posts widgets and last settled with yours. It is simple and elegant
    thanks Suhas.

  • Very nice widget !
    If I want to show only thumbnail like in your screeshot (3 up and 3 down) , How can I do ?

  • Just select “post thumbnail” in the snippet style option

  • I apologise for my bad English, I have explained evil. I want to Show only wanted thumbail but on two lines, three by line (like your screenshoot).
    Thanks again. You do a big work

  • Use these settings

  • Thanks !!!!!!! Work fine.

  • TKJ

    hi, thanks for this widget, it works fine…but, is it possible that the featured post will scroll vertically? i have a maximum of 15 featured post and the widget is very long, i want it to make it short, let say it should display 4 featured post, and the remaining 11 featured post will scroll one by one…

    thanks

  • Yeah, I suppose we can do it with jQuery….

    As of now, I don’t have time to write a plugin from scratch…. If you find a similar widget, I can port it over to blogger.. 🙂

  • Jonathan

    this widget is not working fine for me. i followed the instructions but i failed.

  • never mind its working now. thanks. 🙂

  • bassislv

    thanks for this, works like a charm, but is there a way to make it horizontally?

  • Wow, woring great! Thanks a lot!!!! It’s exactly what I wanted!

  • HI,

    I am having problems with your widget, it seems like there are times that it doesn’t appear in my site please see what’s going on. It’s been 3 days like that, is there something wrong with your code? I need a solution please help me ASAP. Thanks!

  • Chris

    Hi,

    I need your help, I installed your widget in my blogger site but why is it that there are times the widget doesn’t show up or missing in my website? Thanks.

    Chris

  • Tabtotab

    Hi there.. this thumbnails are not seen in the blog’s some times… is it some thing you know ?

  • behrouz feiz

    i have a problem ! my english is bad sorry for that. my blog is right to left and your widget is left to right. how i right to left this widget ? the text ? my blog language is persian /arabic
    this is my blog :
    http://www.1itnevis.com

    tnx for your very useful widget ! :))

  • Faithn

    I can’t seem to get this to work.  The widget shows up but only the title.  It’s not getting posts from the labels..

  • Nino hou

    i’ve try it but didnt show anything, i’ve do as your screenshot and correct it many times, but this still nothing happen… it just show “Hello Admin,If you need help configuring this gadget or if you like to
    provide your feedback about the gadget or just want to say hi, visit my blog”

  • Rajesh Meesala

    hi suhas…. ur really gr8 boss… for such an app..but i have one quick question ? why can’t u insert click more button for this gadget ..if that option is there u rocks man

  • Found a BUG!! if you schedule post, the whole lable’s thumbnails are not seen.

  • Moviestick Tk

    Thanks a lot
     

  • Organizethislife

    Suhas, thanks for the feature widget. How do I get images to go straight across the top of my blog instead of staggering down. The thumbnails are not straight across?

  • Ifootballvideo

    Hi,i m using this lovely widget ,few of them on my blog.I just noticed some issue with it.When using google translate,widget dont show at all and on the place where supposed to be widget items write this :

    We are sory…Gadget is not properly configured. Advice for Web administrators:Make sure the “settings Friend Connect – Home URL” URL of this site.

    Can you fix this ??

  • Darlos

    this isn’t working, the ‘add this to blogger’ button 🙁

  • Thank you so much for this widget. I love this a lot and it helped me to create a beautiful recipe index for separate categories, complete with pictures, and best of all, I don’t need any manual updating. A once off job to create the index page and the widget does the rest for me. Thanks a lot!

  • Ishant Gupta

    Hello suhas,
    I used this featured post widget to my blog.but i am unable to see the posts in sidebar.
    blog url is http://shapeurideas.blogspot.com
    plz check it and tell me the appropriate solution.

  • Guest : To Suhastech.com

    If I try to change the size of Thumbnails image to (400x280px) – post by label category, the image goes blur. not clear.. what are the solutions to do with this changes? I need to enlarge image, not like 75px or something nearer range… Pls reply anyone..!

  • Thanks for a helpful widget!  The only problem is that there is no extra
    space between each entry, so it’s hard for readers to tell which images goes
    with which headline.  (I am using it
    without a text summary.)  Or — I wish
    that the headline could float left right next to the image, not above it.  That’s how Blogger’s “popular posts” looks.
     

  • Hi! Thank you so much for this widget. I used your widget for some label, say ‘Label1’. I want to add a link at the end of this widget, something like, “Read more from this label”, that takes user to all posts under this label. I would highly appreciate if you can respond quickly. Thanks!

  • Julesinsf

    My blogger domain now redirects to a new custom domain, but there’s a strange new behavior:
    the featured posts widget still works fine when accessing the new custom domain, but is no longer loading when accessing the blogspot web address (although it worked like a charm for years)

    Error message:
    This gadget is configured incorrectly. Webmaster hint: Please ensure that “Friend Connect Settings – Home URL” matches the URL of this site.

    Suhas, any idea what’s going on?

  • First off all you shouldn’t write half ass directions because you are leaving out key elements. Where the fuck on the new blogger is there a “Show Thumbnails” with snippet option? Do you need to use the new interractive layout? You justy copied and pasted someone else’s work  but you aren’t even intelligent enough to ensure the functionality of your claims.

  • sapfiros

    oh my dear friend this widget was so nice, but now is broken. I am unhappy. Thanks for your very usefull warks.

  • I’m having the same problem!

  • Junci Arceta

    THanks! the featured post widget is great! is there a possibility that i can edit the font size? im having a hard time.. pls help me

  • I think the admin of this website is truly working hard in favor of his website, for the reason that here every data is quality based information

  • IvanRott

    This recently stopped working for my website. What happened?

  • JulesinSF

    Yes, same here, this great gadget recently stopped working 🙁

    Any chance there will be an update to work with new Blogger?

  • Mayank Rajawat

    its not work

© 2009 Suhas Tech. All rights reserved.
Proudly powered by Wordpress.