Utak Atik Template Blogspot "Blog In A Bottel 2"

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

 

• «Jaloee Blog
• 1
• 2
• 3