Translate

Blog Challenge #3- 3 Column Tutorial

Here is another blog challenge for today that I posted at Dixie Pieces

Way back when I started blogging, I searced to make by 3 column template and I did it. Today I will be letting you know how you can do it too.

3 Column Tutorial

Go to your blog account then click on LAYOUT then EDIT HTML settings

To modify the template to make the blog look like this, look for this block of codes


/* Content
----------------------------------------------- */
#content {
margin: 10px 20px;
padding: 10px;
text-align:left;
}
#main {
padding: 10px;
margin: 0px 240px 10px;
}
#sidebar-r {
float: right;
margin: 0px 0px 20px 5px;
}
#sidebar-l {
float: left;
margin: 0px 5px 20px 0px;
}
#sidebar-r, #sidebar-l {
width: 220px;
padding: 0px;

Change the figures in red to the following:


/* Content
----------------------------------------------- */
#content {
margin: 10px 20px;
padding: 10px;
text-align:left;
}
#main {
padding: 0px;
margin: 0px 180px 10px;
}
#sidebar-r {
float: right;
margin: 0px 0px 20px 5px;
}
#sidebar-l {
float: left;
margin: 0px 5px 20px 0px;
}
#sidebar-r, #sidebar-l {
width: 160px;
padding: 0px;
}

Note: I did play alittle with the width on each side of the columns to accomodate my stuff on my blog.


**Information was taken from Blogger Tips and Tricks site

1 comment:

cindy said...

Great tip. TFS