Friday, July 3, 2009

Blogger Trick: Set the Blog Width

Many of the good templates in the internet ready for your blog. But for some people feel this is not special. Special is that we create and modified by your own. Results will also be very satisfying because we get a template like what we want. Where to begin? I suggest to you to begin to set the blog width of the view that its header wrapper, outer wrapper, main wrapper, sidebar wrapper and footer. Not too difficult to do it. With little change to the code number, you have to do it successfully. You ready to get started now? Please follow a few steps below:

Note: This example is using Minima Default template by Blogger

 

1. Login to your Blogger Account

 

2. Go to Layout Tab

 

3. Click Edit Html

 

4. Download Full Template! Important to back up your data.

 

5. To set Width of Header, find this code:

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

Change the red with your want. Example:

#header-wrapper {

width:990px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

 

6. To set Width of Outer, find this code:

#outer-wrapper {

width: 660px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

Change the red with your want. Example:

#outer-wrapper {

width: 990px;

margin:0 auto;

padding:10px;

text-align:$startSide;

font: $bodyfont;

}

 

7. To set Width of Main, find this code:

#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 */

}

Change the red with your want. Example:

#main-wrapper {

width: 650px;

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 */

}

 

8. To set Width of Sidebar, find this code:

#sidebar-wrapper {

width: 220px;

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 */

}

Change the red with your want. Example:

#sidebar-wrapper {

width: 300px;

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 */

}

 

8. To set Width of Footer, find this code:

#footer {

width:660px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

Change the red with your want. Example:

#footer {

width:990px;

clear:both;

margin:0 auto;

padding-top:15px;

line-height: 1.6em;

text-transform:uppercase;

letter-spacing:.1em;

text-align: center;

}

 

9. Click PREVIEW

 

10. If you want to set again, don't click SAVE TEMPLATE!

 

11. If you have done, click SAVE TEMPLATE

 

12. If you want to back to your last template, just upload back up template that your download with Download Full Template.

 

Next post I will tell you about next trick to modified your blog template to be great! Good Luck!

Subscribe Newsletter for Free with us to get any new post from Blogger Trick For You. Please fill your email on the box below, and click Subscribe. We will not share your email address. Because we would appreciate your privacy.

Comments :

11 comments to “Blogger Trick: Set the Blog Width”

If I've changed the width of my 'main wrapper' this then causes my 'side wrapper' to drop to the bottom of the posts. How do you then get it back to the top right?

I was thinking it had something to do with total width of the page and the main and side wrappers not being able to fit accross the page but perhaps this isn't the case?

Brush Novice said...
on 

The above thought is smart and doesn’t require any further addition. It’s perfect thought from my side.

web designer india said...
on 

Nice tricks, I will use for my blog and i think i can improve after this.

Education Consultants said...
on 

Thank you for sharing this information. The information was very helpful and saved a lot of my time.

dang nhap facebook said...
on 

Writing business an Εxеcutivе Summary fοr an Eхisting CоmpanyEvery compаny should have
prοvеn leаԁerѕhip.



Ϻy web site; cheap internet marketing

Anonymous said...
on 

Preventive crawling is another weapon seo firms have on hand.
Apart from providing reliable services, they also return location-specific results to those
who uses the web. Genuine shares of seo article content
writer can engage people in conversations
and dialogues.

Here is my blog :: seo news

Anonymous said...
on 

At least that is my experience. With that said, studies show that mass effect help, due to sudden
muscular effort and repeated hand: tendonitis, distal neuropathy similar to carpal tunnel.

Manhunt 2 2007 This game was a rushed effort and if
you've been unlucky enough to play it a hundred times and then once more for kicks. After which a pack of camels. So far the best way to save money as you purchase your favorite Xbox mass effect help.

my web-site :: my.opera.com

Anonymous said...
on 

Manhunt 2 2007 This game was a rushed effort and if
you've been unlucky enough to play it a hundred times and then once more for kicks. After which a pack of camels. So far the best way to save money as you purchase your favorite Xbox mass effect help.ngoc rong online

Unknown said...
on 

This post is really an informative source for me as well as so many new users. I have bookmarked this site for future reference. Thanks for sharing.

George Cypert said...
on 

Hey keep posting such good and meaningful articles.

App Development Company said...
on 

Hey keep posting such good and meaningful articles.

Buy Contact Lenses Online said...
on 

Post a Comment

New Old Home