Carrie Loves

Life. Love. Design.

How to make all post images the same size

Pin2Google+

How to make all Blogger post images the same size - Carrie Loves Blog

One of my favorite sites I bookmark for code snippets was down today (insert curses here) and I was back to square one with finding out how to do something… that something was making all of the images in Blogger posts the same size… with the exception of the Pinterest pin it button – how awful is it when you resize your images and your pin it button is enormous?!?!

Very awful indeed.

So if you ever wondered how to make this happen, here is the code you need to slip in to your template to make all of your images the same width, sans the pin it button:

If you’re not familiar with the template code the best place to add it would be in Template > Customize > Advanced > scroll down to Add CSS > paste code in the window > Apply to Blog.

Note: for my Blogger templates I use the pin it button code from bloggersentral.com, if your code is from somewhere else the image code may differ, let me know and I’ll slip that code in to the comments for everyone.

*Change the 640px to whatever the width of your blog post is.
*Change the 125px to whatever the width of your pin it button is.

And there you have it!

Enjoy.

Comments

  1. this is a good & pretty simple tutorial. how about other images that you want to remain small such as a small badge – I guess you would have to add some code to the image itself, right?

    have a great day.

  2. Hi Carrie! I’d recommend using a “max-width”declaration instead of “width”. A large fixed width will stretch and distort smaller images. Max-width prevents images that are oversized from exceeding the post area while keeping smaller images at their original size.

  3. Hey, thanks for the tutorial. This as well as all the others. I have one question though. I do not want to shrink the images, I am looking to do the exact opposite. When I upload images on Blogger, I choose ‘original size’. The issue I have is, the images only cross the post border on the right hand side, is there anyway the images in the post would cross over both the sides?

  4. Hey there! Thanks so much for all of your tips. I’m currently creating a blog using blogger , I wanted to see if you can help as I am stuck and cannot figure this out for the life of me! Lol

    I am trying to add different links to my site..similar to what you have on your home page. However I am confused on how to post under each tab, for example I was able to create an “about me” and “contact” Page but I cannot figure out how to post individual posts under the pages themselves without the post showing on the home page.

    Any tips would be much appreciated! Thanks Carrie! 🙂

  7. Hi, I have changed the code in my blog so now all of my pictures are the same size. This is great for pictures that have been taken horizontally, but any vertical pictures become stretched width wise (I’m still learning)
    How can I find this? X

    • Thank you so much for your help! I found I needed to just hit the space bar a couple times at the end of the code to get the ‘apply to blog’ button to highlight so I could click on it. I did have to play with the width size to get it to fit my template. So happy to finally find your tips. Now I need to fix the width of the text, and try some of your other blogger fixes. Thank you, thank you:-)

  10. What can you add to the css to center the picture? I changed it to your suggestion, but now its left justified.

  11. I tried to do this many times but nothing happens, is there another way to make my pictures larger? Thanks!

    Yiota
    pinkdaisyloves.blogspot.com

carrie loves design studio