Tutorial for Crisper, Bigger Photos on Blogger!

Today I am not just showing off a card. I would like to show you how to get sharper, larger photos on your Blogger blog! Just look at the difference in the photos above; I uploaded the top photo into Flickr first, and then copied the html code and pasted it in my blog post here. The second photo was uploaded in Blogger as usual, the way I have done it for a year now. I am amazed, not only at how much larger the Flickr photo is, but also how much more in focus it is. I just found out today how to do it, and I'd like to share what I found out so you can do it too!

Here are your step by step instructions:
1. Go to Flickr and click on "Create Your Account" button on the top right of the page. Follow the instructions to create your account with them.
2. Upload the photos into your new Flickr account, following their upload instructions. I clicked on "Upload Your First Photos", then "basic Uploader near the bottom of the page. You'll see options come up that look just like the options in Blogger when you are uploading photos, so you'll know what to do from there. ;-)
3. Once you have uploaded a photo into Flickr, it will show as a thumbnail in your gallery. Click on it, and then it will show up quite large on the screen. Near the top right of this page, just under the search box, you'll see "Share this" in grey print. Click on that.
4. You will then see three options in blue, in a little drop down screen. Click on "Grab the html". When the html shows up, use the cursor to copy the code. You will paste it into your blog post, but not just yet! We'll get to that in a few minutes. First, you must prepare your blog to receive the larger photos from Flickr!
5. Now go to your blog in another screen. Go to "Customize. Then go to "Edit HTML" (top left, second row of options).
6. Don't skip this next step: Go to "Download Full Template" . This will save the current template as is, so that if things go wonky, you can always go back to the way it was before! ;-)
7. Scroll down until you see the codes for the "wrappers". There were only four numbers that I had to change in order for my blog to use the larger photos from Flickr. You may have to do the same. Wrappers are the alloted spaces for your posts, sidebar, and for the whole blog. The "outer wrapper" is for the blog as a whole. The "main wrapper" is for your blog posts. My sidebar was listed simply as "sidebar".

IMPORTANT NOTE:
If you're wise, you'll do one change at a time, click on the orange "save template" button, and then "view blog" to see what your changes look like. That way you know how to go back and change it right away if you don't like it and you won't be confused as to which number made what change.

8. Let's start with the outer wrapper, which includes both your posts and sidebar together. You should see something similar to this:

/* -- layout -- */
#outer-wrapper {
width: 930px;
margin: 0 auto;
text-align: $startSide;
font: $bodyfont;
background: #fff url(http://www.blogblog.com/snapshot/bg-body_$startSide.gif) $startSide top repeat-y;
}

I am using the template called, "Snapshot: Madder". So your codes will be slightly different, but similar looking. See the third line down, which says, width: 930px; The number that was there originally was 700. I erased that and typed in 930. You can choose a different number if you like, but try mine first just so see what that does. It will widen the entire blog.

9. Now scroll down until you see something similar to this:

#main-wrapper {
line-height: 1.4;
float: $startSide;
padding: 10px 12px;
border-top: solid 1px #fff;
width: 650px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\"";
voice-family: inherit;
width: 520px;

The sixth line down, says, "width: 650px;" I changed it from 436px, which is what it had been before. I also changed the width on the last line to 520px. I cannot remember what it had been before. I only remember it was less, probably 400 or so.

10. You may want to change the width of your sidebar. It will look something like this:

#sidebar {
float:$endSide;
border-top: solid 1px #fff;
padding-top: 4px;
padding-$endSide: 0;
padding-bottom: 0;
padding-$startSide: 7px;
background: #fff;
width: 280px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

The ninth line down on mine has the width number. (different templates will likely have slightly different orders for these numbers, so look for the word "width"). You can choose a higher number than what is currently there and that will widen the space that your sidebar takes up.

11. Now, when you have changed the numbers to widen the spaces on your blog, and SAVED your changes, you will be able to upload your larger Flickr pictures! This editing is a one time thing so there is no need to repeat the process (unless you wish to change it again). Now, just go make a new post as usual, and... remember when we copied the html code for your first Flickr upload? Well if you did that, now all you have to do is hit "paste" in the new blog post box, and voila, your larger, sharper photo will appear!

I wish to thank Mel of "Mel Stampz" because she had a tutorial on her blog about this that showed me what to do. She is an incredible card artist too, so you really should check out her blog! You're missing out if you don't!
I'll leave you with a close-up of the Angel Whispers image and if you have any questions, I will do my best to answer them for you!
Blessings!