Find What You Need

16 Feb 2010

Membagi 2 Kolom Header Blogspot (versi 1)

Seperti sudah di ketahui, biasanya template default blogger setiap elemen kolom nya cuma disediakan satu, baik itu kolom header, kolom postingan, kolom sidebar, crosscol dan kolom footer. Nah,Untuk menambah kolom-kolom  di template blogger yang perlu kita lakukan adalah menambahkan kode ataupun merubah kode kode pada CSS.


Untuk penambahan kolom sidebar pernah dibahas disini dan juga disini , sedang untuk penambahan kolom footer pernah juga dibahas disini .Pada postingan kali ini kita akan membuat atau tepatnya membagi kolom header menjadi dua. Ada dua model header, model pertama terdiri dari 2 kolom, contoh seperti ini :

 Model pertama.

Model yang kedua terdiri dari 3 kolom, Contohnya seperti ini :

 Model Kedua.

Untuk membuatnya , mari kita ikuti caranya, sebagai catatan untuk contoh saya menggunakan template Minima yang telah diubah lebarnya :

Model Pertama
   1. Memasukkan kode css

Seperti biasa jika kita ingin menambahkan kolom pada template blogger, terlebih dahulu kita membuat property dan value nya dulu dalam css,untuk itu hapus dulu kode ini :

#header-wrapper {
  width:960px;
  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 dengan kode yang ini

#header-wrapper {
width:960px;
margin:0 auto 0px;
background:#ccc;
height:160px;
}

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

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

#header-kanan{
width:360px;
float:left;
padding-top:10px;
}
Silahkan save atau simpan dulu.

Bila kita telah menggantinya dengan kode css diatas, harap dihapus dulu value  yang seperti ini : max-width:700px; dalam property # header .description , sedangkan value untuk yang lainnya biarkan saja.

   2. Membuat ID pemanggil.

Setelah membuat kode css, selanjutnya adalah membuat kode id untuk memangilnya. Untuk itu kita hapus dulu kode id pemanggil yang lama, seperti ini :

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Nama Blog Anda (Header)' type='Header'/>
</b:section>
</div>

Ganti dengan kode yang 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='Nama Blog Anda (Header)' type='Header'/>
</b:section>
</div>
<div id='header-kanan'>
<b:section class='header' id='header2' preferred='yes'/>
</div>
</div>

Selesai. Jangan lupa di simpan, dan sekarang coba lihat hasilnya.

Untuk Model Yang Kedua , Sillahkan ikuti di sini .



**** Semoga Bermanfaat ****


Untuk mendapatkan informasi dan postingan terbaru dari blog ini, silahkan ketikkan email anda di form berlangganan. Gratiiiis...

Berlangganan Lewat RSS

3 komentar:

Anonim mengatakan...

thank..bro atas tipnya..

tambah lagi postingannya dong, klu saya lihat kayaknya udah lama nih blog ngak ada postingan baru..

apa pemilik ni blog udah bosan kali ya....

Albaniyu Pada 5 Juli 2011 pukul 00.36 mengatakan...

bukannya bosan..tapi lagi banyak kerjaan di darat, jadi blognya agak terbengkalai.:((

cari duit dulu buat biaya onlinenya..:D

Anonim mengatakan...

Just want to say your article is as astonishing.
The clearness in your post is just great and i could assume you are an expert on this subject.
Well with your permission let me to grab your feed to keep
updated with forthcoming post. Thanks a million and please continue the enjoyable
work.

My blog post :: Pure Cleanse Review

Posting Komentar

Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.

Ketikkan Karakter Jika Ingin Memasang Emoticon.
:)):)];));;):D;):p:((:):(:X=((:-o:-/:-*:|8-}~x(:-tb-(:-Lx(=))

Artikel Yang Lainnya

 

My Best Friend

Mengenai Saya

Foto saya
Sebagai tempat belajar dan menyimpan arsip jika saya membutuhkannya suatu waktu, dan semoga menjadi ilmu yg Bermanfaat bagi Orang yang membacanya .

Visitor

free counters

Belajar Bersama Copyright © 2009 Template Wanaking Di Desain Ulang Oleh Albaniyu | Blogger Template