Blogger Popular Post Widget + Resize Thumbnail Image With Real Size

The official Blogger popular post widget, comes with 72x72(px) square thumbnail. It's believed that many users want to resize the thumbnail as desired, such as 100x100(px) in square, or 200x120(px) in rectangle.

You might find some CSS tricks from the internet, which can resize the thumbnail. Changing the width / height of an image by CSS can only make the image looks larger, but the real size of the image doesn't change. Therefore, the image will look unclear(maybe look like mosaic).

I made this tool which can resize the Blogger popular post thumbnail in real size, and it also includes some other features as below. If you would like to install this tool directly, please jump to "II. Preparation".

(pic from: magicmockups.com)

I. Features

• Customize the width and height of the thumbnail with any size you need
• If one post doesn't have thumbnail, this tool can set the default thumbnail image
• With nice image frame
• Easy installation: don't need to hack the Blogger template

II. Preparation

Before editing the template, if this is your first time to install my widgets, it's recommended to read 「How to backup Blogger template」before continuing.


1. Find widget ID

Go To Blogger Dashboard → Template → Edit HTML → Click into template area → Press Ctrl-F to search the string of your popular post widget title (such as "Popular Posts")



Please refer the red square in the image above, remember the string of your widget ID, usually it will be "PopularPosts1". Later we'll use this ID string.


2. Install jQuery + CSS

In Blogger template, please continue to find the string </head>;, and paste the following code just before this line:

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js' />
<!--Popular Post-->
<style>
#PopularPosts1 {
display: none;
}

.PopularPosts .item-thumbnail {
margin: 0 10px 5px 0;
}

.PopularPosts img {
margin: 0;
padding: 4px;
background: #FFF;
box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, .3), 0 0 40px rgba(0, 0, 0, .1) inset;
opacity: .9;
}

.PopularPosts img:hover {
opacity: 1;
}
</style>
For the green text in the 1st line, 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.

The format of the red string is "#" + your popular post widget ID. Please check if the ID string is what you find in your Blogger template.

If you're familiar with CSS, you could customize the code between style tag.

III. Installation

Still in Blogger template, go on to find the string </body>. Then, insert the following code just before this line：


When modifying the default values, please refer to the alphabetical character above:

E：Please check if the red string match your popular post widget ID

F：Set the width of thumbnail images

G：Set the height of thumbnail images

H：Replace the blue string with your desired default thumbnail image url. If there is no thumbnail for the post, this widget will display default image instead.

After saving the template, you'll see the result.

VI. FAQ

Q1: Why some posts can not display thumbnail correctly?

Ans: The first image in the post will become thumbnail automatically. Please check if your first image is uploaded from Blogger post editor, which means the image will be stored in PICASA. If not, then the thumbnail might not be displayed correctly.