25 Jun 2009

Blogspot Trick: How to Change Width of Body, Posts and Sidebar

Why to increase the width


1- You can have bigger images in your blogs.

2- Good result in old browsers like Internet Explorer 6.

3- Sidebar in perfect position.

4- It gives your blog an overall clean look.

Steps to follow


1- First of all you need to go to Design tab and then select Edit HTML.

Tip: Click on Download Full Template to backup your template.

2- Find the following code between <b:skin> and </b:skin>.

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

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

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


Remember: The width factor in #outer-wrapper defined the overall width of blog, in #main-wrapper it defines the width of your posts and in #sidebar-wrapper it defines the width of your sidebar.

3- Now you know the code, you can increase the width in #outer-wrapper and then increase in the #main-wrapper (for posts) or #sidebar-wrapper (for sidebar).

Warning: When you increase the width of any tag, see the preview and if you're satisfied only then you should save.

4- Similarly if you want to change the width of your header, here is the code in your template CSS between <b:skin> and </b:skin>.

/* Header
-----------------------------------------------
*/

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


5- Just change the width factor and see the preview, if you're happy with the outcome, save the template otherwise discard the changes. Description: Blogspot Trick: How to Change Width of Body, Posts and Sidebar Rating: 4.5 Reviewer: Unknown - ItemReviewed: Blogspot Trick: How to Change Width of Body, Posts and Sidebar Hot News!!! "Sepeda Motor Injeksi Irit Harga Terbaik Cuma Honda"
Share on :

0 komentar :

Posting Komentar

Mau tukeran link? silakan buka Link sahabat dan apabila ada pertanyaan silakan tulis di Kotak Pertanyaan. Terima Kasih...

Kami akan menghapus komentar yang: Tak sopan, memakai HURUF BESAR, berupa caci maki, mengandung kata-kata kebun binatang, debat kusir, provokasi, di luar konteks, berupa undangan/ reklame. Komentar yang terlalu panjang, tanpa paragraf dan sulit dipahami. Komentar copy-paste, silakan di-link saja.

Isi komentar adalah tanggung jawab penulis komentar, bukan tanggung jawab pengelola blog/situs ini. Harap maklum.

 
© Copyright Dunia GUE 2011 - Some rights reserved | Powered by Blogger.com .
Template Design by Herdiansyah Hamzah | Jejaringkan Kami di Jejaring Sosial (duniague.net)