test 1

Postingan kali ini adalah kelanjutan dari postingan sebelumnya tentang cara bikin template blog sendiri bagian 2. Kali ini kita akan memfokuskan pembahasan pada komponen lain di header. Silahkan simak tutorial berikut.

hasil template pada tutorial sebelumnya.


Kira kira seperti ini kode header secara keseluruhan.

#header-wrapper{
width:900px;
margin-bottom:10px;
border:1px solid #000000;}

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 5px;
  border: 1px solid $bordercolor;
  text-align: center; ( judul blog berada di tengah, ubah kekiri dengan menggunakan kode left )
  color:$pagetitlecolor; ( untuk mengubah warna dari judul blog, ubah dengan warna yang di sukai )
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont; ( jenis font dari judul blog )
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor; ( efek judul blog ketika di lewati pointer )
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont; ( jenis font dari deskripsi blog )
  color: $descriptioncolor; ( warna dari deskripsi blog )
 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}
  • kode berwarna biru adalah kode yang biasa di edit untuk membagi 2 kolom header serta memodifikasi konten di dalam header secara keseluruhan.
  • kode berwarna ungu adalah kode untuk judul blog.
  • kode berwarna merah adalah kode untuk deskripsi blog
  • kode berwarna hijau adalah kode untuk efek hover pada judul blog
  • kode bercetak tebal digunakan untuk mengatur tampilan image atau gambar dalam header.

Berikut kode anjuran kali ini.

#header-wrapper{
width:900px;
margin-bottom:10px;
border:1px solid #000000;}

#header-inner {
  background-position: center;
  margin-left: auto;
  margin-right: auto;
}

#header {
  margin: 10px;
  border: 0px solid $bordercolor;
  text-align: left;
  color:$pagetitlecolor;
}

#header h1 {
  margin:5px 5px 0;
  padding:15px 20px .25em;
  line-height:1.2em;
  text-transform:uppercase;
  letter-spacing:.2em;
  font: $pagetitlefont;
}

#header a {
  color:$pagetitlecolor;
  text-decoration:none;
  }

#header a:hover {
  color:$pagetitlecolor;
  }

#header .description {
  margin:0 5px 5px;
  padding:0 20px 15px;
  max-width:700px;
  text-transform:uppercase;
  letter-spacing:.2em;
  line-height: 1.4em;
  font: $descriptionfont;
font-size:16px;
  color: $descriptioncolor;
 }

#header img {
  margin-$startSide: auto;
  margin-$endSide: auto;
}

hasilnya akan seperti ini


Setelah membahas tentang header, sekarang kita masuk di Heading.


Seperti yang saya jelaskan pada cara bikin template bagian 1, bahwa heading adalah untuk mengubah tampilan judul pada blog dengan kelas h2 seperti judul artikel, judul widget pada sidebar,judul widget-footer, dll.
berikut kodenya

h2 {
  margin:1.5em 0 .75em;
  font:$headerfont;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:$sidebarcolor;
}

kode anjuran saya..

h2{
margin:1.5em 0 .75em;
font:$headerfont;
line-height:1.4em;
border-bottom:1px solid $bordercolor;
text-transform:uppercase;
font-size:17px;
letter-spacing:.2em;
color:#000}
 kode bercetak tebal adalah kode yang di tambahkan.


berikut tempilannya...


Sambung ke cara bikin template blog sendiri bagian 4

Related Post:

1 komentar:

xSPAMAEASYCOREx mengatakan...

kok gak bisa ya :( huhu !
mampir" ke blog ane donk gan :)
http://xspamaeasycorex.blogspot.com/ makasih :)

 
Copyright © 2012 bereksperiment | Design by Christian Tatelu | Download this template here!