0

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

Post a Comment

 
Top