Tutorial blog kali ini akan membahas bagaimana cara menambah elemen kolom dibawah header blogspot. Kolom yang akan ditambahkan di header blog yaitu berupa 1 kolom, 2 kolom dan 3 kolom dibawah header. Dengan menambah elemen kolom khususnya yang terletak dibawah header blog, akan mempunyai fungsi sendiri, misalnya tempat untuk meletakkan iklan, gambar dan lain-lain.
A. Menambahkan 1 Kolom dibawah Header Blog
1. Login ke akun bloger anda
2. Pada dashboard, pilih Templates
3. Pilih Edit HTML
4. Centang Expand Widget Template
5. Tekan F3, cari kode ]]></b:skin> dan letakkan kode berikut diatasnya
#siji-kolom {margin:10px 0;padding:1%;width:98%;}
6. Selanjutnya cari kode seperti 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>
7. Lalu letakkan kode berikut dibawahnya
<div id="siji-kolom">
<b:section class='header' id='gawesijikolom' preferred='yes'/>
</div>
8. Simpan template
B. Menambah 2 Kolom Dibawah Header Blog
1. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya
#loro-kolom {clear:both;}.gawe-loro-kolom {}
2. Selanjutnya cari kode <div id='main-wrapper'> dan letakkan kode berikut diatasnya
<div id='loro-kolom'>
<div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='gawe-loro-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='gawe-loro-kolom' id='kolom2' preferred='yes' style='float:right;'/></div>
<div style='clear:both;'/></div>
3. Simpan template
C. Menambah 3 Kolom Dibawah Header Blog
1. Cari kode ]]></b:skin> dan letakkan kode berikut diatasnya
#tellu-kolom {clear:both;}.gawe-tellu-kolom {}
2. Selanjutnya cari kode <div id='main-wrapper'> dan letakkan kode berikut diatasnya
<div id='tellu-kolom'>
<div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'>
<b:section class='gawe-tellu-kolom' id='kolom1' preferred='yes' style='float:left;'/>
</div>
<div id='kolom2' style='width: 30%; float: center; margin:0; text-align: left;'>
<b:section class='gawe-tellu-kolom' id='kolom2' preferred='yes' style='float:center;'/>
</div>
<div id='kolom3' style='width: 35%; float: right; margin:0; text-align: left;'>
<b:section class='gawe-tellu-kolom' id='kolom3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
3. Simpan template
Demikianlah tutorial mengenai Cara Menambah 1 Kolom, 2 Kolom, 3 Kolom Dibawah Header Blog, semoga saja bermanfaat untuk anda semua, amin...3x.
0 Comments