3 column blog, how your way of making !
By Unknown - Thursday, May 23, 2013
For those of you who are a blogger, now I will give you tutorial on how to create a 3 column layout on the blog. You must have seen a lot of blogs that have a 3 column design. If you want to create a template you like it please consider the following simple tutorial.
How to Make a Blog Become Three Column Sidebar
1. Go to Template> Edit HTML2. Search for:
# Sidebar-wrapper {
width: 220px;
float: $ endSide;
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 * /
}
and replace the float to be:
float: right;
3. Under it add:
# Left-sidebar-wrap {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
"Float: left" will make you are new left sidebar. Thus you will have a sidebar on the left of your blog template.
1. Go to Template> Edit HTML2. Search for:
# Sidebar-wrapper {
width: 220px;
float: $ endSide;
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 * /
}
and replace the float to be:
float: right;
3. Under it add:
# Left-sidebar-wrap {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
"Float: left" will make you are new left sidebar. Thus you will have a sidebar on the left of your blog template.
4. Find and change the width of the outer-wrapper to 900px or more to avoid overlap with the main sidebar-wrapper.
# Outer-wrapper {
width: 660px;
margin: 0 auto;
padding: 10px;
text-align: $ startSide;
font: $ bodyfont;
}
5. Search # main-wrapper and replace with:
# Main-wrapper {
width: 410px;
float: left;
margin: 0 20px;
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 * /
}
Here's the margin to the left and to the right 20px added to avoid overlap with the main sidebar wrapper. You can change it according to overcome the problem of overlap on the sidebar.
6. Put the following code:
<div id='main-wrapper'>
Just before this code:
<div id='left-sidebar-wrap'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</ Div>
7. Save your template and saved your sidebar 3rd is mounted
Now you have to make some adjustments yourself. Adjust the width by changing the pixel (px) of the "outer-wrapper", "main-wrapper", "sidebar-wrapper" and "left-sidebar-wrap". Set margin, padding and width in the same way to "header-wrapper" and "footer-wrapper" to match the style.
<div id='main-wrapper'>
Just before this code:
<div id='left-sidebar-wrap'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</ Div>
7. Save your template and saved your sidebar 3rd is mounted
Now you have to make some adjustments yourself. Adjust the width by changing the pixel (px) of the "outer-wrapper", "main-wrapper", "sidebar-wrapper" and "left-sidebar-wrap". Set margin, padding and width in the same way to "header-wrapper" and "footer-wrapper" to match the style.
Follow our blog on Twitter, become a fan on Facebook. Stay updated via RSS
0 komentar for "3 column blog, how your way of making !"