CoffeeShop Blogger UnWrapped: Making your blog wider!

I have have had fun working on my CoffeeShop Blogger Unwrapped series, where I post tutorials on customizing Blogger templates. Now you know how to remove that sometimes distracting Nav bar on top, fool Blogger and load larger images, add a lovely new background, and even add a custom header.

The normal Blogger Minima template is less than 700px wide. This is great for those who have tiny monitors and don't mind loading tiny images, but if you are a photographer or crafter or anyone that wants to proudly display large images on your blog then you need more space. After all, if you are going to spend hours editing your images in Photoshop or Photoshop Elements using fun CoffeeShop Actions you want to show off!

You can download plenty of free templates out there that are wider or even ones that have only one column (Photoblogs), but it is so easy to customize your own template. If you download a new template and try to install it, you might lose some of your nifty gadgets/buttons/etc. on your blog. However, if you go in and tweak your template yourself, you won't lose anything. You don't need any knowledge of HTML to do this tutorial, just a few extra minutes and a need for HUGE images!



Here is your standard Blogger template (with a custom background, that is why the black area looks so wide). You can see the tiny skinny columns. And what a tiny image, let me put on my glasses. :-) Note: If you have another Blogger template other than Minima, go to Layout, Pick New Template, and then select the Minima one. That template is the easiest one to tweak!



1. Go to Layout, Edit HTML. Click on Download Full Template and save your original template somewhere safe! This is very important and should be done before making any changes to your template.

2. Now you will tweak the template. To find code you can click Ctrl-F and do a search, however you do not have to expand widgets so this code will be very easy to find just by looking.

Find this:

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

Make change in red:

#header-wrapper {
width:1000px;

-------------------

Find this:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Make change in red:

#outer-wrapper {
width: 1000px;

------------------

Find this:

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

Make change in red:

#main-wrapper {
width: 750px;

--------------------

Find this:

#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Make change in red:

#footer {
width:1000px;

3. Click on Preview. If your blog preview pops up and looks wider and you don't get any error messages you are good to go. Just Save Template and go play with your new improved blog! If your blog preview does not come up and you get an error message, click on Clear Edits and try again.



Here is the new wider blog. However, my image is still small... Unfortunately I have not found a way to make your template wider and also automatically enlarge your images. I don't think it is possible. However, you can go in and physically tweak your image code to make them bigger. Or you can upload them to Flickr or MerryPic and grab the URL and paste them in the HTML side of your post.

You can post images up to 740px wide in your new wide blog. The right column for your blog buttons/links/gadgets/etc. is the same size as the original Blogger template, 220px.



Now my image is huge. Wasn't that easy? Who needs to know anything about HTML to get a wide blog.

NOTE: If you have already installed a custom template on your blog and want it gone to start fresh, go to Layout, Pick a New Template, and then select the Minima template. You won't lose any of your gadgets switching back to a Blogger template (they claim!). Then use the tutorial above to tweak your template.

If you have any suggestions for future Blogger UnWrapped Tutorials please post them below!

31 Comments:

way outnumbered October 29, 2009 at 6:07 PM  

Genius!! I've been putting off re-doing my blog for so long because I'm wanting large pics, etc. and don't know quite how to do everything. I think you've just about covered everything now! Except the fact that now I have no excuse to not build an awesome blog exactly as I want....

Tara. October 29, 2009 at 6:10 PM  

I am SO excited for this! I've been wondering how to change this. I'll give it a try a little later when kids are in bed and I can concentrate. Thank you SO much!

1LuvnMama October 29, 2009 at 6:49 PM  

thanks for the tutorial and tip! i will have to try it! i do post pics and images so it'll be great to see if it works!

Dana October 29, 2009 at 7:25 PM  

sweet! i think i love you ;)

rtwophotography... serving: October 29, 2009 at 7:34 PM  

thank you... i can now transform my blog into a work of art, all thanks to you and your genorosity...x

amymom24 October 29, 2009 at 7:55 PM  

You are awesome... THANKS

Linda Walton aka bobbysgirlforever October 29, 2009 at 9:23 PM  

You ROCK Rita!!! I was just on my way to play with a template on my test blog and came across your post! WOO HOO! I just might be able to pull this off after all!

MWAH!

rtwophotography... serving: October 29, 2009 at 9:29 PM  

i have a tutorial sugestion!
a computer-savy friend of mine entered a HTML/javascript on my blog that diables 'right-clicking' of images... let me know if you need me to get the info from her.

Tara. October 29, 2009 at 9:43 PM  

Hmm. It didn't work for me. It made some things wider, but my sidebar info stayed in the same place and my post texts spread out really wide.
What am I doing wrong?

Natalie October 30, 2009 at 7:45 AM  

Great tip - been wanting to do this to my blog. Thanks so much!

Gretchen Clark October 30, 2009 at 9:37 AM  

thank you so much!!!!

Katie October 30, 2009 at 10:47 AM  

When I try to do this, it bumps my side bar info to the bottom and I can't figure out how to get it back to next to the posts. Any ideas?

Sabrina October 30, 2009 at 12:37 PM  

Thank you! Thank you! Thank you! I have been trying to tweak my template to get the big photos and not have so much extra space on the sides, and you have saved me from another evening of trying and trying again to figure it out on my own. I've been working on this for the past week, and I just couldn't get the numbers right. You are awesome!!!!!!!!!

Heitmann Family October 30, 2009 at 1:53 PM  

Awesome-thank you so much. I would love to know how to make buttons for blogs and how to add them with the scrolling box so other people can add them their blogs. I would also love to know how to disable right-click save pictures on blogs too.

Tracy, mom2many November 1, 2009 at 9:13 PM  

Thank you! I used your tutorials to redo my blog and I love it!! I really appreciate the effort you put into taking us through the steps.

pixsmiths November 3, 2009 at 2:06 PM  

Thank you so much, worked a treat

Amanda November 4, 2009 at 5:23 PM  

These are all amazing!!!! I don't know if I've missed it or if it can be done but is there a way to use different fonts on blogger. they only offer the boring ones. Thank you so much for all you do!

Katie November 13, 2009 at 2:13 PM  

Thank you so much!!!!

Natalie December 2, 2009 at 3:51 PM  

Question....Can you change the width to bigger than 750, like 800 by chance if I want to get pics up to 790 on my blog? I guess I could try it, but don't want to if I'm gonna mess things up, so I thought I would ask first :) THANKS SO MUCH!! Having bigger pictures has been a dream of mine for years, really.

Laura December 5, 2009 at 10:35 AM  

Just wanted to drop off a BIG thanks! This was a clear way of doing this. It worked on a new blog I'm setting up. Unfortunately, I can't get it to play nicely with my established one. Guess it will take more than just tweaking with the numbers on my part. But thanks again. Your info is always so good. Keep up the good work!

Nicole Chryst December 29, 2009 at 1:27 PM  

Rita, you are amazing! I wanted to let you know that I stumbled upon your blog and now have completely revamped my personal and professional blogs with your blogger unwrapped tutorials. I really am in love with your blog and all of the free goodies you offer -THANK YOU! In case you're on the lookout for another tutorial, I added code to my blog that disables right-click/saving and so far has worked on ALL of the internet browsers. I just started deleting the code that allows photos to be opened in a new window also - worth it if you don't want clients stealing images. Again, THANK YOU THANK YOU THANK YOU! Happy New Year!

snaphappee January 2, 2010 at 1:03 PM  

Thanks for this great tutorial! I have several friends who are just setting up blogs for a 365 project, and I'll direct them here!

Just a note on the photo size thing - I use Windows Live Writer to create/edit my blog posts, and I use an add-on to upload the photos to Flickr at the same time. In WLW I can set my defaults for photos so that every photo I put into my blog post is the same width, has the same border, etc. It takes care of that image size thing very nicely.

Thanks for all you do!

Becky January 2, 2010 at 4:29 PM  

I've been searching for something like this for quite a while. Thank you so much for sharing this with us. My one question is how do I make my changes to the html code in a different color...such as the red you suggest?

Terrie February 18, 2010 at 5:46 PM  

I love your freebies....your so generous. Thanks for sharing. I have you button on my blog.
designphotography-terrie.blogspot.com

KBH February 19, 2010 at 11:04 AM  

THANK YOUUUUUUUUU!!!!!! MY friend Laura, from Elephant Juice, sent me here to make my blog bigger. YOU ARE THE BEST!! I'm now a follower!! THANK YOU!!!!

Angie February 21, 2010 at 9:30 PM  

Thanks for the great info. I'll get to work on it soon. Here's a tutorial suggestion. Rather than a plain background, I'd like to use one of my own photos, really washed out. Do you know how to add customized backgrounds to blogs?

Jenn March 19, 2010 at 11:17 AM  

I tried it and did the same thing as Tara (2). My side bars didn't change and the text overflows to the side bar. How do I fix this?

Kim S March 20, 2010 at 11:39 PM  

Thank you so much, it worked great!

Tiff March 26, 2010 at 7:27 PM  

Hi! Thanks so much for all of the helpful tips! I had a question about the sample "wide blog"... How did you get the header to fade in transitions? I was wondering how that is done. Thanks :)

Emili April 15, 2010 at 9:50 PM  

This is FABULOUS! I'm in love with your blog, what an amazing resource!

Breezy August 24, 2010 at 10:40 PM  

Hi Rita ! I tried the above to make my blog wider, but it didnt work. I went back over it 3 times. You by chance know why it will now work ?