Cara Membuat Header Menjadi 2 Kolom

Dalam tutorial sebelumnya kita pernah belajar tentang cara membagi footer menjadi 3 kolom. Disini kita akan bersama-sama belajar bagaimana cara membuat header menjadi 2 kolom.

Seperti biasa langkah yang harus kita lalui :

• Login Blogger
• Pilih Rancangan
• Edit HTML, jangan lupa untuk back-up template lengkap kamu
• Beri tanda " centang " pada Expand Widget Template

Langkah selanjutnya carilah kode yang mirip seperti berikut : ( dalam hal ini kode setiap template dapat berbeda-beda )

/* Header----------------------------------------------- */
#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;  background-color:#transparent;  background-image:url(none);}
#header h1 {  margin:5px 5px 0;  padding:15px 20px .25em;  line-height:1.2em;  text-transform:uppercase;  letter-spacing:.2em;  font: $pagetitlecolor;}
#header a {  color:$pagetitlecolor;  text-decoration:none;  }
#header a:hover {  color:$pagetitlecolor;  }
#header .description {  margin:0 5px 5px;  padding:0 20px 15px;  max-width:700px;  text-transform:uppercase;  letter-spacing:.2em;  line-height: 1.4em;  font: $bodyfont;  color: $textcolor; }
#header img {  margin-left: auto;  margin-right: auto;}

Untuk lebih mudah dalam pencarian gunakan ctrl-F carilah /* Header

Gantilah kode di atas dengan kode berikut :

/* Header
-----------------------------------------------
 */


#header-wrapper {
  width:902px;

  margin:0 auto 0px;

  border:1px solid $bordercolor;
  }

#header-one {

width:584px;

background-position: left;

margin-left: auto;

margin-right: auto;

float:left;

}


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


#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center;
  color:$bordercolor;
  background-color:#tranparent;
  background-image:url(none);
}

#header_two{

width:307;

background-position: center;

margin-left: 590px;

margin-right: 5px;

margin-bottom: -5px;

float:center;

color:#0B615E;

}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlecolor;
}


#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }


#header a:hover {
  color:$pagetitlecolor;
  }


#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:900px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $bodyfont;
  color: #000000;

  text-align:center;

}

#header img {
  margin-left: auto;
  margin-right: auto;
}

Sisipkan kode yang berwarna merah. Perhatikan perubahan pada tulisan yang berwarna biru, kamu bisa merubahnya sesuai dengan kebutuhan template kamu.

Selanjutnya di bagian bawah carilah kode berikut :

<div id='header-wrapper'>

Sisipkan kode berwarna merah berikut tepat di bawah kode diatas

<div id='header-wrapper'>

<div id='header-one'>

Pada bagian akhir bagian 'header-wrapper', setelah </div> tambahkan kode berikut :

<div id='header_two'>
<b:section class='header' id='header2' preferred='yes'>

</div>

</div>

Simpan Template.
Selamat mencoba, semoga tidak membingungkan kalian.

Baca Juga :