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!

  • Oh, I am so happy with this post cause I asked you this like a week ago! I will try it later (hope it works) but thank you in advance =)

    http://www.newinmakeup.com/

  • Thanks so much! I've just applied this to my blog and I love it! One question – do you know how I can create a bit more space between the pictures of the favourite posts?

    Isobel x

  • Thanks Holly that worked a treat! I love your blog design.. feel like doing some designing? 😉 x

  • Hey, try adding this under the line in pink:

    margin-bottom: 10px;

  • Been trying to find out how to do this for so long and everything I've tried has never worked! This was so simple! Thankyou so much 🙂 x

  • Just changed it on my blog! Thanks 🙂

  • I haven't added the popular posts widget because it looked so gross, but with this tutorial I might give it a try over the weekend, thanks! -Audrey | Brunch at Audrey's

  • Defiantly bookmarking this – thank you!

    Annabel ♥
    Mascara & Maltesers

  • As always your blop tips posts are so helpful! I used this HTML before but I made an error and I couldn't align the image as I wanted but now it looks perfect! Thanks! 😉

    http://atouchofpink1.blogspot.ca/

  • Sooo helpful and straight forward – thank you!

  • Thank you so much for this! I've struggled with Blogger's popular post widget so ended up abandoning is, so will definitely try your method out!

    Tessa at Bramble & Thorn

  • Thank you for this post! It's very helpful! But I have a question: Do you know how this post widget could work if you don't upload your photos in blogger? Because when I use for example flickr to upload the thumbnail isn't shown…

  • Yeah, I think it's probably because you're hosting your images on flickr. You're not able to get a thumbnail at all are you, as in not even the small original version? I don't know how to fix that issue at the moment, but I can try to look into it.

  • Wowah, you changed your template. I love the new look!

  • It looks awesome now. Good stuff.

  • … I'm intrigued. What did you have in mind?

  • I'll try to figure it out, but I don't know if it's possible.

  • No problem. It looks good on your site. I creeped on it.

  • It can be so hard to find good tutorials for Blogger. There's always a million things available for WordPress, but never for Blogger.

  • There must be something off with my code, I've done this on someone else's blog before when you first told me, but check out mine…just words. Hmph!

  • Ohhh that makes total sense! No worries my dear, it's not a big deal 😉

  • Thanks! 🙂

  • This is great! Thank you!

    Erin | Erin and Katherine Talk Beauty

  • Well I love your style and I'm sure I'll want a bit of blog design reshuffling soon… 😉

  • Sounds good 🙂

  • This is perfect! I had to try about 80 different sites before stumbling upon yours. Thank you so, so much!

    – Jenna
    vagabondatheart.blogspot.com

  • Hey Holly! I finally got around to adding the Popular Posts widget, thanks to your tutorial! I adjusted the blue and pink alignments, but it's still a little off. The thumbnail is where I want it to be, but the title isn't. I set blue to 20px and pink to 40px. I played around with changing pink to 20px and 60px, but neither fixed the alignment. I attached a screenshot!

  • You can fix it by adding this under the pink line.
    margin-left: 25px;

  • Thank you so much, that did the trick!

  • Such a fantastic post! I stumbled across it by chance and your instructions have worked a charm!

  • :)

  • This is amazing, thank you!! But for some reason it won't display photos that are from a URL, such as when I use Photobucket. It only displays photos that I've actually uploaded to Blogger. Any idea on how to fix that?

  • Thanks for this! Your tutorials always make it so easy 🙂 I already like the look of my blog so much better for changing this one widget!

    Lovely Witches

  • Thankyou so much for this! I was wondering if you knew how to change the thumbnail to a larger size if it isn't hosted on blogger? I use windows live writer and I don't think it hosts from picassa, I am getting a thumbnail, one that is even smaller than the standard popular posts one but I can't for the life of me work out how to adjust the width and height, any ideas?

    Thankyou so much for your time x

    Iqra |The Blushing Giraffe x

  • Thanks for this 🙂 I am just having a bit of a problem that my image is showing up ting in the top left hand corner… I have the red set on 360(my sidebar width), blue 20 and pink 40.. Any Ideas?

  • Are you sure you changed the width in two places? It looks like you need to change it in the second part of the code.

  • I went back and checked and i did change it… any other ideas?!
    thank you x

  • That's a wonderful tutorial, thank you sooo much! But I have a little problem with the way my icons are showing and they're not sqare… I mean http://store.picbg.net/pubpic/B7/3A/3dae1d8f29e2b73a.png How can I fix them and make them in a perfect shape like yours? Thank you 🙂

  • Looks like you have a border radius set somehow. You could try searching "border-radius" in your code and seeing if there is one under the popular posts section. If you link me your blog I might be able to help more.

  • I might be able to help if you link me your blog.

  • Try searching "72" in your code and I think that you'll find somewhere in your popular posts widget you have a height and a width set to 72 that you can change.

  • Thank you so so much for this! I absolutely hated the popular post widget and all the tutorials I kept seeing would make the widget even worse. It honestly feels great to have something that doesn't look clunky or obnoxious. Thanks again! I'll make sure to share this with my fellow blogger friends on Twitter.

    http://www.lauraneuzeth.com

  • I've been encountering the same issue. I can't seem to figure out what I've done incorrectly.
    aladyinwhite.com

  • i finally figured it out…. my id widget is popular posts2 not popular posts 1…so i just changed that bit of the code

  • This was such a helpful post, but there is one glitch I don't understand why the images look blurred/distorted in the thumbnail when they are high quality pictures.
    Samie|| Beautydetour

  • Thank you so incredibly much for this tutorial! I have wanted to change that ugly popular posts widget for so long but couldn't quite find any help on how to do it. Honestly, thanks a ton!

    darjeelingtealeves.blogspot.com