Show Recent Posts With Thumbnails For Particular Label or Category in Blogger Alphause

Po ... Show Recent Posts With Thumbnails For Particular Label or Category in Blogger 72 comments Sometimes we want to have everything organized so that our readers can find topics of interest more easily, and that's when instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that we'll be able to show the latest posts for each label we want and also display a thumbnail for our category. Screenshot To add this cool gadget/widget for the latest categories, just follow the next steps: Steps Step 1.From your Blogger Dashboard, go to Template/Edit HTML Step 2.Click anywhere inside the code area and search (CTRL + F) for this piece of code: ]]> ... just above it, paste this one: /* Recent posts by labels --------------------------------- */ img.label_thumb{ float:left; margin-right:10px !important; height:65px;/* Thumbnail height */ width:65px;/* Thumbnail width */ border: 1px solid #fff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4); box-shadow: 0 1px 1px rgba(0, 0, 0, .4); } #label_with_thumbs { float: left; width: 100%; min-height: 70px; margin: 0px 10px 2px 0px; padding: 0; } ul#label_with_thumbs li { padding:8px 0; min-height:65px; margin-bottom:0px; border-bottom: 1px dotted #999999; } #label_with_thumbs li{ list-style: none ; padding-left:0px !important; } #label_with_thumbs a { text-transform: uppercase;} #label_with_thumbs strong {padding-left:0px; }Step 3.Now search for this tag (CTRL + F) ...and add the following script above it: Note:to add your own pic for the posts with no thumbnail, replace the image url in blue with your own Update!For a better image resolution add this script above thetag: ... save the template. So we have added the Css to style the widget and the script to make it work. Now all we have to do is to add the widget's code to the blog sidebar in a Html/Javascript gadget: Step 4.Go to Layout - click on Add a Gadget Step 5.Choose the HTML/Javascript widget and paste this code inside the empty box: Note:Where it saysName-of-the-labelis the name of the label you want to display, and if your label is case sensitive, like in my example, then you should type it that way. Also within the last code, there are parts that we can customize, just changetruewithfalseor vice versa: var numposts← Number of posts to display var showpostthumbnails← Show/hide thumbnails var displaymore← Show or hide the read more link var displayseparator← Show/hide separator var showcommentnum← Show/hide the number of comments var showpostdate← Show/hide the posts dates var showpostsummary← Show or not the posts summaries var numchars← Number of posts characters (here you have to change the 100 value)Remember that the gadget displays the latest posts from a particular label, therefore, if you want to display the latest posts from other labels then just repeat step 5 for each additional category you want to add. That's it :) Enjoy! Like 12 Random Posts How to Add Google Analytics to Blogger20/10/2013 - 5 Comments How to Create Drop Caps (Big First Letters) in Blogger/Blogspot04/06/2012 - 30 Comments Add a forum on your Blogger blog with Nabble21/10/2013 - 7 Comments Related Posts: Share blog posts in social medias u... Add floating social media sharing b... Add A CSS Animated Share Button on ... Orbit - jQuery Image Slider Plugin ... Customizing Numbered Lists in Posts... 72 comments: Google Adsense 4/01/2013 Thanks for sharing this nice way to increase CTR Reply Jemma Taylor 4/02/2013 I would like to have thumbnails bigger, but when I change the size the pictures get weird. Could you help me ??? Thanks !! Great blog...! Reply Thedragao Blog 4/02/2013 I like your trick blog ! keep blogging .. Reply Salman Ali 4/02/2013 THANX LIKE IT..... hqkings.blogspot.com Reply Vestin 4/02/2013 Solved the indent problem, but how do I make some space between the title and the summary text? Sorry for spamming but you're the one that helped me build my blog. Reply Replies "Stan Truck" 5/05/2013 Could you fill us in on how you solved the indent problem? Admin 5/23/2013 @Vestin, Many apologies for replying so late, I've been really busy in the last time! I hope you're still reading this blog :) Try to add this declaration to the following line (step 2): .label_with_thumbs a { text-transform: uppercase;margin-bottom: 10px;} Change the "10px" value to modify the distance. Hope it works :) Kamal G 4/03/2013 Thanks a lot very very useful to my blog called www.quizvook.com Reply Abdul Kholiq Hasan 4/08/2013 Nice Tutorials,thanks i will try to my blog Reply Đất Bình Dương 4/10/2013 Thanks a lot! Reply Replies Admin 4/14/2013 You are welcome. Thanks for visiting! Mursaleen Kamal 4/14/2013 Thanks Sir But i want this gadget as a RELATED POSt plz Guide me thanks Reply vgopal 4/21/2013 Thanks very much for sharing, this is the 3rd widget I installed from helplogger for my site www.findmesimilar.com Reply Fernando Salas 4/28/2013 Very nice!! Thanks Admin Blogger Tutorials Reply Adobo Talk PH 4/30/2013 The titles are in ALL CAPS. is there a way to change this? Thanks. Reply Replies Adobo Talk PH 5/04/2013 Solved the problem. lpsp 5/06/2013 thanks for sharing Reply Analyst 5/08/2013 Can this tutorial help us get posts with specific labels in a post also. Regards http://www.indian- share-tips.com/ Reply sadawar 5/09/2013 Thank you... :) Reply Tillie 5/09/2013 Hi - I tried to use the code to create a label-specific static page to display past posts in thumbnail format. First I pasted the template code as instructed, then I pasted the widget code into the html tab on the static page. The result is that only one thumbnail displays even though I increased the var numposts variable, and the thumbnail is in black and white instead of color. There is also a grey background behind the post. Any idea how I can adjust the code to make it work on the static page? Thank you! www.tilliesdream.com Reply Replies Unknown 11/26/2013 Hi Tillie, Did you figure out how to make it work on its own page? I am currently trying to do the same thing but can't quite get it. Thanks! Heru Rahmat 5/10/2013 awesommeeeeeee Reply Linda Terrell 5/14/2013 The section is blank...this just does not work for me, not sure what i am doing wrong. Reply Linda Terrell 5/14/2013 Solved- Widget doesn't show up when viewing permission is off Reply Linda Terrell 5/14/2013 One more question- How do I make the thumbnails bigger, if possible. Thanks! Reply Replies Admin 6/04/2013 Hi Linda, You should change the "65px" value to width and height just belowimg.label_thumb{ Many apologies for the very late reply...! Wannabetennis 5/19/2013 thank you very much!!! my template give me some problems with this widget , but this is fantastic! Reply Anonymous 6/04/2013 how we can use this twice with different image size. because it reads only the last css code. Reply Santosh Shah 6/09/2013 isn't there any way to add more post link below every widget. SO visitors get easy to read other post of the label. Hoping for your kind reply. Reply Jalan Lurus 6/14/2013 you help me a lot thanks Reply BALVIR CHAND 6/16/2013 when i posted any content of my blog in my facebook then my main image is not appear my profile image is appear plese help me. thanks Reply Jellyfish 6/18/2013 What about getting the thumbnail to float to the left of the text so the title and summary are to the right of the thumb? Right now on my blog it just plops the thumbnail onto the same line as the title, which looks just awful. :c Reply Sprat Ly 6/22/2013 how to adjust the font? Reply Replies Admin 11/27/2013 You need to add below theul.label_with_thumbs li {line this code: font-size: 12px; Change the 12px value to make the text bigger. Thanks for visiting Paulo Neto 6/27/2013 I never post on blogs but this one, this one is something...please, don't stop blogging. Cheers! Reply Pacific Flash 8/31/2013 Awesome. I will try and implement this on my site. Cheers Reply Anonymous 9/04/2013 wow really nice one ... well i tried to play around that code to make it work for popular posts instead of recent but i end up with no success ... do u think it's possible to do that ?? Reply India Violet 9/12/2013 Great Help! Reply Chou Ponlok 9/17/2013 could you please tell me clearly because I tried again and again with your code above but I didn't get successful to do it. It is not display any post in my blog without any error code. Please help me about this. Reply My Press-Release 9/27/2013 Awesome! Awesome! Awesome! I used it on my site and this is great! Thank you very much :) Reply atif 9/29/2013 nice Reply Aditya Jois 10/18/2013 Oh man! I was looking for this widget since ages! Finally landed in your blog. Thank you very much!! Keep helping!! Reply Saben-unik 11/02/2013 Thanks, it works Reply JOLY GEORGE 11/11/2013 very nice.....i have tested and its working superbly......Keep sharing more and more valuble informations, tips , tricks,….. Make Money , Blogging Tips, Widgets, Free Tools, Tricks Reply sheethal Rao 11/19/2013 Wow!. Its nice I can try for my blog Thank you for sharing with us Reply Jackery 11/25/2013 Greate work. Hi everyone. I see a template here. It is so cool. hic..But i have not enough money. Everyone can sell it for me with 15$? http://themeforest.net /item/nami-press/6166852, :(. Thanks Reply Unknown 11/25/2013 Hi, I would like to do the same as Tillie above and have set up a new page with a label specific thumbnails menu, but when I preview no thumbnails show up - is there something else I need to add to make this work or will it not work on a page of its own? Thanks Angie Reply Unknown 11/25/2013 Hi, I am in the same situation as Tillie above - i would like this label specific thumbnails function to be on a page of its own. I am following the instructions above but can't seem to make it work - is there something else I need to add to make it on its own page or will it not work this way? Thanks! Reply Unknown 11/27/2013 Hi, I answered my post above tonight - i actually only needed to publish the page and it viewed. BUT I have another issue - I am trying to modify the code so that it shows as a gallery style - side by side squares WITHOUT the post titles. I can't seem to find where in the code I need to edit to NOT show the post titles and only show the thumbnails and 2ndly I can't seem to show it as a grid, lastly how to I fix the left indent? I have set everything I can think of but it still stays indented. This is where I have got to: http://www.cakeandtravel s.com/p/soups.html Your advice is very much appreciated. Thank you so much! Reply Replies Admin 11/27/2013 Hi there, Instead of the code from step 2 add this one: img.label_thumb{visibility: visible;margin-right:40px !important; height:120px;width:120px;border: 1px solid #fff;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);box-shadow: 0 1px 1px rgba(0, 0, 0, .4);} ul.label_with_thumbs li {height: auto;width: auto;float: left;margin-left:-30px;} .label_with_thumbs li {list-style: none ;padding-left:0px !important;} .label_with_thumbs a { text-transform: uppercase; visibility: hidden; } .label_with_thumbs strong {display: none; } Hope this works ;) Thanks for visiting! Unknown 11/27/2013 Thanks so much! You're a legend! It worked a charm... One question - I am having the same problem as Jemma up above - for some reason the thumbnails are showing up really low resolution, yet there are thumbnails already on the site in the footer that preview well - is there a way to fix this in this gadget? http://www.cakeandtravel s.com/p/soups.html Thanks so much for all your help! :-) Admin 11/28/2013 I'm so sorry but at the moment I don't know any solution for this. I will update my post as soon as I will find one. Thank you for your understanding. Unknown 11/28/2013 Thanks for your help! :-) Jānis Bedeicis 12/30/2013 I trying to do same. She Told Me 12/09/2013 really nice post... thank you for sharing Reply Yomi Adeyemi 12/14/2013 This widget is great, however I've implemented it using a thumbnail size of 250x215 and the image is very stretched/low-res. Is there any way to modify the image src to utilize the higher-res images the regular blog-post body uses? www.africandynamo.c om Reply TechnoZone 12/18/2013 Thankyou very much for posting this, Its helpful to blogger template. Keep posting! Reply Anonymous 12/20/2013 This is great, but it doesn't seem to work with labels with more than one word. Any suggestions? I tried it with the words hyphenated and without. Reply feel good 12/29/2013 thank you so much Reply Malayala Masika 12/31/2013 i wnt the number of post displayed 31. but shows only 25. how can i display 31 posts on each label. Reply Anonymous 1/12/2014 This doesn't work well. It shows up once in a while, but usually the area where it is supposed to be shown in the sidebar, there's just a blank space. Reply حمادة حسن اللق 1/14/2014 thank you for this valuable tutorial. how can i make each category have different layout? Reply James Anderson 1/24/2014 thanks and I'm grateful to your for showing me such an excellent trick till now i have seen labels without thumbnail but today i solute you thanks again Reply Becky Reckelhoff 1/29/2014 I have used this on an older blog, and I'm using it once again on a new one. Rather than using it as a gadget only on the sidebar, I use it as pages. It seems to work fine. I'm interested in creating more than one column on the page, but not sure how to do it. If you could help me, that would be great. Thanks! Reply Replies Admin 1/31/2014 Hi Becky, You're asking about how to add two or more widgets side by side? Then, add the following div styles inside the HTML section of your page just at the beginning and the end of the script (step 5):

Script HERE

You can change the width of the container by modifying the 300px value. I hope this will work for you. Thanks for visiting! :) Anjana Narayanan 2/09/2014 thanks a lot! Reply Najid Baig 2/13/2014 Your blog is the best! Reply TuangthamDC PrukpramoolDC 2/16/2014 great help! thank you :) Reply TuangthamDC PrukpramoolDC 2/16/2014 i wnt the number of post displayed 31. but shows only 25. how can i display 31 posts on each label. please help Reply Becky Reckelhoff 2/17/2014 Please refer to comment 52 above... I don't want separate widgets next to one another. I would like to have columns within the same widget for a single label. What changes would I need to make? Thanks again :) Reply Ben Smith 2/20/2014 Is there a way of embedding this widget on a page? Reply BureauSF 3/07/2014 Nice! I was scouting the web for days, after all old label/thumbnail gadget stopped working - this one works like a charm! Question: is there a way to expand the gadget beyond 25 featured posts? I set number of posts to 80 posts, but only the 25 most recent will show up ... Reply next