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

Sometimes we want to keep things organized to make it easier for our readers to find topics. To achieve this, instead of posting a puzzle with the most recent posts, we can collect the most recent posts sorted by category so that we display the most recent posts for each tag we want, as well as a thumbnail for our category.

Follow these steps to add this tag to the most recent posts by tags or categories on a Blogger blog:

Recent thumbnail posts sorted by tag

Step 1: In the Blogger dashboard, go to the Template section and click the Edit HTML button.

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

]]>

File Bo ]]> , paste this CSS style:

/ * Recent posts by tag
---------------------------------- * /
img.label_thumb {
discs: left;
right margin: 10 pixels! important;
height: 65 px; / * Sketch height * /
width: 65 px; / * Reduced screen width * /
limit: solid 1px #fff;
-webkit-radius-border: 10px;
-moz-radius-edge: 10px;
border radius: 10px;
-webkit-box-hije: 0 1px 1px rgba (0, 0, 0, .4);
-moz-box-hije: 0 1px 1px rgba (0, 0, 0, .4);
kuti-hije: 0 1px 1px rgba (0, 0, 0, .4);
}

#label_with_inches {
discs: left;
width: 100%;
minimum height: 70 px;
margin: 0px 10px 2px 0px;
filling: 0;
}
ul # finger_label li {
fill: 8 px 0;
minimum height: 65 px;
background difference: 0 px;
In conclusion: 1 pixel with dot # 999999;
}

#label_with_inches if {
list style: no;
left fill: 0 px! important;
}

#label_with_thumbs to {text conversion: uppercase;}
#label_with_thumbs forte {padding-left: 0px; }

Step 3. Now try to find this marker:

... bo clean add this script:

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

Update! For better image resolution, add this character above Brand:

Now save the template to finish editing.

So we added some CSS to style the puzzle and a script to make it work. Now we just have to add the puzzle code to the blog sidebar in the HTML / JavaScript device:

Step 4. Go to the "Layout" section - click "Add Gadget".

Step 5. Select the HTML / Javascript puzzle in the window that appears and paste this script in the blank box:

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

The newer code has these parts that can be customized: change from true to false or vice versa:

var numposts ← Number of posts to display
hang post thumbnail ← Show / hide thumbnail
var displaymore faq Show or hide multiple links
var show delimiter ← Show / hide the delimiter
var showcommentnum faq Show / hide the number of comments
var showpostdate faq Show / hide post dates
var showpostsummary Show or not publish summaries
var numchars ← Number of characters in the post (change the value to 100 here)

Note that the device shows the most recent posts from a specific tag ... so if you want to see the most recent posts from other tags, repeat step 5 for each additional category you want to add.

That's it :) Have fun!