Pencarian

Jumat, 22 Juli 2011

CARA MEMBUAT HEADER MENJADI 2 KOLOM





     Kebanyakan header hanya terdiri 1 kolom saja,ini bisa jadi sengaja di buat hanya 1,kemungkinan karena suatu hal tertentu.Akan tetapi tidak jarang juga ada sebagian blog yang headernya terdiri atas 2 kolom.Nah apabila teman - teman ingin membuatnya menjadi 2 bagian,yaitu cukup dengan sedikit menambah kan kode css ke dalam tamplate.Untuk lebih jelasnya lakukan langkah - langkah berikut :
  • Log in dulu ke blogger
  • Tata letak
  • Edit HTML
  • Download tamplate anda untuk mengatasi hal-hal yang tak diinginkan
  • Jangan lupa kasi tanda centang di kotak kecil kanan atas
  • Kemudian cari kode
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}
  • Kemudian hapus dan ganti dengan kode di bawah ini
#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#38610B;
height:180px;
}

#head-inner {
width:500px;
background-position: left;
margin-left: auto;
margin-right: auto;
float:left;
}

#header {
margin: 0px;
text-align: left;
color:#ffcc66;
}

#r_head{
width:430px;
float:left;
padding-top:10px;
}
  • Kemudian cari kode
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
  • Hapus dan ganti dengan kode
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/>
</b:section>
</div>
<div id='r_head'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>
  • kemudian save tamplate 
  • Selesai
     Selamat mencoba,semoga bermanfaat.***

0 komentar:

Posting Komentar