Cara Menambah Kolom Pada Header Untuk Tempat Iklan

Cara Menambah Kolom Pada Header Untuk Tempat Iklan | Maksud dari judul artikel diatas, bisa anda lihat pada gambar dibawah berikut :

Pada gambar diatas kolom sebelah kanan merupakan kolom yang akan kita buat/tambahan, kolom tambahan tersebut bisa kita gunakan untuk pasang Iklan atau lainnya terserah untuk apa anda inginkan, karena pada dasarnya kolom pada header sebelah kanan yang akan kita buat tersebut berfungsi sama dengan sidebar blog.

Untuk Membuatnya Silakan Ikuti Langkah Berikut :

• Login ke blog anda Klik DISINI, silakan isi email dan password blog anda
• Pilih ‘TATA LETAK’
• Klik "Edit HTML"
• Agar aman, silakan anda Download dulu template anda (klik Download Template Lengkap), Pada bagian atas
• (gunakan Ctrl + F) Cari kode CSS seperti dibawah ini atau yang mirip (tergantung templete anda) :

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

• Ganti semua kode diatas dengan kode berikut :

#header-wrapper {
width:930px;
margin:0 auto 0px;

background:#38610B url(http://i33.tinypic.com/sw6cfo.jpg) no-repeat top center;

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

• Selanjut nya 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>
• Jika sudah Ketemu, ganti kode tersebut diatas 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>
• Klik Simpan
• Selesai, Sukses Selalu

Berlangganan via RSS Feed

Ingin Artikel seperti ini ?,... masukan alamat email anda untuk berlangganan.

Artikel Anyar Yang Berhubungan :