Artikel ini sebagai lanjutan dari bahasan sebelumnya, yakni cara membuat dua kolom di bawah posting artikel pada bagian home page.
Tujuan dari penambahan kolom ini, mungkin agak berbeda pendapat antara bloger satu dengan lainnya. Namun demikian, pastinya cara ini akan menambah “seru” dan “keren” sesuai dengan kebutuhan Sobat.
So, langsung saja berikut tutorialnya.
Cara Meudah Menambah Kolom di Bawah header
1. Baca do’a
2. Masuk akun blogger
3. Pilih template > edit HTML
4. Copas kode di bawah ini tepat di atas kode ]]></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(http://2.bp.blogspot.com/
_7Y9pl24WpQY/SqkUYNZmPxI/AAAAAAAAA4U/
se2boblD4-M/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;
}
<div id=’top’>
<b:section class=’top’ id=’topleft’ preferred=’yes’ showaddelement=’yes’>
</b:section>
<b:section class=’topcenter’ id=’topcenter’ preferred=’yes’ showaddelement=’yes’>
</b:section>
<b:section class=’topright’ id=’topright’ preferred=’yes’ showaddelement=’yes’>
</b:section>
</div>
6. Save template
Mudah bukan? Semoga bermanfaat.
Sumber:
http://www.maskolis.com/2011/03/membuat-3-kolom-di-bawah-header.html