Pada umunnya kolom di bawah header di
gunakan untuk memasang gambar, navbar, teks, atau teman ingin memasang
foto-foto temen yang paling narsis heeeee. Langkah - langkah yang perlu
sobat perhatikan adalah :
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{7. Copy kode berikut ini
margin:10px 0;
padding:1%;
width:98%;
}
<div id="satu_kolom">8. Paste di bawah kode ini
<b:section class='header' id='satukolomajah' preferred='yes'/>
</div>
<div id='header-wrapper'>9. Simpan template
<b:section class='header' id='header' maxwidget="1" showaddelement="no"><b:widget id='Header1' locked='true' title='test (Header)' type='Header'/></b:section>
</div>
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
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 {8. Copy kode berikut ini
clear:both;
}
.dua-kolom {
}
</div>9. Paste di atas kode ini <div id='main-wrapper'>
<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>
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
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 {8. Copy kode berikut
clear:both;
}
.tiga-kolom {
}
<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>
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>
</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>
10. Simpan tempalte.
11. Lihat perubahannya pada tata letak.
Semoga teknik ini bermanfaat
Tidak ada komentar:
Posting Komentar