Find What You Need

16 Feb 2010

Membagi 2 Kolom Header Blogspot (versi 2)

Ini merupakan lanjutan dari cara membagi 2 kolom header. Model yang pertama anda bisa membacanya disini. Sedangkan untuk model yang kedua, silahkan ikuti terus tulisan ini. Langsung saja menuju pokok bahasan biar tidak terlalu panjang tulisannya.


Model Kedua .

   1. Membuat Kode css .

Silahkan hapus dulu kode css berikut

#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 css yang ini :







Simpan dulu hasil kerja tadi.

   2. Membuat ID Pemanggil .

Setelah kode css diatas tersimpan, selanjutnya membuat kode ID pemanggilnya. Untuk itu hapus dulu kode 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 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 id='header-kanan'>
<b:section class='header' id='header-kanan-atas' showaddelement='yes'>
</b:section>
</div>
<div id='header-kanan-bawah'>
<b:section class='header' id='header-bagian-kanan-bawah' showaddelement='yes'>
</b:section>
</div>
</div>

Selesai. Simpan hasil kerja kita, sekarang coba lihat hasilnya.



**** Semoga Bermanfaat ****

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

Berlangganan Lewat RSS

5 komentar:

dimpun Pada 16 Juni 2010 11.07 mengatakan...

terimakasih, semoga saya bisa mencobanya.

Dazbor Pada 11 Januari 2011 03.28 mengatakan...

tipsnya bikin pusing b-( ada yang ringkas dan praktis gak ? :-/

ismangurukelas Pada 4 Juli 2011 17.45 mengatakan...

Kasih contoh atau gambar yang headernya telah dibagi jadi 2 kolom, dong... biar kita gak tebak-tebak hasilnya. Apa kedua kolom yang telah dibagi 2 bisa di buat judul blog atau uraian deskripsi blog yang berbeda?.

Albaniyu Pada 5 Juli 2011 00.28 mengatakan...

@dazbor
kalau cuma di baca nggak di coba ,ya pasti pusing oom ...:D
coba deh sambil dipraktekan ama template oom.

@ismangurukelas
kalau mau lihat contohnya dan hasil yang telah saya coba, coba deh klik link ini .

z Pada 27 November 2011 16.23 mengatakan...

THANKS MAS BRO
http://pre-k2.blogspot.com/

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