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

Sometimes we want things to be organized in a way that makes it easier for our readers to find interesting topics. Instead of inserting a recent posts widget, we can do this by collecting the latest posts sorted by category so that we can display the latest posts for any tag we want, as well as thumbnails for our categories.

To add this Latest Posts widget to a label or category on a Blogger blog, follow these steps:

Recent posts with thumbnails sorted by label

Step 1: Go to the Template section of the Blogger Dashboard and click the Edit HTML button.

Step 2. Click anywhere in the code area and find (CTRL+F) this piece of code:

]]>

Directly above ]]> , paste this CSS style:

/* Recent posts by tag
---------------------------------- */
imm. thumb_label{
Swimmer: left;
Right margin: 10px !important;
Height: 65px; /* sketch height */
Width: 65px; /* Sketch 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_thumb {
Swimmer: left;
Width: 100%;
Minimum height: 70px;
Margins: 0px 10px 2px 0px;
Warehouse: 0;
}
ul#label_with_thumb li {
padding: 8px 0;
Minimum height: 65px;
bottom margin: 0px;
bottom border: 1 pixel with dot #999999;
}

#label_with_thumbs whether {
list style: no;
padding-left:0px !important;
}

#label_with_thumbs a {text conversion: uppercase;}
strong #label_with_thumbs { padding-left:0px; }

Step 3. Now try to find this tag:

...right above add this script:

Note. To add your own photo to posts without a thumbnail, replace the blue image URL with your own.

Extend! For better image resolution add this script above Label:

Now save the template to complete the changes.

So we've added CSS to style the widget and scripts to make it work. Now all we need to do is add the widget code to the blog sidebar in the HTML/JavaScript gadget:

Step 4. Open the layout - click "Add Gadget".

Step 5. In the popup window, select the HTML/Javascript widget and paste this script in the empty space:

Note: where Label -Name should be the name of the label you want to display and if your label is case sensitive like in my example you should enter it like this.

In the last code, there are parts that can be customized - replace true with false or vice versa:

var numposts ← Number of posts to display
var showpostthumbnails ← Show/hide thumbnails
var displaymore ← Show or hide the "Read more" link
var displayeparator ← Show/hide delimiters
var showcommentnum ← Show/hide the number of comments
var showpostdate ← Show/hide post date
var showpostsummary ← Whether or not to show the post summary
var numchars ← number of characters for messages (here you need to change the value to 100)

Keep in mind that the gadget displays the latest messages of a certain label. Then, if you want to show the latest posts from another label, repeat step 5 for each additional category you want to add.

That's it :) Have fun!