Tambah 3 Kolom di Atas Blog

Kemarin saya habis modifikasi template ya menurut saya sekarang lebih bagus lah dari yang kemarin. Hmm sekarang saya ingin bahas apa ya? Hmm bahas bagaimana tambah 3 kolom diatas (seperti yang saya pakai). Saya yakin pasti ini artikel yang ke 1000an yang membahas tentang tambah 3 kolom diblog. Namun mudah-mudahan tetap ada manfaatnya, semakin banyak ada artikel semakin bagus dan mudah untuk para pemula mencarinya, dan siapa tahu gayanya pun berbeda-beda. Bagaimana sobat ingin menambah 3 kolom diatas wrapper/arena posting/dibawah menu navbar sobat? Kalau ya ikuti langkah dibawah ini:

1. Sign In ke blog anda.

2. Tuju tab Layout -> Edit HTML

3. Backup template anda dengan mengklik Download Full Template.

4. Centang kotak yang bertuliskan Expand Widget Template.

5. Cari kode ini ]]</b:skin>

5. Setelah ketemu, Pasang kode dibawah ini persis di ATAS kode tadi:

/****** AWAL 3 Kolom Atas *****/

#kolomatas {
width: 940px; /* sesuaikan dgn blog sobat */
position: relative;
float: left;
clear:both;
margin: 0 auto;
padding: 15px 0 15px 0;
color:#fff; /* BISA SOBAT GANTI */
background:#BDBABD; /* BISA SOBAT GANTI */

}

#kolomatas h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00; /* BISA SOBAT GANTI */

font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff; /* BISA SOBAT GANTI */

}

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

#kolomatas ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d; /* BISA SOBAT GANTI */
}

#kolomatas ul li a {
display: block;
padding: 0 10px;
color:#0701FD; /* BISA SOBAT GANTI */
text-decoration: none;

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

#kolomatas-kiri { /* kode kolom kiri */
width: 305px;
float: left;
padding-left:10px;
border-right:3px double #ccc; /* Bisa sobat ganti */
}

#kolomatas-tengah { /* kode kolom tengah */
width: 305px;
float: left;
padding-left:10px;
border-right:3px double #ccc; /* Bisa sobat ganti */
}

#kolomatas-kanan { /* kode kolom kanan */
width: 305px;
float: left;
padding: 0 5px 0 10px;
}

/****** FINISH 3 Kolom Atas *****/

6. Setelah memasang kode tadi, cari kode ini :

<div id="main-wrapper">

(Contoh saja)

7. Setelah ketemu, tambahkan kode diwabah ini tepat di ATAS kode tadi:

<div id='kolomatas'>
<b:section class='kolomatas' id='kolomatas-kiri'/>
<b:section class='kolomatas' id='kolomatas-tengah'/>
<b:section class='kolomatas' id='kolomatas-kanan'/>
</div>

8. Simpan template dan lihat hasilnya...

PERHATIAN

Jika sobat ingin memasang di bawah wrapper and diatas footer, silahkan kode di no.7 sobat simpan di atas <div class="footer'> (misal). Selesai


Moga manfaat...!