How To Increase or Change Width Of Your Blogger Template

Learn how to increase blogger template width. Changing the width of blogger template would give you some more space where you would be able to add pic,videos, images and much more. There are uncountable blogger templates through the world of internet. As you can use them in any way. But the problems rises when you like a particular template and want to continue it. But need to change its width because of small or because of more width. Any how what ever be your question today we are going to change the template size in blogger. Before getting into the article make sure you have a backup to your template.

Hope you have created your backup, if any thing goes wrong it would help you. Now,

1. Login into Blogger
2. Select your blog if you have many
3. Then migrate to TEMPLATE –> Click on “EDIT HTML“

Now you need to find the parts that are responsible for, width of your template. There are Main section, Post sections, Sidebar, Header Section and Footer. The sample code how they look.

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
…………………………….
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
…………………………….
#main-wrapper {
width: 410px;
float: $startSide;
…………………………….
#sidebar-wrapper {
width: 220px; float: $endSide;
…………………………….
#footer {
width:660px;
clear:both;

► header-wrapper is Header
► outer-wrapper is our Main section, other elements are wrapped inside of it..
► main-wrapper represents Post Section
► sidebar-wrapper stands for Sidebar
► footer is Footer :]

This means from above example, our header-wrapper is 660px wide, outer-wrapper width (Post section + Sidebar+ margins) is also 660px, and footer 660 px.
Now let us change the width of template.

// ]]>

#header-wrapper {
width:750px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
…………………………….
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
…………………………….
#main-wrapper {
width: 500px;
float: $startSide;
…………………………….
#sidebar-wrapper {
width: 220px;
float: $endSide;
…………………………….
#footer {
width:750px;
clear:both;

If you decided to make your Post section (main-wrapper) wider. In order to do this, You have to increase your outer-wrapper. Pleas note the following points while changing width :

◄ If you want to increase the width of your Posts section or Sidebar, you HAVE to increase your    Main section width (outer-wrapper) for the same value! ►
◄ 500px + 220px + margins = 750px ►

In this example, I’ve increased my Post section (main-wrapper) for 90px, so I’ve changed 410px into 500px. I did the same for the Main section (outer-wrapper), changed 660px into 750px. I’ve left the Sidebar the same width, 220px.
I’ve also changed the width for my header-wrapper and footer into 750px. Note that this is not necessary, but better do it…for the sake of symmetry in your Layout…

Remember, when you’re changing the width of your (custom) Blogger template, certain elements will be (can be) under different names. Do not let it confuse you! You know how the elements are organized inside of it….and in the end, its a 5 minutes job.

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post