Make Multi Column on blogger

by Nandupatel on January 15, 2009

Here is steps for it.

1. Log in to your Blogger account
2.Go to Edit HTML
3. Add the code below exactly above code ]]></b:skin>

/* bottom
==================== */

#bottom {
width: 750px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}

#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}

#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}

#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;

}
#bottom ul li a:hover {
background: #B1ACB1;
}

#left-bottom {
width: 250px;
float: left;
padding-left:10px;
}

#center-bottom {
width: 250px;
float: left;
padding-left:10px;
}

#right-bottom {
width: 250px;
float: left;
padding: 0 5px 0 10px;
}

4.Find out codes like this:

<div id=’footer-wrapper’>
<b:section class=’footer’ id=’footer’/>
</div>

5.Copy and paste code below exactly above of the previous code.

<div id=’bottom’>

<b:section class=’bottom’ id=’left-bottom’/>

<b:section class=’bottom’ id=’center-bottom’/>

<b:section class=’bottom’ id=’right-bottom’/>

</div>

6.Click Save Template Buttons.
7.You are done!

Go to page element and check result.

Leave a Comment

Previous post:

Next post: