BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Blog In A Bottel bag 2

Inilah gambar-gambar yang akan kita pasang pada template minima.

1. TopHeader. ( ukuran gam 673 px lebar ,  53 px tinggi )

 

tophead-bottel4

2 Header-Wrapper ( ukuran gam 673 px lebar, 153 px tinggi )

 

bothead-bottel4

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 )

 

main-bottel4

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 )

 

foot-bottel4

 

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
Page views this post: reader

1 komentar:

Pramuka SMP Negeri 3 Mojoagung said...

Ajarin Nambahin Animasi di Blogger Donk

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial