LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Tricks » How To Increase Blogger Feed Thumbnail Image Size From 72px?

How To Increase Blogger Feed Thumbnail Image Size From 72px?

How To Increase Blogger Feed Thumbnail Image Size From 72px?

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, Related Posts, Random Posts and all other widget that fetched the blog post images from your blog feed have a pre-specified maximum size (72px Squared) that is not changeable through any settings.

Why To Use This?

As you know that in related, random, popular posts widgets fetch your blog data from your feed that has some limitation. One of the most important limit is that your blog feed provide you 72px*72px image on your blog post only that look too small in or widgets. We resize our these widget images in css line #related_post img {width:100px;height:100px} and got succeeded but this code results to stretch images that look so ugly as you know because actual image that feed is providing is 72px and we manually stretch it to 100px.

Limitation:

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. So you must have to upload your images to your picasa web album or you can use blogger image upload option too because it also upload your image to Picasa Web Album.

Recommended For You:
How To Make All Links Open In New Tab In Blog And Website?

What This Code Will Do?

This code just attach on your image url that will be like http://1.bp.blogspot.com/-xxxxxxxxxx/s72-c/Your-Image-Name.jpg and will see the s72-c code that is acctuall your image size menas 72px*72px. Now this code will replaced this s72-c code with s100-c so now your image will be big from feed that mean that your image quality will be like 100px image.

Here we are going to share the hack from that you can increase and resize your 72px image without loosing any quality in your thumbnail. So just follow the given steps and before proceeding, have a look on its other features too that will help you to understand this code.

Features:

1.) Simple JavaScript Code.
2.) No External File Linked.
3.) No JQuery Added.
4.) Will Not Intercept Your Other Codes.
5.) No Previous Codes To Change.
6.) Quick To Load And Easy To Add.
7.) Cross Browser Support.
8.) No Permission Required To Run JavaScript.
9.) Will Resize Your All Images Of Your Blog Feed.
10.) Work On Blogger Feed.
11.) Will Not Stretch Your Image.
12.) Quality Of Picture Will Be HD After Resize.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog“.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now “Click” Within Code Box.
6.) Press [CTRL+F] To Search Your “Related/Random/Popular/ETC” Code.
7.) Now “Copy” The Below Code And “Paste” It After There Code..
8.) Click “Save Template” And Done.

<script type='text/javascript'>
//<![CDATA[
/*
EXE-Blogger Feed Image Resize 1.0
Copyright (c) 2013 EXEIdeas International.
*/
function resizeThumb(e,b){var c=document.getElementById(e),d=c.getElementsByTagName("img");for(var a=0;a<d.length;a++){d[a].src=d[a].src.replace(/\/s72\-c/,"/s"+b+"-c");d[a].width=b;d[a].height=b}}resizeThumb("YOUR-DESIRED-ID",100 );//]]>
</script>

 

Customization:

1.) Change YOUR-DESIRED-ID With Your Related/Random/Popular Post Main DIV ID Name.
2.) Change 100 With Your Desired Custom Image Width And Height.
3.) Save And Done.

Last Words:

That's all we have. If you have any problem while installing this code in your blogger template then feel free to contact us with full explanation of your problem. We will reply you as time allow to us. Don't forget to share this with your friends so they can also take benefit from it and leave your precious feedback in our comment form below. Happy blogging, See you in next article...

You Like It, Please Share This Recipe With Your Friends Using...

17 Responses to “How To Increase Blogger Feed Thumbnail Image Size From 72px?”

  1. Anonymous says:

    Thanks Hassan for sharing such an awesome hack. I am personally using css trick but that is decreasing my image quality but now I can do it in HD way. Waiting to see other posts from you…

  2. marioeca says:

    Hi, will it work for the og:image Facebook Open Graph metadata? Facebook always takes the cropped image in 72×72 when I try to share a link. 🙁

  3. Sam says:

    is it work for meta property ? like meta expr:content=’data:blog.postImageThumbnailUrl’

  4. Pixorials says:

    Thanks, it worked! And… if you would prefer a rectangle instead of a square image, simply put a DIV around the image and set the full width (CSS), and then set the height of the DIV around the image and add overflow: hidden to the CSS. That way, the whole image will be there but you will only see the top portion of it, resulting in a rectangle as opposed to a square image! Took me a while, but I learned it the hard way–trial and error! 😀

    • EXEIdeas says:

      Welcome Here And Thanks For Using And Sharing Other Tip Too For Upcoming New Comers. Be With Us To Get More Codes Like This…

    • Suzanne Meira says:

      First of all, Thank you Muhammad for this script ! When I changed the size of the random posts thumbs they turned blurry and thans to you they look sharp now unlike other scripts I tried !

      Just like Pixorials, I need my thumbs to be rectangle shaped, so I changed the dimensions, but parts of the images are “cut off”. I read that you know how to make this work properly using css Pixorials, but I don’t understand how excactly. Could someone pleeaase explain 🙂

    • Lana says:

      It’s really easy to get rectangle thumbnails that are NOT distorted with this script. All you have to do is 1) set the img width in pixels in both the CSS and the hack (script) #related-posts img {width: 150px} 2) set the img height to auto in the CSS #related-posts img {height: auto} 3) remove the last “-c” in hack (script) and you’ll get perfect rectangular thumbnails that are proportional all the time! hope this helps 😀

    • Muhammad Hassan says:

      For Rectangle Style, Your Images Should Be Rectangle Too. Increase The Size Upto Image Width And You Will Get Rectangle Without Cutting Anything…

  5. Taliferrue says:

    Is this a fix that can be applied to the blogroll widget? If so how would I do this?

    Thanks in advance.

  6. Luc13 says:

    It works fine (actually it’s the only one I found that actually works), but unfortunately it increased the size also of the small png icon at the bottom of the widget that’s the quickedit links! How can I select just the thumbnail inside the widget and not this icon?

  7. Ashutosh says:

    o bhai maaro,,,, gajjab bro, thankyou

Leave a Reply to Anonymous Cancel reply

Your email address will not be published. Required fields are marked *