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 :
Ganti dengan kode yang 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;
}
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;
}
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;
}
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>
<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>
<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 ****
3 komentar:
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....
bukannya bosan..tapi lagi banyak kerjaan di darat, jadi blognya agak terbengkalai.:((
cari duit dulu buat biaya onlinenya..:D
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.