How to Resize popular post thumbnails Using jQuery in blogger



A common frustration, and one we too shared, was the limited sizes that thumbnail images can be displayed as. Widgets such as the Popular Posts widget have a pre-specified maximum size (72px squared) that is not changeable through any settings.

Using the wonders of JQuery we've developed a way for you to easily change the dimensions of these images without losing any quality in your thumbnail. To make it work simply copy and paste the clean version of the code below into your template before the </body> of your HTML. Change the value of "dimension" in the code to be the pixel size that you want the thumbnail to be. This code assumes that you're using Picasa, the default for Blogger image storage, for your blog's photos; if you're using some other 3rd party this won't work.
Step:-1

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='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script>

Step:-2

  • CTRL+ F to find </body> in your blogs HTML

  • Copy and paste code below  into your template before the </body> of your HTML.

<script type='text/javascript'>
//<![CDATA[
// Change Blogger popular post thumbnail size using jQuery / MS-potilas 2012
// Put this code in a html/javascript gadget (after popular posts gadget), or before </body>.
// See http://gj37765.blogspot.com/2012/11/how-to-resize-popular-post-thumbnails.html
var newSize = 100;  // this is the new thumbnail size, you can change this
$(".popular-posts .item-thumbnail img").each(function() {
var oldSize = $(this).attr("width");
$(this).attr("width", newSize); $(this).attr("height", newSize);
$(this).attr("src", $(this).attr("src").replace("/s"+oldSize+"-c/", "/s"+newSize+"-c/"));
});
//]]>
</script>

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.



masood

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

2 comments:

  1. Great, Works like a Charm, I've been trying to figure out how to do this over 2 weeks now. This took me 2 mins.

    Thank you
    www.irobotgaming.com

    ReplyDelete
  2. It didn't work for me. I found a simpler solution and wrote a tutorial:

    http://tudor-anghelina.blogspot.ro/2013/10/how-to-easily-resize-blogger-popular.html

    ReplyDelete