How do you promote your posts in Blogger? You can easily show related posts underneath each of your individual posts for your readers. Or you can recommend most relevant content on your post pages. Else you can display most shared and recommended content on Facebook by adding Facebook Recommendation Box to your blog. By using these methodologies, absolutely you can grab more attention and increase page views for archived posts. In addition, Blogger let you show off popular posts within specified time range using official Blogger Popular Posts widget. If you already using Popular Posts widget on your blog, sometimes you may concern about its thumbnail size as it takes more space on your blog. Due to this reason, you may disable thumbnails. But rather than disabling it, would you like to change size of thumbnail images shown on Popular Posts widget?
Blogger Popular Posts widget let you show off your most popular content being reading and it will get more attention of your visitors too. So once a visitor landed on your blog, there is a more chance to explore your popular posts. However its thumbnails images are critical as they tend to catch visitor's eyes unless you highlight them for visitors. Else if you show them as just plain links with text, visitors may fail to see them too. However if the reason to disable thumbnails is its size, then you might wanna try this out and set thumbnail image size to a preferable size.
Steps:
1. Go to Blogger Dashboard.
2. Click on your Blog Title.
3. Navigate to Template tab.
Note: Before editing your template, you may want to save a copy of it. Read How to Back Up Your Template.
4. Click on Customize button.
5. Now you will be directed to Template Designer. Jump to Advanced.
6. On the next pane, click on Add CSS tab.
7. Now add one of following CSS style code snippet in the text area you find on the right pane.
Style 01
.PopularPosts img {
width: [Width of Thumbnail] !important;
height: [Height of Thumbnail] !important;
}
width: [Width of Thumbnail] !important;
height: [Height of Thumbnail] !important;
}
Style 02
Adding this style will affects on thumbnails in both Popular Posts and Blog List gadgets. If you are not using Blog List gadget, you can use this one without a doubt.
.item-thumbnail img {
width: [Width of Thumbnail] !important;
height: [Height of Thumbnail] !important;
}
width: [Width of Thumbnail] !important;
height: [Height of Thumbnail] !important;
}
Color Indication Information:
- Width of Thumbnail
Enter value for width of popular posts thumbnail in pixels.
- Height of Thumbnail
Enter value for height of popular posts thumbnail in pixels.
8. Click Apply to Blog button to make changes.
Special Mentions:
* Thanks elovelo for adding his suggestion at comment section on improving this tutorial.
Enjoy :-)
What if all I want to do is to move the popular post widget to another area in the blog, i.e. inside a post itself, or in a table somewhere else?
Popular Posts widget is an individual element and you just able to move it around by moving element on your layout or by editing your template. As I know, it doesn't let you embed or include in a post right away. Eventhough you find and add Popular Posts widget code to your posts, it won't render as it associated with Blogger layout tags. I didn't figure it out yet and if I found a way around, I ll post it here... :)
Cheers...
Its not so easy. First, doing it this way you change all image size with class .item-thumbnail, blog list posts for exapmle. It is better to use #PopularPosts1.widget img {} It works for specific PopulrPosts ID.
Second, you resize images which are saved in size 60x60px. It looks very ugly making them bigger, The question is how to change prepering thumbnails by blogger in bigger size than 60x60px?
Hi Mate,
Yeah, #PopularPosts1 can work out well :) But for some custom templates, they change the ID. Therefore it may not work in that occasions.
Oops... I wasn't aware of Blog List widget now showing thumbnail. Thanks for letting me know mate :) I'll mention it here.
lol :D Well, it's up to you to decide which size is better size for your blog. I know it's kinda resizing as Blogger pull out smaller thumbnail preview by default. As Blogger define layout tags, I have no idea yet how to fetch the bigger thumbnail preview mate.
Thanks for stopping by and for your suggestions :)
Cheers...