I want to remind back if you want to change the template that you are using right now , it could be a different result , because there are some differences in your template code with the code I use this ( minima template ) , but the differences can be overcome if understand the codes ( CSS and HTML ) on the template you are using . For example : size ( # outer - wrapper ; # main - wrapper ; # sidebar - wrapper ) , set back padding between the main- wrapper with sidebar ( to match the outer- wrapper ) .
Basically to add a sidebar column sidebar either left or right sidebar that you should consider is the code like : # outer - wrapper ; # main - wrapper ; # sidebar - wrapper , because the code is what will we change in the template .
For example, your current template is a simple template like Template Minima , generally using width / # outer - wrapper width : 660 px and # main - wrapper : 410 px , # sidebar - wrapper : 220px , if you want to add a new sidebar column size 180 px for example , then automatically you have to increase the size of the # outer - wrapper = # main - wrapper + # + # sidebar - wrapper - wrapper newsidebar + left margin .
# outer - wrapper = 410 + 220 px px px + 180 + 20 = 830 px px
So that the sidebar is not attached to the main elements of the distance between them provide 10 px , so the size
# outer - wrapper = 840 px
Tricks to Make 3 Column Blogger Template On
Sign in to Blogger Edit HTML Template >>>
backup your current template (download complete ) to anticipate if the error
do not check the Expand Widget Templates
press F3 to search
Note the css code :
/ * Outer - Wrapper
------------------------------------------ * /
# outer - wrapper {
width: 660px ;
margin : 0 auto ;
padding : 10px ;
text-align : left ;
font : $ bodyfont ;
}
# main - wrapper {
width: 410px ;
float : left ;
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: right ;
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 * /
}
Focus on diwaranai codes above , and do the trick:
fox # outer - wrapper width: 660px to 840 px
add padding -left : 10px ; at # sidebar - wrapper
Add a new column this code :
# newsidebar - wrapper {
width: 180px ;
float: right ;
padding -left : 10px ;
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 * /
}
So the code will be like this :
/ * Outer - Wrapper
------------------------------------------ * /
# outer - wrapper {
width: 840px ;
margin : 0 auto ;
padding : 10px ;
text-align : left ;
font : $ bodyfont ;
}
# main - wrapper {
width: 410px ;
float : left ;
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: right ;
padding -left : 10px ;
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 * /
}
# newsidebar - wrapper {
width: 180px ;
float: right ;
padding -left : 10px ;
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 * /
}
* float: right ; >> put old right sidebar
After installation of the new sidebar css code has been completed, then you also need to install new sidebar id code in the template body .
Your new sidebar id code , make it look like this :
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
< / div >
Add the following code id sidebaru following HTML code :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' widget preferred='yes'> ..... ......... < / b : section> < / div >
So if the combined code id be more or less like this :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
<b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
< / b : section>
< / div >
<div id='sidebarbaru-wrapper'>
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
< / div >
Once the above step is complete , the Save Template
Two column Blogger Template you now have a 3 column template with two column right sidebar column main ( elements blog post ) . To view and make sure you can check the results of the changes in the layout , here you can see the lay out has a 3 column template .
Add new widget in your sidebaru column , and see the results .
note : in order to look more proportionate template you can also resize the width ( width ) # header - wrapper and # footer of the same size on the # outer - wrapper which is 840 px .
Congratulations try buddy ......