Pengen tau cara menambah elemen header? membagi menjadi beberapa bagian? Berikut cara menambah dan membagi ke beberapa bagian elemen header blogspot Anda seperti gambar berikut:


  • Login ke Blogger > Tata LeTak > Edit HTML
  • Backup template untuk menghindari kesalahan.
  • Cari kode ]]></b:skin>
  • Tambahkan kode berikut di atas kode atas

#under_header1{
}

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

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

#under_header4{
float:right;
width:33.33%;
}
  • kemudian cari kode:

<b:section class='header' id='header' maxwidget="1" showaddelement="no"> </b:section> </div>
Tambahkan kode berikut persis di bawah 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>

  • Simpan template, selesai.
  • Jika ingin sperti ini:

  • ubah poin ketiga di atas menjadi:

#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%;
}

  • Jika ingin seperti ini:



  • ubah poin tiga dengan 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%;
}

  • Jika ingin lebih banyak seperti ini:



  • ganti lagi poin tiga dengan 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%;
}

]]>

  • dan poin empat akan seperti ini:

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

  • Simpan dan semoga berhasil. ;)

Posting Yang Berkaitan Berdasarkan Kategori :




0 komentar