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.
    Previous
    Next Post »

    15 comments

    Write comments
    agam
    AUTHOR
    04:41:00 delete

    lanjut ke yg 3 :D

    Reply
    avatar
    suhirno giawa
    AUTHOR
    17:59:00 delete

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

    Reply
    avatar
    21:45:00 delete

    mantab sekaliii

    Reply
    avatar
    Mulia Agust
    AUTHOR
    14:16:00 delete

    izin belajar gan

    Reply
    avatar
    Anonymous
    AUTHOR
    01:16:00 delete

    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.

    Reply
    avatar
    Coretan Puena
    AUTHOR
    03:07:00 delete

    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.

    Reply
    avatar
    18:48:00 delete

    terima kasih bang infonya

    Reply
    avatar
    kunio
    AUTHOR
    01:17:00 delete

    keren banget infonya sob nice post :D

    Reply
    avatar
    Yob Sipe
    AUTHOR
    05:22:00 delete

    awsome, makasih udah di share, ijin kopas gan

    Reply
    avatar
    Daffa
    AUTHOR
    09:27:00 delete

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

    Reply
    avatar
    Daffa
    AUTHOR
    09:29:00 delete

    Gimana caranya ganti warna border?

    Reply
    avatar
    21:20:00 delete

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

    Reply
    avatar
    Anonymous
    AUTHOR
    05:02:00 delete

    Oke sob mantap,, Thanks

    Reply
    avatar
    afrizal fajri
    AUTHOR
    03:30:00 delete

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

    Reply
    avatar