Headlines News :
Home » » Membuat header jadi 2 kolom

Membuat header jadi 2 kolom

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.
Share this article :

0 komentar:

Speak up your mind

Tell us what you're thinking... !

Recent Post

Popular Posts

Dreaming IT News

 
Support : Dre@ming Post | Dre@aming Group | I Wayan Arjawa, ST
Proudly powered by Blogger
Copyright © 2011. research - All Rights Reserved
Template Design by Dre@ming Post Published by Hot News Seventeen