Pages

0

Membuat header jadi 2 kolom

Senin, 26 November 2012
Share this Article on :

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 :






  • Hapus kode di atas, lalu ganti dengan kode di bawah ini :








  • Klik simpan Perubahan
  • Selesai, untuk lihat hasil klik Tata Letak


Artikel Terkait:

0 komentar:

Posting Komentar

 
X-Men Logo 2