Blogger Tips

How to Increase Thumbnail Resolution on Blogger

When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigger using only CSS. However, with a bit of JavaScript we'll be able to replace the thumbnail with the same image of higher resolution and this way, larger images will no longer appear blurry.

In this tutorial we will see how we can replace the default thumbnail size of the popular posts widget even though we can apply this trick on any of the blog widgets.

Demo Blog.

Changing the Thumbnail Size for the Popular Posts Widget

Step 1. First, let's add the Popular posts gadget by going to Layout > click on the Add a gadget link and select Popular Posts from the popup window.

Step 2. Next, go to Template > click on the Edit HTML button > click anywhere inside the code area and press CTRL + F keys to open the Blogger search box.

Step 3. Type or paste the following tag inside the search box then hit Enter to find it:

</head>

After you found the </head> tag, add this CSS above it:

<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 130px;
margin: 0 0px 5px;
overflow: hidden;
width: 210px;
border: 2px solid #EEEEEE;
border-radius: 20px;
}
.PopularPosts .item-thumbnail img {
position: relative;
top: -30px;
transition:all .2s linear;
-o-transition:all .5s linear;
-moz-transition:all .2s linear;
-webkit-transition:all .2s linear;
}
.PopularPosts .item-thumbnail img:hover{
opacity:.6;
filter:alpha(opacity=60)
}
.PopularPosts .widget-content ul li {
background: #F9F9F9;
border: 2px solid #EEEEEE;
border-radius: 10px;
box-shadow: 0 4px 10px #EEEEEE;
color: #555555;
padding: 10px;
margin-bottom: 5px;
}
.PopularPosts .item-title {
clear: both
font: 14px Cambria,Georgia, sans-serif;
color: #2288BB;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
.PopularPosts .item-snippet {
display: none;
}
.widget .widget-item-control a img {
height: 18px;
width: 18px;
}
</style>

Step 4. Now search for this tag:

</body>

... and just above it, add this script:

<script type='text/javascript'>
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/w72-h72-p-nu/g,"s"+size+"-c");
var thumbnails = blogGadget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){
thumbnails[i].width = size;
thumbnails[i].height = size;
}
}
changeThumbSize("PopularPosts1",210);
</script>

What I highlighted in red is the widget ID for the Popular Posts gadget. To change the thumbnail size for any of your blog widgets, first you need to find the gadget/widget ID and then add a line below this part:

changeThumbSize("PopularPosts1",210);
changeThumbSize("widget-ID-HERE",210);

... and replace widget-ID-HERE text with the ID of that widget/gadget.

Note: you won't see the changes if the widget has a class selector - for this you may need to change class with id and replace the dot "." symbol with "#" within the CSS...

If you don't know how to find the id of a particular widget, please check out this tutorial on How to Use Firebug to Design a Blogger blog.

Step 5. Finally, press the Save Template to save the changes. And that's it!

- 5 Best Popular Posts Widgets For Blogger
If you're using Blogger as the platform for your personal or business blog, you're probably looking for ways to customize it and make it your own. This way, you'll make your webpages unique and eye-catching and ensure they'll stand out...

- Display Blogger Posts In Grid View With Thumbnails
Grid View with Thumbnails is a script for self-hosted Blogger blogs which will display blog posts as a thumbnail grid of images in homepage and archive pages. Instead of sending your blog visitors to a page that displays all the posts in full length with...

- Advanced Random Posts Widget For Blogger With Image Thumbnails And Snippets
When your blog has too many posts, visitors don't always have the time or desire to go through all the posts written there in order to make an idea of the blog's content. Thus, a random posts widget that will allow visitors to find content more...

- Popular Posts Widget For Christmas
The Christmas countdown has begun and while homes are decorated with colorful lights and the sweet smell of pine trees, there's no reason why we wouldn't decorate our Blogspot blog with Christmas bells next to the Popular Posts widget for Blogger!...

- Show Recent Posts With Thumbnails For Particular Label Or Category In Blogger
Sometimes we want to have everything organized, so that our readers can find topics of interest more easily. To accomplish this, instead of putting a widget with the latest posts, we can put together the latest entries sorted by category, so that we'll...

Blogger Tips