Menambah Kolom dibawah Header

Oke kawan-kawan semuanya, hari ini sepertinya hari yang menyenangkan bagi saya maklum sikecil HELWA ANNAJAH udah mulai bisa memanggil MAMA… senang rasanya. Tapi apa hubungannya dengan postingan yang satu ini ya.. kayaknya ngga ada dech.

Sekarang kebetulan saya lagi semangat dan ingin terus menulis, dan kebetulan teman saya setia yaitu ALIF yang terus mengikuti perkembangan myLOGIC menanyakan tentang cara membuat kolom baru, tapi letaknya diatas. Pembuatan kolom tersebut sebenarnya sudah pernah saya posting [DISINI] namun postingan tersebut membahas masalah menambahkan kolom dibagian bawah seperti pada templates myLOGIC sekarang ini.

Opps.. kepanjangan pengantarnya, karena saya yakin pasti ALIF sudah ngga sabar lagi ingin langsung praktek. Sekarang ikuti langkah-langkah dibawah ini :

Pertama silakan login dahulu diBlogger anda kemudian pilih Layout trus pilih Edit HTML

Karena ini sifatnya script sederhana, jadi Expand Widget Templates tidak usah ditandai..karena bikin kepala pusing melihat kebanyakan script/kode yang tidak diperlukan

Kemudian biasa copy-paste kode dibawah ini tepat diatas kode ]]></b:skin>

/* KolomAtas
—————————- */

#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 #031c5d; */
}

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

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

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

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

Sedikit catatan bahwa pada bagian yang ditandai merah yaitu 950px itu adalah lebar kolom keseluruhan kemudian karena yang ingin dijadikan 2 kolom maka harus dibagi 2 menjadi 450px – 450px kiri dan kanan. Mungkin ada yang bertanya bahwa 450+450=900 bukan 950, ya itu benar. Kenapa total kolom 1 dan 2 cuma 900 itu dikurangi dengan jarak kiri (padding) kiri 15px, tengah 20px dan kanan 15px.

Kalau sudah di Copas (copy-paste), 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>

Kalau sudah ketemu, copy-paste kode dibawah ini tepat berada dibawah kode tersebut diatas

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

Kalau sudah silakan simpan templates anda, kemudian lihat hasilnya di bagian Page Elements

Kalau ternyata tidak ada perubahan terhadap template anda berarti ada kesalahan pada script tersebut dan perlu ceck ulang, namun kalau terdapat dua buah kolom baru dibawah header, maka dipastikan anda hampir menjadi webmaster

Oke teman-teman semua, itu dulu postingan saya hari ini. Walaupun semangat tapi tetap juga cape… jadi moga-moga ada manfaatnya. Kalau ada yang kesulitan ataupun yang sudah berhasil silakan balik lagi kesini dan kasih komentar dibawah.

Ingin Blog anda terkenal daftarkan saja [DISINI]