Utak-Atik Blog

Setelah selesai dengan tutorial bagian 1 dan bagian 2, maka kini saatnya memproyeksikan apa yang sudah dibuat tadi menjadi layout blog beserta segala pernak-perniknya.

Kita akan mendefinisikan tampilan blog dengan kode-kode CSS yang bagian-bagiannya seperti pernah diuraikan pada ‘Part#2 - Blog Sederhanana‘, yaitu main, header, content, sidebar dan footer.

Lembar Pengaturan (Stylesheet)
Kode-kode CSS bisa diketik pada lembar notepad pada windows, yang kemudian disimpan dengan format CSS. Siapkan lembar notepad untuk memulai tutorial kali ini.

Bagian awal ketikkan seperti berikut:

untuk memberi nama lembar stylesheet. Sebenarnya tidak diberi namapun tidak jadi masalah, hal ini diberikan untuk kemudahan saja. Kemudian simpan dahulu lembar ini dengan nama file layout.css (titik dan css diketik langsung pada form ‘File Name’). Simpan di folder ’simple-blue’.

1 - Body
Body adalah bagian dari struktur dalam HTML yang akan memuat semua format dan informasi yang akan ditampilkan pada sebuah website/blog.

- Margin dan padding diset 0, krn pengaturan posisi akan disetting pada bagian ‘main’.

- Background diberi kode #2B4C8D, disesuaikan dengan warna back pada layout blog di photoshop.

- Warna font diset abu-abu tua (#333). Ukuran font 12 pixel dengan jenis font ‘Trebuchet MS’, Verdana, Georgia, Arial, sans-serif’.

Kode CSS untuk setting font bisa juga seperti ini:

Hasil setting body pada stylesheet menjadi seperti berikut:

Dengan setting tsb, maka semua format baik background sampai font akan sama. Kecuali pada bagian lain diberi setting font yang berbeda.

2 - Main
Bagian utama ini akan mengatur lebar dan letak blog. Settingnya sbb:

- Lebar blog disetting 730 pixel disesuaikan dengan lebar layout blog yg dibuat dengan photoshop.

- Margin top dan bottom diset 0 sedangkan left dan right diset ‘auto’, dengan maksud posisi blog secara otomatis akan berada di tengah pada resolusi monitor yg berbeda.

Pattern margin dan padding adalah:
margin: top right bottom left;
padding: top right bottom left;

Jika top dan bottom disetting sama dan jika right dan left juga disetting sama, maka penulisan kodenya bisa digabung. Misalnya top dan bottom 5px, right dan left 10px, maka penulisannya menjadi:

- Line-height adalah jarak antar baris text yg berada dalam arean main diset 16 pixel.

- Background main diberi warna putih, latar image ‘backmain.gif’ yg sudah dibuat dengan photoshop. Kemudian image yg lebarnya sama dengan lebar setting main ini diulang arah sumbu y (vertikal), sehingga menghasilkan latar belakang putih dan blur dikiri-kanannya.

Kode CSS untuk setting background bisa juga seperti ini:

Setting url(backmain.gif), menunjuk pada file backmain.gif yg disimpan pada root folder yg sama dengan file layoutblue.css ini. Jika file2 images berada pada folder/tempat yang lain, definisikan dengan jelas.

Misalnya, backmain.gif ditaruh di geocities dengan url: http://ynalinkware.geocities.com/blue/backmain.gif
maka setting url background menjadi: url(http://ynalinkware.geocities.com/blue/backmain.gif)

Setting main pada stylesheet menjadi seperti berikut:

3 - Header
Di bagian ini akan disetting dua buah header yang masing-masing akan memuat image ‘header1.gif’ dengan nama CSS #header1 dan ‘header2.gif’ dengan #header2. Posisinya berada paling atas blog.

- Margin, padding dan pengulangan images atau background-repeat untuk #header1 dan #header2 disetting sama, yaitu:

Background-repeat diset no-repeat karena image ‘header1.gif’ dan ‘header2.gif’ hanya diberlakukan satu kali atau tidak diduplikasi/ulang.

- Yang berbeda tapi dengan nama setting sama adalah background-image dan height atau tinggi yang disesuaikan dengan masing-masing image. Sedangkan lebar image tidak perlu disetting, krn lebarnya sudah sama dengan lebar bagian ‘main’, yakni 730 pixel.

Cara mengetahui lebar dan tinggi sebuah image adalah dengan klik kanan mouse pada nama file image dimaksud, lalu pilih ‘properties’ dan klik ’summary’ (kemudian ‘advanced’ untuk winxp).

Setting #header1 dan #header2 pada stylesheet menjadi seperti berikut:

4 - Content
Pada bagian ini tempat untuk mengatur posisi dan tampilan posting.

- Lebar area posting diset 450 pixel,

- Letak area diposisikan sebelah kiri dan margin dibuat 0,

- Padding diatur baik atas, bawah, kanan dan kiri untuk memposisikan isi content berupa baris text atau paragraf berada.

- Dibuat garis pemisah antara isi content dengan sidebar dengan setting garis utuh (solid) di kanan, ukuran 1 pixel dan berwarna abu-abu muda,

Setting #content pada stylesheet menjadi seperti berikut:

5 - Sidebar
Sidebar mengatur posisi dan format semua kelengkapan blog, seperti menu, links, about me dsb.

- Lebar area disetting 200 pixel. Letaknya diposisikan sebalah kanan dan margin 0,

- Padding diatur dan disesuaikan dengan posisi Content,

- Format font dibuat beda dari ‘body’, yaitu berukuran 10 pixel, jenis font verdana dan berwarna biru sama dengan background body,

Setting #sidebar pada stylesheet menjadi seperti berikut:

5 - Footer
Bagian paling bawah dari blog yg biasanya memuat copyright atau keterangan lainnya.

- Footer yang setting lebar sama dengan lebar #main, yakni 730px ini masih dalam area #main, tapi karena pada bagian atas masih dalam setting #content (float:left;) dan #sidebar (float:right;), maka perlu dinon-aktifkan keduanya dengan kode:

- Footer diberi background image ‘footer.gif’ yg tidak diulang dengan tinggi image 55 pixel. Di muka image tadi akan diberi text, dan agar posisi text berada di tengah image secara vertikal, maka tinggi image sebenarnya (height) dikurangi tinggi (top) padding,

Setting #footer pada stylesheet menjadi seperti berikut:

6 - Link Text
Setting untuk link text saat normal, adalah tanpa dekorasi text dan berwarna biru,

Sedangkan saat mouse melintas atau menuju link text tersebut, disetting sewarna dengan biru body dan memiliki garis bawah,

Dua setting di atas akan berlaku pada semua link text di area body, kecuali pada area lain dibuat setting berbeda. Misalnya area #sidebar yang diberi setting sbb:

Silahkan dicoba dan lihat perbedaannya. Jika sudah paham, pasti anda bisa membuat link text berbeda pada masing-masing area.

7 - h1, h2 dan h3
Selain membuat nama bebas untuk

- h1 digunakan untuk kode judul posting. Setting ukuran font 14px, cetak tebal, warna senada biru body, margin atas 0 dan margin bawah 10px.

- h2 digunakan untuk kode tanggal posing. Setting ukuran font 10px, cetak miring, warna #999, margin atas 10px dan margin bawah 0.

- h3 digunakan untuk kode judul-judul pada area #sidebar, seperti ‘about me’, ’shoutbox’, ‘Archives’ dll. Setting ukuran font 10px, warna #666 dan margin atas 10px.

8 - Lain-lain
Buatlah CSS lainnya yang dirasa perlu untuk mensetting bagian lain dalam blog yang ingin dibuat berbeda dari setting lainnya.

Misalnya bagian bawah pada masing-masing posting yang biasanya berisi ‘posting by me at 12.00pm - comments’ atau text lainnya. Bisa dibuat kode CSS dengan nama ‘comment’ atau terserah anda.

Juga tambahkan code berikut:

yang berfungsi menyamakan lebar #sidebar pada browser IE6, Firefox dan Opera.

9 - Menggabungkan CSS dengan HTML
Langkah selanjutnya adalah menggabungkan style CSS yang sudah dibuat dalam lembar HTML.

Ada dua cara menggabungkan CSS dengan HTML yang keduanya diletakkan diantara tag <head> dan </head>.

Cara pertama, yaitu file CSS dibuat terpisah dari file HTML kemudian digabungkan dengan tag:

<link href="namafile.css" rel="stylesheet"
type="text/css" />

Pada cara ini, jika anda belum memiliki hosting sendiri, maka harus menyimpan/menaruh/menitipkan file CSS tadi ke tempat/hosting gratisan seperti geocities dsb. Hal ini menyebabkan anda harus menuliskan jelas dan tepat url tempat penitipan tadi.

Atau cara kedua yaitu menuliskan kode CSS langsung di halaman HTML dengan tag:

10 - HTML
Langkah terakhir dari rangkaian tutorial membuat blog ini adalah menuliskan tag-tag HTML yang berisi kode-kode CSS pada tempatnya masing-masing.

Seperti tag untuk mendefinisikan area #main,

Atau tanggal posting: <h2>May 7, 2005</h2>

Selengkapnya bisa dilihat disini. Lalu pelajari bagian perbagian yang sudah didefinisikan dengan tag-tag area masing-masing.

Jika masih menemui kesulitan, silahkan bertanya. Dan jika tutorial ini dirasa ada kesalahan atau kekurangan, mohon dikoreksi :). Selamat mencoba! Salam ngeblog!***

Silahkan mendownload tutorial bagian 3 disini.

Baca juga:
- Part #1 : HTML dan CSS
- Membuat Blog Sederhana
- Bagian 1 : Membuat layout blog dengan photoshop
- Bagian 2 : Memotong Images