How To Change Or Customize Custom Blogger Template Widgets And Body Width

Bang Dero

28 Feb, 2018

Learn how to Change or Customize blogger template width. Changing the width of blogger template would give you some more space where you would be able to add a 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 arise 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. Anyhow whatever 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.

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

Now you need to find the parts that are responsible for, a width of your template. There is a 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;

➤NOTE ￫ THIS IS AN EXAMPLE CODE MAYBE IN YOUR TEMPLATE HAVE DIFFERENT WIDTH AND ALSO HIGHT SO MAKE SURE FOLLOW THE INSTRUCTION WITH SMARTNESS NOT TRYING TO COPY-PAST IN YOUR TEMPLATE CODE

➔ 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 the 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;

➤NOTE ￫ THIS IS AN EXAMPLE CODE MAYBE IN YOUR TEMPLATE HAVE DIFFERENT WIDTH AND ALSO HIGHT SO MAKE SURE FOLLOW THE INSTRUCTION WITH SMARTNESS NOT TRYING TO COPY-PAST IN YOUR TEMPLATE CODE

If you decided to make your Post section (main-wrapper) wider. In order to do this, You have to increase your outer-wrapper.

FAST DOWNLOADads| Server1 | Server2 | Server3 |