How To Resize Popular Post Thumbnails 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 Po...
2018-02-18T14:14:59Z

How To Resize Popular Post Thumbnails 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.

RESIZE POPULAR POST THUMBNAILS

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

HOW TO RESIZE POPULAR POST THUMBNAILS USING JQUERY IN BLOGGER


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='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'/>
Don't add this if you are already using any jQuery.js file

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://solvelogger.blogspot.com/2016/08/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.

OR

<script type='text/javascript'>
$(document).ready(function(){$(".item-thumbnail").find("img").each(function(b,a){a=$(a);a.attr({src:a.attr("src").replace(/s72-c/,"w250-h100").replace(/default/,0)});a.attr("width",250);a.attr("height",100)})});
</script>

Modification/Option

  • Change width w250 to as your width
  • Change height h100 to as your height
  • Change YouTube thumbnail from 0 to other like hqdefault,mqdefault,sddefault,maxresdefault
  • Change 250 and 100 if you want to increase width and height inside img tag

HOW TO RESIZE POPULAR POST THUMBNAILS USING JAVASCRIPT IN BLOGGER


First, go to Template >> click on the Edit HTML button >> click anywhere inside the code area and find (press CTRL + F) </body> tags and paste this code above this tag

<script type='text/javascript'>
//<![CDATA[                    
function changeThumb(widget_id,w_size,h_size,y_size){
var blogWidget = document.getElementById(widget_id);
var replaceHTML = blogWidget.innerHTML;
blogWidget.innerHTML = replaceHTML.replace(/s72-c/g,"s"+w_size).replace(/default/g, y_size);
var thumbnails = blogWidget.getElementsByTagName("img");
for(var i=0;i<thumbnails.length;i++){ 
thumbnails[i].width = w_size; 
thumbnails[i].height = h_size; 
}
}
changeThumb("PopularPosts1",210,100,0);
//]]>                     
</script>

Modification/Option

  • You can also change PopularPosts1 to any othe widgets if that has image too
  • Change width 210 to as your width
  • Change height 100 to as your height
  • Change YouTube thumbnail from 0 to other like hqdefault,mqdefault,sddefault,maxresdefault

If you like this you can share this post or comment below if you have any problem regarding this post
Share it:

Blogger

Blogging

How To

Tutorial

Post A Comment:

0 comments: