Blogger Recent Posts + Thumbnails with Custom Size

Normally "Blogger Recent Post with Thumbnails" widgets display SQUARE images, because Blogger store the data of post thumbnails as 72x72(px) image in the blog feed. So I wrote a widget, which can modify the size of thumbnails, to make images look better.

It's believed that the image in RECTANGLE looks better than in SQUARE, so setting the size of thumbnails in "Golden Ratio" (around 1:1.6) would be a good idea (or any ratio you prefer).

(pic from: pixabay.com)

1. PREPARATION

Before installing this widget, please read some instruction firstly:

If the FIRST image of your posts is uploaded from Blogger post editor, then Blogger can generate post thumbnail in the blog feed.
If the FIRST image of your posts is hosted from other services, such as "Flickr", then Blogger can't generate post thumbnails.
If one post has no post thumbnail data in Blogger feed, then this widget can't generate thumbnail either.
When there is no thumbnail for one post, you could set default image for such post to display.

2. INSTALLATION CODE

Please refer to the following steps:

• Go to Blogger Dashboard → > Layout
• Click on Add a Gadget > HTML/JavaScript
• Copy and Paste the code below:

If using the default value for parameters, just save then you can enjoy this widget.

If you would like to modify the default values, please refer to the LETTER NAME above:

A: Please refer to "The Tips on How to Link to JQuery Files" and check if you've installed jQuery in your Blogger template. If so, just remove the code of this line. If you're not sure, then keep this line.

F: the number 1 means to show posts from no.1 post

G: the red number 5 means to show 5 posts per page

H: the width of thumbnail image (in pixels)

I: the height of thumbnail image (in pixels)

J: replace the blue image url with your custom no-image thumbnail url

K: if you don't want to show the information about the total number of blog posts, just change as "N".

L~M: customizing the logo of the next / previous page, you could refer to 「copypastecharacter.com」for more characters.

N~O: you could customize relative string

T~CQ: if you're familiar with CSS, just modify the default values on your own.

3. INSTRUCTION

If you find this widget couldn't display any post, please follow the steps below to check:

A. Go to Blogger Dashboard > Settings > Basic > Permissions > Blog Readers > be sure it's "Public" here

B. Go to Blogger Dashboard > Settings > Basic > Other > Site feed > Allow Blog Feed > be sure it's NOT "None" here.

C. If the setting above is "Custom", be sure the settings of [Blog Posts Feed] is NOT "None".