Cara Membuat 2 Kolom Elemen di Bawah Header Blogspot

Cara Membuat 2 Kolom Page Elemen di Bawah Header (di Atas Kolom Posting) Pada Template Blogspot/Blogger.
Cara membuatnya adalah sebagai berikut:

Login ke Blogger klik Rancangan klik Edit HTML klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.
Beri tanda centang pada kotak di samping tulisan Expand Template Widget, kemudian cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol (F3)
Jika sudah ketemu tambahkan kode berikut di atasnya :

#kolomatas {
width: 950px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:none;
padding: 15px 0 15px 0;
}

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

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

#kolomatas ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dotted #fff;
/* border-bottom: 1px dashed #ccc; */
}

#kolomatas ul li a {
display: block;
padding: 0 10px;
color:#FFFF33;
text-decoration: none;

}
#kolomatas ul li a:hover {
background: #b1acb1;
}

#left-kolomatas { /* kode kolom kiri */
width: 450px;
float: left;
padding-left:15px;
}

#right-kolomatas { /* kode kolom kanan */
width: 450px;
float: left;
padding: 0 5px 0 15px;
}

Keterangan : kode yang ditandai dengan warna biru yaitu 950px itu adalah lebar kolom keseluruhan; kemudian karena ingin dijadikan 2 kolom maka harus dibagi 2 menjadi 450px - 450px kiri dan kanan. Sedang sisa jaraknya (50px) digunakan untuk jarak kiri (padding) kiri 15px, tengah 20px dan kanan 15px.

Sekarang cari kode seperti dibawah

<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1′>
<b:widget id='Header1′ locked='true ' title='Nama Blog Anda' type='Header'/>
</b:section>
</div>

dan letakan kode dibawah ini tepat berada dibawah kode diatas

<div id='kolomatas'>
<b:section class='kolomatas' id='left-kolomatas'>
</b:section>
<b:section class='kolomatas' id='right-kolomatas'>
</b:section>
</div>

Jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya.

Selamat mencoba

Original post blogtutorialblogger.blogspot.com