Generally a default template provided by Blogger has no more than two columns, which one of them is intended for use for blog posts and the other one for its sidebar / column for widgets. To make / modify such a template to be a three column template is not realy something complicated, you can all just make use of the code inside the template itself to make a new column. Pay attention on the below explanation carefully:
1. Login to your blogger.
2. Go to design.
3. Edit html.
4. Tick the expand widget template to load the entire code of your template.
5. Download or copy your entire html code for back up so if you make any unexpected thing you could still set your template back to your old design.
6. Find the following code inside your template: # sidebar-wrapper {
float: right;
width: 600px;
margin: 10px;
padding: 10 10 10px;
display: inline;
}
Important: Not every templates have the same code one another, so you got to make a little effort to find your own code. In other templates the above code could be "# sidebar-wrap" or even others, try to find it.
7. Now copy the below code and put it just beneath the code that you just found:
To be the lesser arrangement like the following:
# sidebar-wrapper {
float: right;
width: 600px;
margin: 10px;
padding: 10 10 10px;
display: inline;
}
#lsidebar {
background: #FFF;
float: left;
width: 280px;
margin: 0;
padding: 0 0 0;
border: 10px solid #DDD;
display: inline;
}
#rsidebar {
background: #FFF;
float: right;
width: 280px;
margin: 0;
padding: 0 0 0;
border: 10px solid #DDD;
display: inline;
}
8. Next, find the following code: < div id='sidebar-wrapper' >
< b:section class='sidebar' id='sidebar'
preferred='yes' / >
9. Put the below code beneath it:
The code should look like the following: < div id='sidebar-wrapper' >
< b:section class='sidebar' id='sidebar'
preferred='yes' / >
< b:section class='lsidebar'
id='lsidebar' preferred='yes' >
< b:section class='rsidebar'
id='rsidebar' preferred='yes' >
10. Here, your new template is actually getting done, but actually it's not getting done (?). you need to make one more pilgrimage to get it done, go and find the 2 codes below and then change the width as needed:
1. # header {
background: #000000;
width: 1050px;
height: 100px;
color: #000;
font-size: 11px;
margin: 0;
padding: 0;
overflow: hidden;
}
2. # outer-wrapper {
width: 1050px;
margin: 0 auto 0;
padding: 1px 0 0;
line-height: 2px;
}
3. # footer { ... Width: ...px }
Here is how to know the width that you need to change the width of the above elements. The witdh of the code 1 + code 2= the width that you need:
1. # main-wrapper {
float: left;
width: 400px;
margin: 10px;
padding: 10 10 10px;
}
2. # sidebar-wrapper {
float: right;
width: 600px;
margin: 10px;
padding: 10 10 10px;
display: inline;
}
11. Save your change and check your blogger page design. Make sure that you have two more columns to add gadgets to your template.
Annotation
*Set the width of the # lsidebar and # rsidebar according to the width of the # sidebar-wrapper or vice versa.
*Set the width of # main-wrapper and # sidebar-wrapper according to the witdh of the # header, # footer, and # outer-wrapper or vice versa.
*Bad calculation will cause one sidebar appears below the main column or the other sidebar.
Ex: *Bad calculation: # main-wrapper { ... Width: 700px;}
# sidebar-wrapper { ... Width: 500px;}
# header, outer, footer-wrapper { ... Width: 1100px;}
Ex: *Good calculation: # main-wrapper { ... Width: 700px;}
# sidebar-wrapper { ... Width: 500px;}
# header, outer, footer-wrapper { ... Width: 1200px;}
Feel free to contact me if you confront any trouble. I'm not an expert in html code at all, just, to me it's something chalenging to try to fix it that you ask my help. You know where you can ask me..
0 comments:
Post a Comment