Making your Photos larger in Blogger

I had someone ask me how I got my pictures to be larger than the norm, so I thought I would share that info with everyone, just in case you were wondering too.

First of all, to create my blog posts I use a free program that I downloaded called Windows Live Writer. When using it, you have to put in your Blogger user name and password and then it actually downloads your specific site setting so that you can see exactly what your blog posts will look like.

It will allow you to make the photo larger by either dragging the corner of the photo or specifying the width and height you want the photo to be in pixels. It also has a few photo editing tools.

You can publish your posts directly from this program or you can save the posts to your blog as a draft.

But to really take advantage of this program to have larger photos, you will also need to increase the width of your post column. To do this, from your Blogger dashboard click on “Layout” then click on “Edit HTML” and then your screen should look like this:

You will need to scroll through the HTML code until you get to the portion that looks like this:

/* Header
-----------------------------------------------
*/

#header-wrapper {
width:680px;
margin:0 auto 10px;
border:1px solid $bordercolor;}

Now you will need to decide how wide you want the header of your page to be. I have mine set at 680 because I like having a little space on the side of my title picture. I have my total width set at 780.

Next, you will need to scroll down a little further and find the section that looks like this:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 780px;
margin:0 auto;
padding:15px;
text-align:$startSide;
font: $bodyfont;
}

#main-wrapper {
width: 560px;
float: $startSide;
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 */
}

#sidebar-wrapper {
width: 180px;
float: $endSide;
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 */
}

I have the total width (outer-wrapper) for my site set at 780 pixels, but you can make that number whatever you want it to be, just know that most computer screens are set at an average width of 1280 pixels, so you will probably not want to make it larger than that or there will be some people that won’t be able to view all of your content, in fact it is probably advisable not to go over 960 because there are many people that have their screen set at even lower resolutions. The main wrapper is where your posts are published. I have the width for mine set at 560 and the sidebar at 180. You’ll notice that the total of those two don’t add up to 780. That’s because there is a little “padding” written into the code to go around each wrapper.

After you change the numbers to be what you want for your site, you can click on “preview” to see how it looks and to make sure that you like it. If you do, click on “save template”, if you don’t, play around with the numbers some more or click on “clear edits” and it will make the code go back to the way it was.

Have fun! If you do decide to try this and run into any problems, just let me know and I will try to help you out.