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>
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;
}
5. Copas kode di bawah ini tepat di atas kode <div id='header-wrapper'> biasanya letaknya di bawah kode </head>
Mudah bukan? Semoga bermanfaat.
Sumber:
http://www.maskolis.com/2011/03/membuat-3-kolom-di-bawah-header.html
<div id='top'>6. Save template
<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>
Mudah bukan? Semoga bermanfaat.
Sumber:
http://www.maskolis.com/2011/03/membuat-3-kolom-di-bawah-header.html
0 comments:
Post a Comment