Cara Bikin Template Blog Sendiri Bagian 2

Postingan kali ini adalah kelanjutan dari postingan sebelumnya yaitu cara bikin template blog sendiri. Kali ini kita akan membahas kode Css dan Wrapper. Membuat template blogger sebenarnya sangatlah mudah dan mengasyikan jika kita sudah menguasai css dan htmlnya, terutama arti - arti kode css ( Cascading Styles Sheet ) seperti margin, padding, border, dll. Berikut penjelasan singkatnya.

Margin : jarak/batas elemen dengan elemen lain
Padding : jarak elemen dengan isi elemen (elemen anak)
Border : border/gari tepi elemen (pengguaan solid, dotted, double dll)
Float : posisi konten ( penggunaan left, right,center, dll )
Color : warna
Background : latar belakang
Font : huruf
Font-family : jenis huruf
Font-size : ukuran huruf
Font-weigth : atribut huruf ( penggunaan bold, underline, strike dll)
Text-align : posisi text ( pengguaan left, right, center, bottom, top, $endside, dan $starside )
Text-decoration : hampir sama dengan font-weight
Img : image atau gambar
Width : lebar
Height : tinggi
Left : kiri
Right : kanan
Center : tengah;
Justify : sama rata kiri kanan
Bottom : bawah
Top : atas
Text-transform : ( penggunaan capitalize, uppercase, lowercase dan none )
Letter-spacing : jarak antar horisontal antara huruf

Sekarang kita mulai membuat template.

Langkah awal yang harus sobat lakukan untuk membuat template adalah menentukan warna latar belakang dari template tersebut. warna background bisa sobat atur pada css berikut.

body {
  background:$bgcolor; ( warna background )
  margin:0;
  color:$textcolor;
  font:x-small Georgia Serif;
  font-size/* */:/**/small;
  font-size: /**/small;
  text-align: center;
  }

ubah warna background dengan kode warna yang sobat inginkan seperti

putih : #FFFFFF

hitam : #000000

biru : #FF0000

merah : #0000FF , untuk lengkapnya bisa sobat lihat di sini.

atau bisa juga dengan gambar,dengan penggunaan seperti berikut.

background : #000000; url (url gambar) no repeat-x;

Kemudian saatnya sobat menentukan dan meyamakan ukuran lebar header-wrapper, outer-wrapper dan footer-wrapper.

#header-wrapper {
  width:660px; ( lebar header )

margin:0 auto 10px;

  border:1px solid $bordercolor;
  }

#outer-wrapper {
  width: 660px;
  margin:0 auto;

  padding:10px;

  text-align:$startSide;
  font: $bodyfont;
  }

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

• Atur ukuran width atau lebarnya dengan ukuran 900px.

Kira - kira seperti inilah kodenya.

#header-wrapper {
  width:900px; ( lebar header )

margin:0 auto 10px;

  border:1px solid $bordercolor;
  }

#outer-wrapper {
  width: 900px;
  margin:0 auto;

  padding:10px;

  text-align:$startSide;
  font: $bodyfont;
  }

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

setelah itu sekarang kita mengedit wrapper lain dalam outer-wrapper, yaitu main dan sidebar wrapper.

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Atur lebarnya keduanya dengan memperhitungkan lebar header dan margin serta paddingnya. misalnya lebar header 900px maka lebar main-wrapper bisa sobat coba dengan 550px dan sidebar-wrappernya 350px.

550 + 350 = 900px. namun saya sangat anjurkan untuk sobat menggunakan padding dan margin ( contoh 10px ).

Berikut kodenya.

#main-wrapper {
  width: 530px;
  float: $startSide; ( main-wrapper akan berada di sisi kiri )
padding:10px;
margin-right:10px; ( memberi jarak antara main dan sidebar )
border:1px solid #000000; /* border tambahan */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 315px;
  float: $endSide; ( sidebar akan berada di sisi kanan )
padding:10px;
border:1px solid #000000; /* border tambahan */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Jadi singkatnya, keseluruhan wrappernya kira - kira seperti ini.

#header-wrapper {
  width:900px; ( lebar header )

margin:0 auto 10px;

  border:1px solid $bordercolor;
  }

#outer-wrapper {
  width: 900px;
  margin:0 auto;

  padding:10px;

  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 530px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 315px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#footer {
  width:900px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Dengan kode - kode di atas, tampilan blognya akan jadi seperti gambar berikut.

Berikut kode anjuran dari saya.

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


#outer-wrapper {
  width: 900px;
  margin:0 auto;

  padding:10px;

  text-align:$startSide;
  font: $bodyfont;
  }

#main-wrapper {
  width: 530px;
  float: $startSide;
padding:10px;
margin-right:10px;
border:1px solid #000000; /* border tambahan */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

#sidebar-wrapper {
  width: 315px;
  float: $endSide;
padding:10px;
border:1px solid #000000; /* border tambahan */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#footer {
  width:900px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Tampilan untuk kode anjuran di atas seperti berikut.

Lanjut ke cara bikin template blog sendiri bagian 3.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest