You can also receive Free Email Updates:

Changing the width of Body, Posts and Sidebar | Blogger

Zahri Kahoor | Wednesday, April 13, 2016 |



If you have downloaded a custom template for your blog and you are unsatisfied with its width for the posts, body or sidebar, this post will guide you on what you need to change in order to achieve your desired results. Normally we can easily do that by using the default template editor that Blogger provides us with, but in most cases it does not support custom templates so we would need to manually change the HTML code ourselves.

Reasons to increase the width ::
  • You can have bigger images in your blogs.
  • Good result in old browsers like Internet Explorer 6.
  • Sidebar in perfect position.
  • It gives your blog an overall clean look.
  • You can place wider widgets on your sidebar - very useful especially for ads
Increasing the width ::

Before doing anything ,it is very important to save a backup of the template ,follow the steps below to save a backup --

Template ⇒ Backup / Restore


Click on Download Full Template


Let's begin the main process --

 1. Template ⇒ Edit Html 


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

Got Questions ?

We hope you have successfully changed the widget of your blog without any problems. If you still need any help or have some questions or getting any errors , then don’t hesitate to ask us. We would love to hear your suggestions . Let us know what your views are in the comments. Cheers :)

0 comments:

Post a Comment