Membuat header jadi 2 kolom

Assalamu'alaikum wr. wb.

Template buatan blogger tentu saja sudah diperhitungkan akan segala kemudahan yang akan diperlukan oleh pengguna. Akan tetapi masih saja pengguna belum merasa puas dengan kondisi asli dari template tersebut. Sehingga dengan demikian banyak sekali pengguna akan merubah bentuknya, disesuaikan dengan selera dari pengguna. Salah satunya dengan mengubah tampilan pada header. Header biasanya hanya satu kolom, untuk anda/panjenengan yang akan menambah menjadi 2 kolom, ikuti langkah-langkahnya sebagai berikut:

  • Login ke blogger anda dengan ID kepunyaan sendiri
  • Klik Layout
  • Klik Elemen Halaman
  • Terus Klik Edit HTML. dan cari kode CSS seperti ini:

/* Header
=================================
*/
#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

#header-inner {
width:900px;
background-position: center;
margin-$startSide: auto;
margin-$endSide: auto;
}

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


  • Hapus kode-kode di atas, lalu ganti dengan kode berikut ini :

/* Header
===================================
*/

#header-wrapper {
width:900px;
margin:0 auto 0px;
background:$bgheadercolor url(http://ahom24.googlepages.com/magazine_01.jpg) no-repeat top center;
height:190px;
}

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

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

#r_head{
width:300px;
float:left;
padding-top:10px;
}


  • Coba cari ke bagian bawah, sampai ketemu kode seperti ini :

<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 kode di atas, lalu ganti dengan kode di bawah ini :

<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 Perubahan
  • Selesai, untuk lihat hasil klik Tata Letak


Semoga berguna dan sukses bagi anda/panjenengan, terus semangat.
Wassalamu'alaikum wr. wb.

4 komentar

Chugy

mksih bozzz infonya. tp pny saya g bisa si kodenya beda saya menggunakan template depault blogger Mr. Moto Rising (Ellington style).mksh

Together We Share

kok sulit ya apalagi beda template-nya. ya udah saya tukar link aja ya? link anda sdh saya pasang. ditunggu backlinknya.. TRIMS

Admin

bozz kok sulit sich. apalagi beda templatnya, saya menggunakan Delight template dr blogger template place
Tukar link juga yach.....

Abiyasha

thank you tutornya, berhasil dipasang.

Posting Komentar