Go Ahead Take A Bite

Tuesday, March 19, 2013

Bling Out Your Blog ~ How To Resize Your Photos In Blogger


(this is the first in a series for those of us without a web design degree, on how to work with HTML code and the Blogger Template Editor  ~ all tutorials will be for Blogger hosted blogs. It's not a bad idea to print this out, before you start.)

How To Resize Your Photos In Blogger

Hiya, Folks!

Welcome to my very first tutorial! You might have noticed some header and layout changes around here since your last visit. Don't worry... you're in the right place. (Please bear with me... It's a work in progress.)

I thought I'd start with one of the things that eluded and frustrated me the most when I began blogging; how to make the photos that I posted larger. Especially the photos on my food blog.

Not just a tiny bit larger. I wanted BIG. I kept seeing all of these gorgeous photos, jumping off the pages on my favorite food and DIY blogs and no matter how I worded my google queries, I just couldn't find the answer I was looking for.

Most of the hits that I got, simply explained how to use the regular "small, medium and large" options in the blogger editor. Um, duh! ~ I already knew that. Some of them explained how to enlarge photos in Photoshop or Paint. That's all well and good, but... 1) I didn't have Photoshop or Paint and 2) They didn't have sites like PicMonkey and iPiccy where you could just click on pre-loaded options and get the results you wanted. (if they existed, I wasn't aware of them)

I wish I could remember where it was that I finally found the information I was looking for, but I know it was another blogger who was kindly sharing her photo tips and secrets. Thank you unknown, kind blogger, wherever you are!

Before you begin, you'll want to decide whether to keep your blog at it's current dimensions, or change things like the width and layout. In case you don't know how or where to change/set the dimensions for your blog, these are the (simple) steps:

Go to "dashboard"
Select "template"
Next, select "customize"
Then, select "adjust widths"

A preview of your blog will pop up below the work area, so you'll be able to see the changes as you make them. You just slide the bar(s) to the left or right to achieve the desired width of each section of your blog. My layout here, is a 3 column layout and my dimensions are as follows:

Entire blog = 1180px
Left sidebar = 210px
Right sidebar = 210px

My other blog (click HERE to see the how it looks) is a 2 column layout and the dimensions are:

Entire blog = 1240px
Side Bar = 340px

Tip: Make sure to check the preview below the editing space, before you apply any changes to the blog. Make sure that your text and photos still fit into the main body and that your widgets, etc. fit into the side bar(s).

Once you're happy with the layout, click "apply to blog" at the top right of the page. The changes will not take place, until you do.

Next, choose "back to blogger".

You can go do that now, if you'd like.  I'll wait for you. ;~)

OK. Back to photo resizing...

Step 1. Upload your photo(s) to your post as you normally would.






This is what my photo looks like without changing the size. It's perfectly fine at this size, but it's lacking the "WOW" factor that I want.
Step 2.  Go to the top bar in your post editor and choose "HTML".  (Ok... I know it's scary if you've never done this before, but trust me... It's a piece of cake. Uh Huh... Really. It is.)

Don't worry.... It's OK. Go on... click that button! You can do it!! 
This is the screen that will come up:

Look for the HTML code for the photo(s) you want to enlarge. The code will begin with <a href and it will end with </a> The numbers that I've circled are the numbers you'll be changing. Blogger usually sets the height at "240" and the width at "320"
Step 3.  Change the height to "475", the width to "620" and the other number thingy, (whatever it is) to "s620". **see note below

If the main body of your blog is more narrow than mine, you'll need to play around with the height and width numbers. You might want to try: height "340" width "520"

Step 4. Click back to "Compose" to go back to the editing page.

This is what my photo looks like now!  Yay!!!
Why did I choose the proportions that I did? Well, simply put, the  blog where I found the information, said these were good numbers to start with. So, I did. And, I liked it. And it fit my blog layout. You can certainly play around with it as much as you like. If you screw it up, don't panic. Just go back to compose mode, delete that particular photo and start over.

**I have no idea what that number is for, but the blog that I learned this from said to change it, so I do. I think it has something to do with the clarity of the enlarged photo. It's the same number configuration as the width of the photo, so I just change it to reflect that.  (if anyone out there knows what it really does or why it's there, please feel free to educate me. I'd honestly like to know.)

OK... Now, you can go back to compose mode, do your spellchecking, add your labels and anything else that you would normally do before  clicking that "publish" button. 
~~~~~~~~~~~~

Finally, If you have a photo that you've uploaded from another source and it doesn't have a defined height and/or width indicated in the body of the code, there's an easy way to fix that as well.

The end of the code line for the photo will look like this:


.JPG"  /></a>     OR it might be,       .PNG" /></a>

Right after the .JPG" and before the /></a>   type in the following:

height="475"width="620" 

You'll use whatever dimensions you've decided on.

So, to summarize: All of the original code stays the same, until you get to the end. The last bit of the code should look like this:

 blah, blah, blah original photo info .JPG" height="475"width="620" /></a>

Remember: Always "save" and "preview" to check the look of your changes before publishing your post. 

So... I hope this was helpful. Please excuse the horrible job I did of drawing the arrows and circles on my example pages. At the time I took those screen captures, I only had the snipping tool that comes with the computer and it's very basic. I'll try to pretty them up in the future.

I'd really love to get your honest feedback about this tutorial, so please leave a comment with any/all critiques, suggestions and/or questions. I'd also love to hear about what you'd like to see in future tutorials.

I'm shooting for Wednesdays as a posting day for these tutorials.

My next tutorial will be:

"How To Make A Grab Button For Your Blog"

2 comments:

  1. This was actually helpful in several ways. I used to be able to choose left, right, or center. Now, I can see that if I want the photo anywhere but in the center I need to change it in the HTML. I can see where it currently says "center" and I need to just edit that information to reflect "right" or "left" if that is what I want.

    I was also completely clueless about the ability to customize the "sizing" on my blog. So thanks!!!

    ReplyDelete
    Replies
    1. Glad it was helpful, Robin. Are there any specific things that you're interested in for future tutorials? I have a few in mind, like how to make a grab button and/or custom header for your blog and creating and installing social media icons, etc. I'm not sure what most people know or don't know, so I'm trying to make the tutorials as detailed as possible. But, I get worried that it's too much detail and therefore confusing. LOL Thanks for the feedback! :~)

      BTW, after I left my comment yesterday, I tried to leave another one on a different post, but I kept getting an error message. :~/ I'll try again later today. XOXO

      Delete

Spill your heart out!