Saturday, July 7, 2012


Resize Blogger popular post thumbnails

I got a question in a comment how to change the thumbnail size in Blogger popular post gadget, in my Trim Blogger popular post snippets right article. Here's how to do it, hack is similar to my previous popular post hacks.

You must have jQuery loaded in your page for the script to work. Check your template, and if it does not have jQuery, insert this before </head:>
<script src='' type='text/javascript'></script>

You can install this hack by adding an extra HTML/Javascript gadget in your sidebar, or paste the code to an existing gadget. The gadget must be after the popular posts gadget! Or you can put this code in your template's html, just before </body>. If you have my other popular post hacks, like shuffle, shuffle and limit or Trim Blogger popular post snippets right, you can put this code in the same place, after those hack's code.

In the script there is the variable var newSize = 100; which defines the new size for thumbnails. You can set the new size smaller or bigger than the default size, which is 72.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text


Anonymous said... [reply]

nice idea, good job

Taufik Nurrohman said... [reply]

Hey, MS-potilas. I have the untested one (without JQuery) but I think this will work too :)

function resizeThumb(size) {
var popularPost = document.getElementById('PopularPosts1');
var image = popularPost.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/g, "\/s" + size + "-c");
// Resize to 200 × 200

Check this demo:

Taufik Nurrohman said... [reply]

@Taufik Nurrohman Ops, and because the popular post thumbnails have the width and height attribute, so:

image[i].src = image[i].src.replace(/\/s72\-c/g, "\/s" + size + "-c");
image[i].width = size;
image[i].height = size;

MS-potilas said... [reply]

@Taufik Nurrohman
Hi, thanks for this javascript solution. Some notes: You could also get the previous size from image: var oldSize=image[i].width; and use it in the replace. But the default size seems to be 72 on many templates. Regular expression does not have to have "g" flag, the size is in the url only once.

MadEagles said... [reply]

Can't get different width and height for a thumbnail.. like 200 x 100
help please .. thanks

MS-potilas said... [reply]

@Narendra kumar
Post thumbnails are always square, they have the /s72-c/ in the img path. Non square images would require changing the html markup so, that the square image could be displayed in the wanted size. Here's how to "crop" images using CSS: Faux Crop any size image with CSS. So it is not possible with this hack, it would require another hack. said... [reply]
This comment has been removed by the author. said... [reply]

How do I get this to work on search/label pages? I tried wrapping the thumbnail with a class called post-searcharchivelabel and changed your script from this:

$(".popular-posts .item-thumbnail img").each(function()

to this:

$(".widget .post-searcharchivelabel img").each(function()

but it doesn't work. I added the jquery before the /head and added your script right before the /body said... [reply]

Okay. I got it to work but all this script does is add a width and height attribute to the image, which I can do by simply adding "width=100 height=100 to the proper img tag in the template code. I'd like to hardcode change the displayed html from s72-c to s100 so the image isn't blurry.

MS-potilas said... [reply]

@Artemisia Moltabocca

this script also changes the image src attribute in line 10. Script assumes that image has width attribute, as popular post thumbnails do, because the script gets the old size from that attribute. If applied to some other images, there might not be that width attribute, then you could add it to html, or simply change line 8 to:

var oldSize = 72;

(or whatever the image width is before)

Unknown said... [reply]
This comment has been removed by the author.
Alessandra said... [reply]

Você tem ótimas dicas e tutoriais!Parabéns!!
E obrigada pele ajuda.


Unknown said... [reply]

MS politas, can you tell me how I can apply this to the featured post widget?

I tried to look at the code to find the .ico name but it all looks like spaghetti to the non-programmer!



MS-potilas said... [reply]

@Laura Pazzaglia
Try changing line 7 to:

$("div.bp_item_thumb img").each(function() {

Hope it works :)

Admin said... [reply]

In my blog, there are many popular posts IDs: PopularPosts1, PopularPosts2, PopularPosts3. I want to resize all thumbnails of them, what should i do. thank you

MS-potilas said... [reply]

you seem to have the same class for each popular post widget, that is "PopularPosts", other classes seem to be the same, so you should change line 7 to:

$(".PopularPosts .item-thumbnail img").each(function() {

Admin said... [reply]


Yeah, thanks you, it works fine.

faisal said... [reply]

lol and Funny, Troll Images, Prank Peoples, Funny Peoples, funny planet, funny facts, funny cartoons, funny movies pics, iphone funny, funny jokes, Prank Images, Fail Pictures, Epic Pictures, Lols and Gags, Lol Pictures, Funny Pictures, Lol is the Laugh out of Laugh where you can Fun Unlimited and Laughing Unlimited.

Unknown said... [reply]

great post! thank you! do you know how to get title under the image instead of at the right hand side?
thank you!

MS-potilas said... [reply]

@Sarah Los
One way to alter the order of the elements is to edit the template, but you need some experience. Go to Design, Edit template html, select Jump to widget -> PopularPosts1. There are four sections in the widget code, you'll probably want to edit the last one, "(4) Show snippets and thumbnails".

Unknown said... [reply]

the image in the popular post widget is blurry? did I do something wrong? Thanks so much for your help! @MS-potilas

MS-potilas said... [reply]

@Sarah Los
Hi Sarah, if you give me your blog address I can take a look if the script works. :)

Unknown said... [reply]


Hi. Thanks for this post.

My popular post images seem to be blurry as well.

Any suggestions?

MS-potilas said... [reply]

@Christine Beeman

the images are blurry, because they are in photobucket instead of picasa/google+. They are now just enlarged thumbnails.

You could try following:

After this line:

$(this).attr("src", $(this).attr("src").replace("/s"+oldSize+"-c/", "/s"+newSize+"-c/"));

Add this line:

$(this).attr("src", $(this).attr("src").replace("/th_", "/"));

It should replace the thumbnail with the full image.

Taufik Nurrohman said... [reply]

You can now use the built-in function called resizeImage from Blogger:

<img expr:src='resizeImage(data:post.thumbnailUrl, 200, &quot;1:1&quot;)'/>

Twinkler said... [reply]


Pak wendi said... [reply]

assalamualaikum wr,wb
Ki nawe… saya Pak Wendi,tki di malaysia
mengucapkan banyak2 terima
kasih kepada ki.Nawe
atas dana ghaib yang
kemarin aki berikan alhamdulillah ternyata itu benar2 ada
dan berkat bantuan
ki nawe saya bisa
melunasi semua hutan2
orang tua saya yang ada di
BANK BRI dan bukan hanya
itu AKi NAWE alhamdulillah
sekarang saya sudah bisa
bermodal sedikit untuk
mencukupi kebutuhan
keluarga saya sehari2. itu
semua berkat bantuan KI NAWE sekali lagi
makasih banyak yah KI NAWE…
yang ingin merubah nasib
seperti saya hubungi KI NAWE di nomor
0852-1837-9259 dijamin
100% ada atau silahkan

Unknown said... [reply]

I think I've found a nice informative blog after searching a long time. Thanks for your great articles and information, Its very Helpful for everyone.The contents are quiet interesting. I will be waiting for your next post
Add Custom Featured Image in Blogger | How to Create your Own Logo Online for Free

Anonymous said... [reply]

You share nice tutorial related blog, which give me some good ideas in creating my own blog, For More Popular Posts widgets you can
Visit my blog here

Xplore IT Corp said... [reply]

Hey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
advanced java training in coimbatore
best java training in coimbatore

Mysore To Coorg Tour said... [reply]

Amazing Article really happy to say it was an interesting post Information Is Asama. Thanks For Sheering. This Is Pradeep From Mysore To Coorg Cab .

Mark Jonson said... [reply]

Nice to read your article! I am looking forward to sharing your adventures and experiences.

Car Rental in Goa
Self Drive Cars in Goa

jamygrey said... [reply]

Very nice blog post you have shared here thank you very much for posting such kind of blog post.

Bike Rental in Goa
Rent a Bike Goa
Bike Rental Service in Goa

ordansmith said... [reply]

This blog was really helpful for me. Hope you will write more and publish.

Bike Rental in Goa
Rent a Bike Goa
Bike Rental in Goa Airport

Anirban Ghosh said... [reply]

It resembled an extraordinary treat shouting out to me to eat it. This is acceptable substance.
SAP training in Mumbai
Best SAP training in Mumbai
SAP training institute Mumbai

BestTrainingMumbai said... [reply]

I consistently wouldn't be so associated by any articles identifying with this subject, yet yours got my attention.
SAP training in Kolkata
Best SAP training in Kolkata
SAP training institute in Kolkata

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: