Cara Membuat 3 Kolom Dibawah header

Sebelumnya saya sudah pernah menjelaskan bagaimana caranya membuat 2 kolom di bawah header, dan sebelumnya lagi saya juga telah menjelaskan bagaimana caranya menambah widget di bawah kolom header, kali ini saya akan menerangkan sedikit tentang bagaimana caranya menambah 3 kolom widget dibawah header..,,
Gila juga yeaah...,, postingan'nya di pisah-pisah padahal cuman beda angka doang, hehehe, lumayan buat nambah jumlah artikel, heeeeee....,, ya udah langsung saja!


1. Login bloger sobat.

2. Klik tata letak atau layout.

3. Pilih Edit HTML.

4. Sebelum memulai pengeditan alahkah baiknya sobat membackup data sobat terlebih dahulu, caranya pilih Download Template Lengkap.

5.  Centang Expand Template Widget

6. Cari kode ]]></b:skin>,agar lebih mudah sobat bisa menekan Ctrl + F, kemudian paste kode tersebut di sebelah tulisan Find.


6. Paste kode berikut di atas kode ]]></b:skin>;

#tiga-kolom-dibawah-header {
clear:both;
}

.tiga-kolom {

}

7. Copy kode berikut

<div id='tiga-kolom-dibawah-header'>

<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>

<b:section class='tiga-kolom' id='kolom1' preferred='yes' style='float:left;'/>

</div>

<div id='kolom2' style='width: 35%; float: center; margin:0; text-align: left;'>

<b:section class='tiga-kolom' id='kolom2' preferred='yes' style='float:center;'/>

</div>

<div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='tiga-kolom' id='kolom3' preferred='yes' style='float:right;'/>

</div>

<div style='clear:both;'/>

</div>

8. Paste di atas kode ini <div id='main-wrapper'>

penting :
Jika sobat awalnya mengikuti dari membuat 2 kolom di bawah header, (sekali lagi hanya bagi yang mengikuti dari cara membuat 2 kolom di bawah header) sobat hanya tinggal mengganti kode berikut :

</div>
<div id='dua-kolom-dibawah-header'>
<div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

menjadi :

</div>
<div id='dua-kolom-dibawah-header'>
<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 35%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom2' preferred='yes' style='float:center;'/>
</div>

<div id='kolom3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='dua-kolom' id='kolom3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

(tempatnya tetap sama di atas kode <div id='main-wrapper'> jgn ditambah tapi di ganti)

9. Simpan tempalte. 

10. Lihat perubahannya pada tata letak.

cari artikel lainnya, klik yang di bawah