Menambah satu kolom di bawah header

Selamat pagi ,,, Kebetulan postingan kali ini ada salah satu temen yang meminta sekaligus saya juga membutuhkanya oke neh langsung aja untuk teritorial menambahkan 1 kolom di bawah header :




1.  Login bloger teman.
2.  Klik tata letak atau layout.
3.  Pilih Edit HTML.

 

4.  Sebelum memulai pengeditan alangkah baiknya temen sekalian membackup datanya terlebih dahulu, caranya pilih Download Template Lengkap.

 

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

6.  Paste copy berikutdan paste diatas kode ]]></b:skin>

#satu_kolom{
margin:10px 0;
padding:1%;
width:98%;
}

7.  Copy kode berikut ini

<div id="satu_kolom">
<b:section class='header' id='satukolomajah' preferred='yes'/>
</div>

8.  Paste di bawah kode ini

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidget="1" showaddelement="no">

<b:widget id='Header1' locked='true' title='test (Header)' type='Header'/>

</b:section>
</div>

9.    Simpan template
10.  Lihat perubahannya pada tata letak.

Menambah 2 Kolom Dibawah Header

Sebelumnya saya sudah pernah menjelaskan bagaimana caranya menambah widget di bawah kolom header, kali ini saya akan menerangkan sedikit tentang bagaimana caranya menambah 2 kolom widget dibawah header..

1.  Login bloger teman.
2.  Klik tata letak atau layout.
3.  Pilih Edit HTML.

4.  Sebelum memulai pengeditan alahkah baiknya temen sekalian membackup datanya terlebih dahulu, caranya pilih Download Template Lengkap.

5.  Centang Expand Template Widget

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

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

#dua-kolom-dibawah-header {
clear:both;
}
.dua-kolom {
}

8.  Copy kode berikut ini

</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> 

9.   Paste di atas kode ini <div id='main-wrapper'>
10. Simpan tempalte.
11. Lihat perubahannya pada tata letak.

 
Menambah 3 Kolom Dibawah Header

1.  Login bloger teman.
2.  Klik tata letak atau layout.
3.  Pilih Edit HTML.

4. Sebelum memulai pengeditan alahkah baiknya temen sekalian membackup datanya terlebih dahulu, caranya pilih Download Template Lengkap.

5.  Centang Expand Template Widget

 

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

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

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

8.  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>

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

Catatan

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'> jangan ditambah tapi di ganti>

10. Simpan tempalte. 

11. Lihat perubahannya pada tata letak.

Selesai , Semoga bermanfaat !!!

Artikel Terkait