F.cher Site: How to make a 3 column above or below the post

Widget This is actually just added it because the default templete actually been good, maybe just to optimize it
For just knowledge, I will try to explain how to make it:

1. Please login to blogger.
2. Go to Layout.
3. Select the Edit tab HML.
4. Do not click on Expand Widget Templates, because it would bother my friend.
5. Put the following css code above the code ]]></ b: skin>

/* –- Top --*/
#top {
background:#fff;
margin-top:10px auto;
width:960px;
overflow:hidden;
font-size:12px;
padding:10px;
}

#top h2 {
background:#000 url(http://lh5.ggpht.com/_7Y9pl24WpQY/Ss37F0ZA9kI/AAAAAAAAB2k/c_ySi8QZg20/header_thumb%5B2%5D.jpg) repeat-x;
font-size:14pt;
font-weight:400;
text-align:center;
font-style:normal;
line-height:1.3em;
color:#fff;
padding:5px;
margin-top:-10px;
margin-left:-10px;
margin-right:-10px;
}

#top ul {
color:#333;
margin:0;
padding:0;
}

#top ul li {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNO-xme2C1Lf1KBgGi0q8b5w3Jz2iALhrral7mceTCyVlac86IPcV5s54Gre1IiLDKb0g0Ap48nUJaaSDmmbcjIbWcczDhmb8IO1DcAmvFvMvWFrZ0WAF3dr8Gcew2FtCgTTYaLujMhxeH/s320/b3.gif) no-repeat;
list-style-type:none;
border-bottom:1px dashed #CCC;
margin:0 0 10px;
padding:0 0 5px 20px;
}

#top ul li a:hover {
margin:0px 0px 5px;
padding:0px;
}

#topcenter {
width:300px;
float:left;
margin-left:10px;
background:#fff;
padding:10px
}

#topleft {
width:280px;
float:left;
margin-left:10px;
background:#fff;
padding:10px;
}

#topright {
width:280px;
float:right;
margin-left:10px;
background:#fff;
padding:10px;
}

6. Find similar code like this, usually located under the </ head>