Inilah gambar-gambar yang akan kita pasang pada template minima.
1. TopHeader. ( ukuran gam 673 px lebar , 53 px tinggi )
2 Header-Wrapper ( ukuran gam 673 px lebar, 153 px tinggi )
Artinya saya ingin membagi bagian header menjadi dua bagian yang pertama Top Header ( header bagian atas ) dan yang kedua header-wrapper ( header bagian bawah ). - ini mungkin solusi untuk membagi gambar header yang terlalu besar, atau bisa juga untuk kepentingan lainnya. ( nanti anda juga mengalaminya. red )
caranya : - biar cepat cari kode css ini.
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
ganti dengan kode ini.
#topheader {
background: url(http://i120.photobucket.com/albums/o190/jaloewig/bottel/tophead-bottel4.jpg) no-repeat center;
width:670px;
height:59px;
margin:0 auto;
}
#header-wrapper {
background: url(http://i120.photobucket.com/albums/o190/jaloewig/bottel/bothead-bottel4.jpg) no-repeat center;
width:670px;
height:152px;
margin:0 auto;
}
kemudian ganti nilai padding atau margin pada kode-kode dibawah seperti perubahannya saya tulis dengan warna.
#header {
margin:0px 5px;
border: none; /* atau buang saja */
text-align: center;
color:$pagetitlecolor;
}
#header h1 {
margin:0px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header .description {
margin:0 auto 5px;
padding:0 20px 15px;
max-width:500px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}
3. Outer-Wrapper ( ukuran gam 673 px, namun di repeat gambarnya )
caranya :
cari kode dibawah . kemudian tambahkan kode background gambar. ganti juga nilai width-nya penambahnya seperti tulisan berwarna.
#outer-wrapper {
background: url(http://i120.photobucket.com/albums/o190/jaloewig/bottel/main-bottel4.jpg) repeat-y center;
width: 670px;
margin:0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
word-wrap: break-word;
overflow: hidden;
}
4.Footer ( ukuran gam 673 px, 85 px tinggi )
begitu juga untuk footer-nya.
#footer {
background: url(http://i120.photobucket.com/albums/o190/jaloewig/bottel/foot-bottel4.jpg) no-repeat center;
width:670px;
height:85px;
clear:both;
margin:0 auto;
padding-top:0px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Setelah berer masukan atau tambahkan tag
<div id = 'topheader'/> di atas tag <div id=header-wrapper>
pada bagian Html-nya. seperti terlihat pada tulisan berwarna.
<div id='topheader'/>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Big Small (Header)' type='Header'/>
</b:section>
</div>
Sampai saat ini pekerjaan kita sudah beres. namun bila kita tekan tombol Pratinjau maka teks pada kolom postingan keluar dari gambar. untuk membetulkanya cari kode ini.
.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}
pisahkan class di atas hingga seperti ini.
.sidebar .widget {
border-bottom:1px dotted $bordercolor;
margin:0 1em 1.5em;
padding:0 0 1.5em;
}
.main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em 1em;
padding:0 0 1.5em;
}
sekarang coba kita klik Pratinjau, jika tidak ada masalah seharusnya kita sudah mempunyai blog dalam botol.
pada tulisan selanjutnya kita akan menambahkan sebuah tab menu pada bagian penutup botolnya.
bersambung
