Informasi seputar Kabupaten Wonosobo, Kecamatan Sukoharjo, Catatan Lintang Ayu, Jelita Aristawati, download gratis,software gratis, tutorial blogspot, tutorial wordpress, tutorial adobe photoshop, tutorial coreldraw,Aplikasi HP,Mobiles games, aplikasi symbian,Java game

Menambah dan Membagi Elemen Header menjadi 3,4,5 kolom atau lebih

Tutorial Blogspot menambah elemen header dengan membagi menjadi beberapa kolom baru saya sharingkan sekarang. Di bawah ini saya mencoba menjelaskan bagi anda yang ingin menambah dan membagi elemen header 3, 4, 5 kolom bahkan lebih, tergantung keperluan anda baik itu untuk space iklan, daftar link, maupun untuk widget lainnya.

Salah satu contoh yang saya maksud seperti ini.


Untuk membuat 4 kolom di bawah header langkah-langkahnya adalah sebagai berikut :

1. Login ke Blogger --> Tata LeTak --> Edit HTML

layouteditHTML_thumb3_thumb3

2. Sebaiknya anda mendownload dulu template untuk menghindari sesuatu yang tidak diinginkan pada template anda yaitu dengan Klik Download Template Lengkap

downloadtempeditHTML_thumb2_thumb2

3. Setelah itu cari kode ]]></b:skin>
dan tambahkan kode di bawah ini diatas kode
]]></b:skin>

#under_header1{
}

#under_header2{
float:left;
width:33.33%;
}

#under_header3{
float:left;
width:33.33%;
}

#under_header4{
float:right;
width:33.33%;
}
Sehingga susunan baris kodenya akan terlihat seperti pada gambar di bawah ini :

kode HTML 4 kolom

4. Selanjutnya cari baris kode berikut (atau yang mirip, tergantung model template yang anda pakai tapi pada dasarnya sama) :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
<b:widget id='Header1' locked='true' title='Situs Informasi Internet (Header)' type='Header'/>
</b:section>
</div>
Lalu tambahkan kode di bawah ini dibawah kode di atas :
<div id="under_header1">
<b:section class='header' id='underheader1' preferred='yes'/>
</div>

<div id="under_header2">
<b:section class='header' id='underheader2' preferred='yes'/>
</div>

<div id="under_header3">
<b:section class='header' id='underheader3' preferred='yes'/>
</div>

<div id="under_header4">
<b:section class='header' id='underheader4' preferred='yes'/>
</div>
Sehingga susunan kodenya akan menjadi seperti terlihat pada gambar di bawah ini :

kode HTML 4 kolom b

5. Setelah itu klik tombol SIMPAN TEMPLATE, dan periksa pada Tata Letak apakah kolom yang baru dibuat sudah muncul di bawah header seperti terlihat pada gambar pertama di atas.

6. Jika ingin posisi kolom seperti pada gambar dibawah ini :

4 kolom under header b

Maka baris kode seperti tersebut pada poin 3 dirubah menjadi seperti berikut :
#under_header1{
float:left;
width:33.33%;
}

#under_header2{
float:left;
width:33.33%;
}

#under_header3{
float:right;
width:33.33%;
}

#under_header4{
float:left;
width:100%;
}

Sehingga susunan baris kodenya akan seperti terlihat pada gambar berikut :

kode HTML 4 kolom c


7. Jika ingin posisi kolom Tambah Gadgetnya seperti terlihat pada gambar dibawah ini :

4 kolom under header c


Maka di bawah baris kode #under_header4{ tambahkan baris kode berikut margin:0 25%; dan rubah lebar width-nya, sehingga baris kodenya akan terlihat seperti dibawah ini :

#under_header4{
float:left;
margin:0 25%;
width:50%;
}

8. Atau jika ingin semua posisi kolom sejajar seperti terlihat pada gambar di bawah ini :

4 kolom under header d


Maka baris kode pada poin 3 akan menjadi seperti terlihat di bawah ini :

#under_header1{
float:left;
width:25%;
}

#under_header2{
float:left;
width:25%;
}

#under_header3{
float:left;
width:25%;
}

#under_header4{
float:right;
width:25%;
}

9. Jika ingin membuat lebih banyak lagi kolom di bawah Header, tinggal ikuti aja langkah-langkah yang telah dijelaskan sebelumnya. Misalkan ingin membuat beberapa kolom seperti terlihat pada gambar dibawah ini :

multi kolom under header


Maka susunan baris kode pada poin 3 akan menjadi seperti terlihat di bawah ini :

#under_header1{
}


#under_header2{
float:left;
width:50%;
}


#under_header3{
float:right;
width:50%;
}


#under_header4{
float:left;
width:33.33%;
}


#under_header5{
float:left;
width:33.33%;
}


#under_header6{
float:right;
width:33.33%;
}


#under_header7{
float:left;
width:25%;
}


#under_header8{
float:left;
width:25%;
}


#under_header9{
float:left;
width:25%;
}


#under_header10{
float:right;
width:25%;
}


#under_header11{
float:left;
width:50%;
}


#under_header12{
float:right;
width:50%;
}


#under_header13{
float:right;
width:50%;
}


]]>

Sementara susunan baris kode pada poin 4 akan menjadi seperti :
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='ali rachmad (Header)' type='Header'/>
</b:section>
</div>

<div id='under_header1'>
<b:section class='header' id='underheader1' preferred='yes'/>
</div>

aaa<div id='under_header2'>
<b:section class='header' id='underheader2' preferred='yes'/>
</div>

<div id='under_header3'>
<b:section class='header' id='underheader3' preferred='yes'/>
</div>

<div id='under_header4'>
<b:section class='header' id='underheader4' preferred='yes'/>
</div>

<div id='under_header5'>
<b:section class='header' id='underheader5' preferred='yes'/>
</div>

<div id='under_header6'>
<b:section class='header' id='underheader6' preferred='yes'/>
</div>

<div id='under_header7'>
<b:section class='header' id='underheader7' preferred='yes'/>
</div>

<div id='under_header8'>
<b:section class='header' id='underheader8' preferred='yes'/>
</div>

<div id='under_header9'>
<b:section class='header' id='underheader9' preferred='yes'/>
</div>

<div id='under_header10'>
<b:section class='header' id='underheader10' preferred='yes'/>
</div>

<div id='under_header11'>
<b:section class='header' id='underheader11' preferred='yes'/>
</div>

<div id='under_header12'>
<b:section class='header' id='underheader12' preferred='yes'/>
</div>

<div id='under_header13'>
<b:section class='header' id='underheader13' preferred='yes'/>
</div>

<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Selamat mencoba membuat kolom atau menambah dan membagi Elemen Header menjadi 3,4,5 kolom atau lebih!

Anda baru saja membaca artikel yang berkategori Tutorial Blogspot dengan judul Menambah dan Membagi Elemen Header menjadi 3,4,5 kolom atau lebih. Anda bisa bookmark halaman ini dengan URL http://lint4ng4yu.blogspot.com/2009/08/menambah-dan-membagi-elemen-header.html. Terima kasih!
Ditulis oleh: Lintang Ayu -

1 Komentar untuk "Menambah dan Membagi Elemen Header menjadi 3,4,5 kolom atau lebih"