Monday, February 14, 2011

How to stretch your blog.

Welcome to the first installment of my blog design tutorials!


I want to start off by saying that I love doing blog designs.  It is so much fun creating web homes for people.  But I also understand that a lot of people can't hire a blog designer.  In fact that is how I became a blog designer.  I couldn't afford to hire someone to makeover my blogs so I learned how to do it myself and a whole little home based business sprung from it.  I can't even tell you what a blessing its been.  I am completely self taught.  Everything I have learn to do I either found through blogger forums, other kind peoples tutorials, or trial and error.... a LOT of trial and error.  So doing this mini series is my way of paying it forward to all the kind people out there willing to share their knowledge and inspiration.  Let's make blogland cuter!

How to stretch your blog beyond 1000 pixels.

Most of my blog designs start out as the "simple" template in template designer.  While I have never done this particular trick in another template, it should work whichever template you use.


Step 1:  Sign into your blogger account and go to design-- edit html.  It is always a good practice to back-up your template before editing in case you screw everything up.  (you do that by downloading and saving the template...as circled) That being said, I never back it up but I always preview any changes before I hit save.  If you are at all nervous about edit html code then I suggest you back it up.



Step 2:  Find the part of the code that says 
On a  PC you can hit CTRL F and a little search box will appear.  That helps a lot when searching for codes.


Step 3:  See the two number circled in the image above? (click image to view larger) Change those numbers to the width you'd like your blog.  I suggest somewhere around 1200 px.  Do not change anything but the numbers. CLICK PREVIEW.  If everything looks good then click save.


That's it!  super easy huh?!?  Now your blog went from this...



To this.  Look at all that extra room.  Love!


You will probably want to re-upload your header as it will now be a wee bit small, but that's an easy fix.


I hope you enjoy!

Feel free to give any suggestions on any other blog design tutorials you'd like to see.  I'm all ears! 

Have a Great Valentine's Day!



19 comments:

Amanda Joy said...

Thanks for the tip, that is one I hadn't thought to fiddle with:)

Amanda Joy said...

I tried to find the code in my html, but it said text not found. I wonder if it is because I am on the old templat rather than any of the new ones?

Mark and Tiffany said...

Just like amanda, i couldnt find it even after using the ctrl finder. What do you suggest?

Krystal said...

yeah, this method will only work in the new templates but here is a link to a tutorial for the old template.
HERE

If you are in the new template and still can't find it, then let me know what template you are using and I will try to find how its worded .

Krystal said...

I tried it in a bunch of other "template designer" templates and it seems to be working in all of them, although you may only have one number to change instead of 2 like in my directions.

LookAtThePrettyColors said...

Thank you!!

WobiSobi said...

Thank you !!! that was very helpful!!!

Amanda @ Serenity Now said...

Great tutorial!! It really does make such a difference. I can fit so much more in on my blog now without seeming cluttered. :)

{Carli} said...

Wow, this is such a great tip! I can't wait for more! Thank you so much Krystal!

CraftCrave said...

Just a quick note to let you know that a link to this post will be placed on CraftCrave today [15 Feb 12:00am GMT]. Thanks, Maria

{Carli} said...

For some reason my header isn't centered anymore, and when I try to adjust it, it goes back to the original size. How can I center my header without making it look stretched?

ladycrafter14 said...

Love it!!! More...more...more... anything!

Michelle said...

Thanks for the tip. One of my questions is how do you post pictures side by side? Or is that all done in photoshop?

Thanks again, can't wait to hear more!

Michelle

Busy as a Bee in Paris said...

oooooh, this is amazing! so glad to have foudn your blog! visiitng from a to z

Holly @ Roller Coaster Life said...

orrr you can just go to design at the top of your blog, go to template designer, adjust widths, and see it right there moving it..

way easier so you dont have to worry about messing up html!

Krystal said...

Yes, if you just want to move to 1000 px, thats the way to go and you won't have to mess with html.

Ashley said...

i just tried doing this and it worked just fine, but now my picture header won't fit right (i'm just using a single picture). Do you know how to adjust that by any chance?

Adelina Priddis said...

YAY! Thank you! I can fit nice sized pictures on without bumping into t sides now!

Grey said...

Hi, my name's grey,

do you have any idea on how to stretch not the blog but the image in 'image slider code'?

LinkWithin

Related Posts with Thumbnails
Don't stop there! Click "older posts" to keep reading!