Thursday, March 24, 2011

How to Widen Your Post Area.













A lot of blogs love to post photos, and we love looking at them! The best way to make your photos stand out, is to make them bigger! I like to widen my posting area to do this. NOW, I use the Minima Layout for Blogger. They do not offer it anymore, but I can upload it for you to your blog if you wish, you can ask Kam, it only takes a few seconds! 
NOW, READ MORE AFTER THE JUMP!



OK, now, if you have the layout all worked out, you need to go to your dashboard, and click DESIGN. Then under the DESIGN tab click EDIT HTML.


If you have  never been in this section on your blog it will look scary, but it is not scary and it will be no problem!
It is advised that you save your current template just in case something goes wrong! (Just click download full template and save it somewhere).




NOW, you need to scroll down until you see this part of code:





#outer-wrapper {
 width: 980px;
margin:0 auto;
padding:10px;
text-align:left;
background: #ffffff;
font: normal normal 100% Georgia, Serif;
}


YOUR MAIN WRAPPER IS WHERE YOUR POSTS ARE!
#main-wrapper {
width: 690px; <----this is the number you want to increase! Always click preview though before you apply settings, that way you can make sure your sidebar will stay in tact. If you have a 3 column layout you will be be able to post as  large of photos, but a way to get around that would be to post vertical shots. Kam and Kaelah execute this well.
margin-right: 25px;
margin-left: 50px;
float: left;
background: #ffffff;
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: 175px;
margin-right: 5px;
margin-left: 10px;
padding: 5px;
border-left: 1px dashed #CCCCCC;
float: right;
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 */
}


CLICK here, if you want me to upload the minima template to your blog <3

9 comments:

  1. Question! Question! ;) I wanted to try this just to learn how to do it... so I changed my number from 940 to 980 to match what you had. Here is what it says...

    "More than one widget was found with id: HTML7. Widget IDs should be unique."

    Am I doing something wrong?

    ReplyDelete
  2. If anybody is suspicious about allowing Justine "in" so she can get your template loaded, just roll with it!

    I gave her access to my blog, went for a quick trip to Target, and came back to an expanded blog! I did a few things on my own after she was done, and it's what you see today :) I love being able to post XL photos on my blog.

    Thanks, Justine!

    ReplyDelete
  3. Wow, I could kiss your feet for this blog post. Seriously I have been wanting to know how to do this FOREVER but am so intimidated by HTML that I never even tried. So thank you so so much for a) writing a tutorial for it and b) showing me how easy it is to do! Thank you, thank you.

    ReplyDelete
  4. do you know how to adjust the padding with the new blogger? i am using the simple template. it seems that a lot of the html code is hidden.

    ReplyDelete
  5. great tutorial...but I have a problem with my posts squishing out over the background...help?

    ReplyDelete
  6. Ahhh thank you! This was killing me that I couldn't figure it out!

    ReplyDelete
  7. Hi Justine, I have a question.. I was able to widen my blog successfully but after I did so I notice that everything that used to be on the side of my blog was now at the bottom. This included my followers, blog lists, visitor map, etc.. Is it possible to have it at the top side like it used to be? Or do I lose that option once its widened? Please let me know, thanks!

    ReplyDelete