2.03.2015

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!

47 comments:

  1. 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/

    ReplyDelete
  2. 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

    ReplyDelete
  3. Thanks Holly that worked a treat! I love your blog design.. feel like doing some designing? ;) x

    ReplyDelete
  4. Hey, try adding this under the line in pink:

    margin-bottom: 10px;

    ReplyDelete
  5. 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

    ReplyDelete
  6. Just changed it on my blog! Thanks :)

    ReplyDelete
  7. 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

    ReplyDelete
  8. Defiantly bookmarking this - thank you!

    Annabel ♥
    Mascara & Maltesers

    ReplyDelete
  9. 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/

    ReplyDelete
  10. Sooo helpful and straight forward - thank you!

    ReplyDelete
  11. 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

    ReplyDelete
  12. 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...

    ReplyDelete
  13. 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.

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

    ReplyDelete
  15. It looks awesome now. Good stuff.

    ReplyDelete
  16. ... I'm intrigued. What did you have in mind?

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

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

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

    ReplyDelete
  20. 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!

    ReplyDelete
  21. Ohhh that makes total sense! No worries my dear, it's not a big deal ;)

    ReplyDelete
  22. Well I love your style and I'm sure I'll want a bit of blog design reshuffling soon... ;)

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



    - Jenna
    vagabondatheart.blogspot.com

    ReplyDelete
  24. 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!

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

    ReplyDelete
  26. Thank you so much, that did the trick!

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

    ReplyDelete
  28. 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?

    ReplyDelete
  29. 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

    ReplyDelete
  30. 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

    ReplyDelete
  31. 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?

    ReplyDelete
  32. 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.

    ReplyDelete
  33. I went back and checked and i did change it... any other ideas?!
    thank you x

    ReplyDelete
  34. 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 :)

    ReplyDelete
  35. 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.

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

    ReplyDelete
  37. 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.

    ReplyDelete
  38. 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.


    www.lauraneuzeth.com

    ReplyDelete
  39. thanks. it's www.simplystacey.co.za

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

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

    ReplyDelete
  42. 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

    ReplyDelete
  43. 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

    ReplyDelete