Cara Menambah Kolom Disebelah Header

Halo sobat blogger dari sabang sampai ke zimbabwe merauke.Kelihatannya aku lagi demen sama yang namanya Ngedit-ngedit Template nih.Udah ada 3 postingan yang isinya tentang ngedit template.Yaitu, membuat 2 atau 3 kolom di bawah header dan membuat kolom di bawah header.Sekarang cara biar bisa menambah kolom di samping header.

Cara enggak sulit-sulit amat seperti keliahatannya.Tapi lebih mumet dari pada postingan tentang edit template lainnya.Oke,here we go!! Monkey Emoticon

1.Harus dan wajib login ke blogger
2.Meluncur ke Layout dilanjutkan ke Edit HTML
3.Lebih baik di download dulu biar kalo ada kesalahan bisa di back up.
4.Cari kode CSS dibawah ini

#header-wrapper {
width:660px;
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;
}

5.Hapus kode CSS diatas dan ganti menjadi kode CSS seperti dibawah ini

#header-wrapper {
width:930px;
margin:0 auto 0px;
background:#38610B url(http://i33.tinypic.com/sw6cfo.jpg) no-repeat top center;
height:180px;
}

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

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

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

NB :
Kode Merah adalah kode warna.Bisa diganti-ganti.Pilihan kode warna klik disini!
Kode Kuning adalah url gambar untuk headernya.Bisa diganti
Kode hijau bisa diganti sesukamu.

6. Sekarang cari kode dibawah 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 dan ganti menjadi kode dibawah ini

&lt;div id='header-wrapper'&gt;
&lt;div id='head-inner'&gt;
&lt;b:section class='header' id='header' maxwidgets='1' showaddelement='no'&gt;
&lt;b:widget id='Header1' locked='true' title='Test Blog (Header)' type='Header'/&gt;
&lt;/b:section&gt;
&lt;/div&gt;
&lt;div id='r_head'&gt;
&lt;b:section class='header' id='header2' preferred='yes'/&gt;
&lt;/div&gt;
&lt;/div&gt;
7. Save template dan lihat sendiri hasilnya


Important :

Sebaiknya emang di download aja biar bisa di back up.Kalo enggak entar kejadiannya seperti punyaku yang mengabaikan mendownload template.Jadinya ilang deh kolom iklannya,gara-gara gak di download juga lah kolom dibawah headernya hilang entah kemana yang di pake buat nempatin kolom iklan Monkey Icons.Jadinya mulai lembur lagi dengan buat gambar header baru juga nambahin 1 kolom dibawah header sama kolom iklannya.Untungnya semua itu udah ada di blogku Monkey Emoticon.Jadi tenang deh soal blognya.Kalo banner header sih gampang aja.

Oke deh,sampai jumpa di artikel "nge jreng" lainnya di blog ini.
u comment i follow
Bookmark and Share
Dapatkan Artikel terbaru dari blog ini, langsung ke e-mail anda dengan berlangganan disini.

Enter your email address:

Delivered by FeedBurner

Powered by FeedBurner

Sudah Baca Yang Ini ?



Comments :

11 comments to “Cara Menambah Kolom Disebelah Header”

Rizky2009 mengatakan...
on 

amankan pertamax........ wah sip ini sop tp kode CSS q dah rapet bgt, agak males nih utak ayik CSS, kalau aq buat blog lagi akan aq coba, trima kasih sharenya sob

Aditya's Blogsphere mengatakan...
on 

Manteb kawan........klo di samping header tanpa mengganggu judulnya gmn ya?

Indahnya Berbagi mengatakan...
on 

sama demennya, ttp berkreasi kelak hasilnya akn terlihat...

agung ap mengatakan...
on 

hehehe keren!jadi bisa pake pasang iklan

Rival Aditya mengatakan...
on 

Mengamankan yg kelimaxx dlu sob..

wah mantab tutornya....

rumah blogger mengatakan...
on 

ok sekali, sukses yaa

sabirinnet mengatakan...
on 

kalu blog saya sudah dari templatenya, syukur sekali jadi tidak repot lagi mas..

Digital Think mengatakan...
on 

Thanks infonya

usi2506 mengatakan...
on 

Ih..ngeri,..soalnya aku pernah kejadian, blog ku ancurrr..ya itu tadi gara2 edit2 terus..akhirnya jadi maju mundur nich..gimana ya?

usi2506 mengatakan...
on 

Ih..ngeri,..soalnya aku pernah kejadian, blog ku ancurrr..ya itu tadi gara2 edit2 terus..akhirnya jadi maju mundur nich..gimana ya?

eko saputro mengatakan...
on 

nice gan ,,
suwun

Posting Komentar

Blog ini DoFollow.
Jadi silahkan berkomentar disini.

Yang penting komentar bukan Spam,Porno,maupuun berunsur SARA.Jika ada yang seperti itu akan langsung dihapus.


Mau punya buku tamu seperti ini?
Klik di sini (Info Blog)

Friends

 

Copyright © 2009 by Rahad 2 Six