Tuesday, January 18, 2011

Get Larger Pictures on Blogger

I have always hated how photos uploaded to blogger end up small even when you choose 'large'. I would take photos I was excited about only to see that a lot of the detail lost when I put it on blogger. Plus blogger's uploader would give me error codes half the time.
After searching for ways to get larger pictures on Blogger, I found a finally found a couple of tutorials but they were vague and didn't work with my photo uploader that I use. It gave me the basic idea though so I played around with it and finally got everything figured out.
It turns out that it is really easy so I thought I would share my own tutorial for those of you who would like to have larger pictures on your blog too!

First you will want to make sure that the margins on your blog layout are big enough for the photos that you want to upload. Go to your blog dashboard, click on the 'Design' tab, then 'Template Designer'.

Once in the Template Designer, click on the 'Adjust Widths' tab. For mine I chose to make my overall width the maximum 1000px. My sidebar is 300px which leaves 700px for the main column of my blog.

Now you are ready to start uploading your photos to your outside photo hosting site (Photobucket, Flicker, etc.) I use Picasa. This is where your photos go when you use Blogger's photo uploader too.
To access your Picasa photo account: Sign in to Gmail and at the top of the page click on the 'More' drop down menu. Select 'Photos' and it will take you to your Picasa account. Click the 'Upload' button which will bring you to the screen shown above.

Go to the photo that you want to upload. To the right of your picture will be a drop down menu that says "Link to this photo"

In this drop down you will select the size you want your photo to be. For the settings on my blog, I choose 640px. Next, check the 'Hide album link' box. Otherwise you will have a lot of extra text below your photo.

Once you have those set, copy the code in the 'Embed image' box.

Now that you have your code, go to the post you are creating. View it in HTML mode then paste the picture code that you just copied in the previous step.

The way the code is now, clicking on the photo will take you to your photo album. If you would like it to link to a different page though, just replace the above highlighted code with the link you would like it to go to. I usually do this when featuring other people's projects.

To center your photo, just add the tags circled in the picture above. If you have a lot of pictures you don't have to put these tags on each individual photo. You can just put the first, open tag at the beginning of your code and the end, closing tag at the end of your code.
That's it!
Now instead of having small photos using the finicky Blogger uploader:

You will have much larger photos full of detail:

It's really simple once you get the hang of it and I think it is worth the little bit of effort. I liked the difference it made so much that I went through and changed every post on my blog. Crazy, I know, but it gave me something to do during our movie marathons over Christmas vacation. :)
I hope you found this tutorial helpful. Let me know if there are any instructions that don't make sense and I will try to clear things up!


mensajes claro said...

This is a great tip of how to make large pictures blogger , Its really usefull.
Thanks for sharing.

Megan @ Polish The Stars.com said...

You're welcome! I'm glad you found it helpful. :)

Erika said...

You just simply made my day with this useful tip! :) ty.

KickMode said...

I don't get what i am suppose to replace the highlighted area? That confuses me, can you explain?

KickMode said...

Wait never mind, i got it! it really helped! thank you so much

Rebekah said...

This is awesome! The first tutorial that I have read that I understood and could successfully apply. Thank you!

Anonymous said...

arrrgh...I am new to this whole blogging thing...I want larger pictures but do not want a link back to Picasa (which I am also woefully new to) any suggestions??? I thought I could just add the link back to my blog, but I was wrong...J.

Anonymous said...

okay I figured out hiding albums from public view in Picasa...phew! Now my other question is how do I get text between these bigger photos in the same post? I keep finding only information based on the old blogger templates. I simply want to post a couple pictures (or three or four) and know how to place text between them if I want...can you help me please before I pull out my hair? I don't want text beside photos...only under them...THANKS!!