HOW TO ENLARGE YOUR POPULAR POSTS THUMBNAILS

Every once in a while I get people emailing me or tweeting me asking about how to do this or that in terms of blog designing. The question that I get asked most frequently is how I got my Popular Posts widget to look the way that it does. The popular posts widget that comes with Blogger, for most people, leaves something to desired. I have no idea why Google hasn't updated some of their most basic widgets to get them looking, you know, not like they're still hanging out in the 90's, but they haven't. At any rate, this presents me with the opportunity to in turn present to you a “how to make your popular posts widget look good with big pictures and writing below and all that good stuff and junk” tutorial. Nailed the description I think.

This method actually uses the Blogger Popular Posts widget with a few tweaks. So if you're already using the widget, no need to abandon ship. And if you're not already using the widget, now's the time to add it to your layout. Credit goes to Helplogger for the bulk of this tutorial. I merely made a few CSS adjustments to get it looking spic and span.

Step 1. Back up your template.

Step 2. Go to the dashboard and select the “Layout” tab. Click “Add a Gadget” wherever you'd like it to be. Add the “Popular Posts” widget, making sure to select “image thumbnail” from the options, deselect “snippet” and choose how many posts you'd like displayed.

Step 3. Go back to the dashboard and select the “Template” tab, then click “Edit HTML.” Once you're inside the template editor, click inside the text box and search (control + F) for this tag:

</head>

Just above it you need to paste this code:

<style type='text/css'>
.PopularPosts .item-thumbnail a {
clip: auto;
display: block;
height: 180px;
overflow: hidden;
width: 240px;
margin-left: -10px;
}
.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 {
color: #555555;
}

.PopularPosts .item-title {
clear:both;
font: 10px verdana;
color: #222222;
text-transform: uppercase;
text-align: center;
margin-right: 10px;
}

.PopularPosts .item-snippet {
display: none;
}

.widget .widget-item-control a img {
height: 18px;
width: 18px;

}

</style>

Step 4. Still in the template editor, you next need to search for this tag:

</body>

Just above it you need to paste this code:

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

Step 5. Now there are a few minor adjustments to make. First you need to set the size of the thumbnail to whatever you desire. Do that by altering the figures in red.

*Important: you need to make sure the figure in red in the second portion of the code is the same as the width of the figure in the first portion of the code otherwise the thumbnail won't adjust in size properly.

Step 6. Now that your thumbnail is the size that you want it to be you need to adjust the alignment in order to center the widget. Unfortunately, as this widget is composed of “list” elements, it's not possible to simply set a center alignment.

So first you need to adjust the figure in blue in order to align the thumbnail how you want it.

Step 7. Next you need to adjust the figure in pink in order to align the title how you want it.

Step 8. Click “Save Template” and check out your newly beautified popular posts widget!