menambah elemen header dengan membagi menjadi beberapa kolom

menambah elemen header dengan membagi menjadi beberapa kolom . berikut akan di jelaskan bagaimana cara untuk menambah beberapa kolom di bawah header.

sebelum edit silahkan backup dulu template atau simpan template di notepad

cari kode ]]></b:skin> , tambahlakan kode ini di atas kode tsb

#under_header1{ <br /> } <br /> <br /> #under_header2{ <br /> float:left; <br /> width:33.33%; <br /> } <br /> <br /> #under_header3{ <br /> float:left; <br /> width:33.33%; <br /> } <br /> <br /> #under_header4{ <br /> float:right; <br /> width:33.33%; <br /> }

kemudian cari kode ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidget="1" showaddelement="no">
</b:section>
</div>

tambahakan kode ini persis di bawahnya

<div id="under_header1"> <br /><b:section class='header' id='underheader1' preferred='yes'/> <br /></div> <br /> <br /><div id="under_header2"> <br /><b:section class='header' id='underheader2' preferred='yes'/> <br /></div> <br /> <br /><div id="under_header3"> <br /><b:section class='header' id='underheader3' preferred='yes'/> <br /></div> <br /> <br /><div id="under_header4"> <br /><b:section class='header' id='underheader4' preferred='yes'/> <br /></div>

simpan template

jika ingin sperti ini

ubah poin ktiga diatas menjadi

#under_header1{ <br />float:left; <br />width:33.33%; <br />} <br /> <br />#under_header2{ <br />float:left; <br />width:33.33%; <br />} <br /> <br />#under_header3{ <br />float:right; <br />width:33.33%; <br />} <br /> <br />#under_header4{ <br />float:left; <br />width:100%; <br />}

jika ingin seperti ini

ubah poin tiga dengan ini

#under_header1{ <br /> float:left; <br /> width:25%; <br /> } <br /> <br /> #under_header2{ <br /> float:left; <br /> width:25%; <br /> } <br /> <br /> #under_header3{ <br /> float:left; <br /> width:25%; <br /> } <br /> <br /> #under_header4{ <br /> float:right; <br /> width:25%; <br /> }

ingin lebih banyak lagi seperti ini?

ganti lagi poin tiga dengan ini

#under_header1{ <br /> } <br /> <br /> #under_header2{ <br /> float:left; <br /> width:50%; <br /> } <br /> <br /> #under_header3{ <br /> float:right; <br /> width:50%; <br /> } <br /> <br /> #under_header4{ <br /> float:left; <br /> width:33.33%; <br /> } <br /> <br /> #under_header5{ <br /> float:left; <br /> width:33.33%; <br /> } <br /> <br /> #under_header6{ <br /> float:right; <br /> width:33.33%; <br /> } <br /> <br /> #under_header7{ <br /> float:left; <br /> width:25%; <br /> } <br /> <br /> #under_header8{ <br /> float:left; <br /> width:25%; <br /> } <br /> <br /> #under_header9{ <br /> float:left; <br /> width:25%; <br /> } <br /> <br /> #under_header10{ <br /> float:right; <br /> width:25%; <br /> } <br /> <br /> #under_header11{ <br /> float:left; <br /> width:50%; <br /> } <br /> <br /> #under_header12{ <br /> float:right; <br /> width:50%; <br /> } <br /> <br /> #under_header13{ <br /> float:right; <br /> width:50%; <br /> } <br /> <br /> ]]>

dan poin empat akan seperti ini

<div id='header-wrapper'> <br /> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <br /> <b:widget id='Header1' locked='true' title='ali rachmad (Header)' type='Header'/> <br /> </b:section> <br /> </div> <br /> <br /> <div id='under_header1'> <br /> <b:section class='header' id='underheader1' preferred='yes'/> <br /> </div> <br /> <br /> aaa<div id='under_header2'> <br /> <b:section class='header' id='underheader2' preferred='yes'/> <br /> </div> <br /> <br /> <div id='under_header3'> <br /> <b:section class='header' id='underheader3' preferred='yes'/> <br /> </div> <br /> <br /> <div id='under_header4'> <br /> <b:section class='header' id='underheader4' preferred='yes'/> <br /> </div> <br /> <br /> <div id='under_header5'> <br /> <b:section class='header' id='underheader5' preferred='yes'/> <br /> </div> <br /> <br /> <div id='under_header6'> <br /> <b:section class='header' id='underheader6' preferred='yes'/> <br /> </div> <br /> <br /> <div id='under_header7'> <br /> <b:section class='header' id='underheader7' preferred='yes'/> <br /> </div> <br /> <br /> <div id='under_header8'> <br /> <b:section class='header' id='underheader8' preferred='yes'/> <br /> </div> <br /> <br /> <div id='under_header9'> <br /> <b:section class='header' id='underheader9' preferred='yes'/> <br /> </div> <br /> <br /> <div id='under_header10'> <br /> <b:section class='header' id='underheader10' preferred='yes'/> <br /> </div> <br /> <br /> <div id='under_header11'> <br /> <b:section class='header' id='underheader11' preferred='yes'/> <br /> </div> <br /> <br /> <div id='under_header12'> <br /> <b:section class='header' id='underheader12' preferred='yes'/> <br /> </div> <br /> <br /> <div id='under_header13'> <br /> <b:section class='header' id='underheader13' preferred='yes'/> <br /> </div> <br /> <br /> <div id='content-wrapper'> <br /> <div id='crosscol-wrapper' style='text-align:center'> <br /> <b:section class='crosscol' id='crosscol' showaddelement='no'/> <br /> </div>

jika selesai simpan

lihat tata letak, elemen halaman apa sudah sesuai? jika belum silahkan coba lagi dan lihat disini


Tulisan Terkait :

Best Quote Today:
Keberhasilan adalah kemampuan untuk melewati dan mengatasi dari satu kegagalan ke kegagalan berikutnya tanpa kehilangan semangat. (Winston Chuchill)

Jika Anda menyukai tulisan diatas jangan lupa untuk klik tombol suka untuk berbagi dengan teman facebook Anda. Anda juga bisa membagikan tulisan ini di twitter dan jejaring sosial lainnya. Berbagi itu indah.

Become a Fan