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.

    Ditulis Oleh : christian angkouw ~ Cara Bikin Blog

    Christian angkouw Sobat sedang membaca artikel tentang Cara Bikin Template Blog Sendiri Bagian 2. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya

    :: Get this widget ! ::

    15 comments

    04:41:00

    lanjut ke yg 3 :D

    Gmn cara pembuatan template blog dengan Dreamweaver,,,,?

    mantab sekaliii

    izin belajar gan

    ini harus pake adobe dreamweaver yah?
    teamplate yang saya buat melalui adobe photoshop sudah jadi tapi pass pengen dikasih linknya menggunakan adobe dreamweaver saya bingung.

    Gan saya mau tanya, cara membuat kode kayak gitu di tulis secara manual atau pakai dremwewver Gan. maaf Gan saya masih newbe dan masih gaptek maslah kayak gini.

    terima kasih bang infonya

    01:17:00

    keren banget infonya sob nice post :D

    05:22:00

    awsome, makasih udah di share, ijin kopas gan

    09:27:00

    Wah makasih ilmunya, sangat berguna bagi saya, pengen tau cara pake border :)

    09:29:00

    Gimana caranya ganti warna border?

    wahhhh bolehhh tuh gan..
    thank's ya...

    Oke sob mantap,, Thanks

    ada aplikasi khusus nggak untuk buat tema blog, selain notepad++...??

    Poskan Komentar

    Silahkan tinggalkan komentar sobat dan dapatkan backlink satu arah langsung ke blog sobat dengan widget top komentator yang saya pasang di sidebar blog ini. Caranya dengan menjadi pemberi komentar terbanyak di blog ini, tapi mohon jangan Nyepam ya..! Komentar dengan menyertakan LINK / ANCHOR TEXT atau promosi produk tertentu akan saya hapus karena blog ini bukan tempat untuk mempromosikan produk yang dijual di blog anda.