Tuesday, July 7, 2009

how to widen your blog: tutorial

after many emails of fellow bloggers asking how to widen their blog and how to make their pictures bigger, I have decided to write a post so that everyone can have big beautiful pictures. (for all of you that commented or wrote an email months ago, sorry it took me so long to get to it.) i don't really know if this is the easiest way or the correct way, but after some messing around in html it worked for me. Todays tutorial is on "How to widen your blog" and sometime this week I will post, "How to make your pictures big and beautiful on your blog" You actually have to do the first one in order to do the second one.

** disclaimer!!! before you do anything SAVE YOUR TEMPLATE, i don't want any one messing up their blog.

** my blog is style "minima" i don't really even know if it will work in other blogs, but i'm sure it will. if you have downloaded another template (like cutest blog on the block) it may be different also.


HOW TO WIDEN YOUR BLOG IN BLOGGER

1. Go to your Dashboard and click the Layout Button.
2. Then click "Edit HTML"
3. Looks scary I know, but don't freak out.
4. Check the box that says "Expand Widgets"
5. Now scroll down to where it says this:

/* Outer-Wrapper
----------------------------------------------- */

6. Your numbers will be different then my numbers.
7. Change them to what I have if you want your blog wider.
8. Hit the "Preview" button to see what it will look like
9. If you want it more narrow or wider you can change the numbers.
* Hint: the outer wrapper must have a higher number than the main wrapper and sidebar wrapper together.



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

#main-wrapper {
width: 800px;
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: 293px;
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 */
}

7. If you like what you see in "Preview" click "Save Changes"
8. Now there is no going back.
9. View your blog and WALLAA, you should have a nice wide blog, perfect for big pictures.
10. Wasn't too hard was it?

Leave a comment if you widen your blog, so that everyone realizes that they can do it too. Plus, I like to feel like I've benefited someone with all this jibber jabber.

8 comments:

Tiffany And Co. said...

Okay, I did it but my pictures don't look near as big as yours. Is it because they are in lower resolution?

Amy and Gordon said...

Jennie! You helped me widen my blog sometime last year--thank you, it was easy!! :)

JENNIE! said...

This tutorial is actually only for widening the blog. i will post the tutorial for making your pictures bigger sometime this week. (those actually have to be done one by one)

LJAandB said...

Jennie I am so excited to try this, I am really bad at computer stuff, but your directions look great. I am always wondering how to do this! Thanks so much!

kristenita said...

¡muchas gracias!
I actually just ditched my "cutest blog on the block" background & changed my template to MINIMA STRETCH & it's plenty wide for my screen. one day I will have an imac with a huge screen...
:)

thanks again!

Danielle said...

HI! I don't even know how I stumbled across your blog but the tips on widening your blog AND the pictures worked on my blog. I AM SO EXCITED! Thanks!!

Ellen said...

Thank you! Just started a blog, it worked.

Sarah Bogh said...

Thanks!! I was directed here by a friend, and am glad she sent me! I am wondering if you know, will this work in typepad?