Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat 3 Kolom di Bawah Header Blog

Cara Membuat 3 Kolom di Bawah Header Blog
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;
}
5. Copas kode di bawah ini tepat di atas kode <div id='header-wrapper'> biasanya letaknya di bawah kode </head>
<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
Sahilluqman
Sahilluqman Hanyalah seorang blogger yang ingin bermanfaat untuk sesama

Posting Komentar untuk "Cara Membuat 3 Kolom di Bawah Header Blog"

Berlangganan via Email