Thursday, October 29, 2009

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 {
margin:0 auto 10px;
border:1px solid $bordercolor;

Make change in red:

#header-wrapper {


Find this:

#outer-wrapper {
width: 660px;
margin:0 auto;
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 {
margin:0 auto;
line-height: 1.6em;
text-align: center;

Make change in red:

#footer {

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!


way outnumbered said...

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. said...

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 said...

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 said...

sweet! i think i love you ;)

rtwophotography... serving: said...

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

amymom24 said...

You are awesome... THANKS

Linda Walton aka bobbysgirlforever said...

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!


rtwophotography... serving: said...

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. said...

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 said...

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

Gretchen Clark said...

thank you so much!!!!

Katie said...

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 said...

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 said...

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 said...

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 said...

Thank you so much, worked a treat

Amanda said...

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 said...

Thank you so much!!!!

Natalie said...

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 said...

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 said...

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 said...

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 said...

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 said...

I love your freebies....your so generous. Thanks for sharing. I have you button on my blog.

KBH said...

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 said...

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 said...

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 said...

Thank you so much, it worked great!

Tiff said...

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 said...

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

Breezy said...

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 ?