Tutorial kali ini merupakan bagian pertama dari 3 (tiga) tutorial membuat blog
sederhana menggunakan images yang akan disetting dalam layout css. Tampilan blog.

Pada bagian pertama ini akan diuraikan langkah-langkah membuat layout blog dengan Photoshop 7.0. Maka pastikan software tersebut sudah terinstal di komputer yang akan digunakan untuk tutorial kali ini. Dan kemudian mengenal lembar kerjanya, yang secara sederhana dapat dilihat disini.

Setiap layer diberi nama dengan maksud memudahkan penunjukan objek dalam editing. Dan pastikan layer yang akan diubah dalam keadaan aktif (diklik atau dipilih).

Tampilan layout blog

Berikut langkah-langkah lengkapnya:

1 – New Layout
Jalankan program Photoshop dan buat layout.
Klik menu File -> pilih New atau langsung Ctrl+N.

step1.gif

2 – Setting Layout
Pada jendela New yang tampil, setting/ubah bagian Preset Size dengan Custom,
Width 730 pixel, Height 500 pixel, Resolution 72 pixel/inchi, Mode RGB Color
dan Contents White.

step2.gif

3 – Aktifkan Perangkat
Setelah Editing Area baru muncul, pastikan Toolbox, Layers Pallet, Options dan
Rulers aktif. Jika tidak, aktifkan dengan cara klik Menu Windows lalu pilih
Tools, Options dan Layers. Untuk Rules tekan Ctrl+R.

4 – Ganti Warna
Ubah warna Contens yang semula putih menjadi warna biru dengan kode warna #2B4C8D. Caranya klik Set Foreground Color di Toolbox sehingga muncul jendela Color Picker. Disini bisa dipilih warna sesuai selera, namun pada turorial kali ini langsung masukkan kode warna tadi (2B4C8D tanpa ‘#’) pada bagian box bawah yang di depannya bertanda ‘#’ lalu enter atau klik OK.

step3.jpg
5 – Warna Background
Aktifkan icon Paint Bucket Tool (gambar ember cat) di Toolbox. Jika tidak terlihat, klik tahan icon Gradient Tool di Toolbox hingga muncul icon dimaksud lalu pilih. Setelah kursor berganti icon Paint Bucket Tool, arahkan ke Editing Area yang masih berwarna putih kemudian klik sekali sampai warna biru menggantikannya. Klik dua kali pada nama layer background untuk mengubah nama layer menjadi ‘back’.

step5.gif

6 – Layer Baru
Buat layer baru berwarna putih dengan cara klik icon Create a New Layer di bagian bawah Layers Pallet. Ubah nama ‘Layer 1′ menjadi ‘main back’ dengan klik dua kali pada Layer 1 dan ketik nama penggantinya.

step6a.gif

Kemudian pilih Menu Edit lalu klik Fill untuk memberi warna putih pada ‘main back’. Di bagian contens jendela Fill yang muncul, pilih ‘white’ lalu enter atau OK.

step6b.gif
7 – Mengubah Ukuran Objek
Main back akan diperkecil pada bagian kanan dan kirinya sedikit untuk membedakan background atau area body yakni warna biru dan background atau area main yang berwarna putih. Pastikan layer ‘main back’ aktif (klik layer dimaksud untuk mengaktifkannya), lalu tekan Ctrl+T. Tarik sedikit ke bagian dalam kotak kecil resize untuk bagian kanan dan kiri, hingga back biru terlihat. Setelah dirasa cukup, tekan enter untuk mengakhiri resize.

step7.gif

8 – Style Outer Glow
Layer ‘main back’ masih aktif, pilih Menu Layer lalu Layer Style dan klik Outer
Glows. Style ini akan memberikan kesan berkilau pada kanan dan kiri background putih (main back). Jendela Layer Style terbuka, klik kotak kuning di bagian Structure dan pilihlah warna putih lalu OK. Masih di bagian Structure, Opacity 100% dan Noise 0%. Pada bagian Elements, Technique Softer, Spread 2% dan Size 9%.

Berexplorasilah pada setiap bagian untuk mencoba mendapatkan hasil atau tampilan yang berbeda. Setelah yakin dengan hasil akhir tekan enter atau OK.

step8.gif

9 – Retangle Tool
Klik icon Retangle Tool pada Toolbox lalu klik box color di bagian Options untuk menset warna biru muda (D8E3FA). Kemudian buat kotak persegi panjang untuk header dengan cara tempatkan pointer yang berbentuk plus (+) di sudut awal persegi panjang yang akan dibuat, lalu klik tahan dan drag ke ujung sudut persegi panjang. Ukuran lebar bisa sesuai selera. Terlihat di Layers Pallet terbentuk layer baru bernama ‘Shape 1′. Ubah nama layer menjadi ‘h-top’ untuk menandakan kotak header bagian atas.

step9.gif

10 – Duplikasi Layer
Dengan ukuran panjang dan warna yang sama, akan dibuat retangle tool di bagian bawah untuk footer. Bisa saja dilakukan cara yang sama seperti langkah ke-9, namun dengan cara lain yang lebih cepat bisa dilalukan duplikasi layer. Aktifkan layer ‘h-top’ lalu klik tahan dan drag/tarik ke arah icon Create a New Layer di bagian bawah Layers Pallet.

Layer baru bernama ‘Shape h-top copy’ ubah namanya menjadi ‘h-bot’. Pastikan
layer ‘h-bot’ aktif dan pointer ganti bentuk icon Move Tool di Toolbox, lalu
tarik atau pindahkan shape ‘h-bot’ ke bagian bawah pada posisi footer. Perkecil
ukuran tingginya dengan cara Ctrl+T dan resize atas atau bawah secukupnya lalu
akhiri enter atau OK.

step10.gif

11 – Custom Shape Tool
Photoshop menyediakan berbagai bentuk simbol atau ornamen yang bisa digunakan untuk mempercantik layout atau keperluan visual lainnya. Tepatnya menyediakan 12 katagori Custom Shape seperti animal, nature, ornaments dan sebagainya. Koleksi bentuk-bentuk tadi bisa didapat melalui fasilitas icon Custom Shape Tool pada Toolbox.

Klik tahan icon Retangle Tool dan klik icon Custom Shape yang bergambar bintang. Atau cara lain, klik langsung icon Custom Shape ini pada Options dengan catatan icon Retangle Tool aktif.

Pada Options terdapat pilihan ‘Shape’, klik panah dropdown untuk melihat koleksi bentuk Costum Shape. Bentuk tapak kaki pada contoh tutorial ini tidak ditemukan?. Ok, setting standar memang hanya terdapat empat baris dan enam kolom bentuk dari Custom Shape. Untuk menampilkan semua atau 12 katagori Custom Shape caranya klik menu dropdown pada bagian Shape di Options, lalu klik panah kanan kecil yang terdapat pada pilihan bentuk. Kemudian pilih ‘All’ untuk sekaligus menampilkan Custom Shape. Pada pertanyaan yang muncul, jawab OK. Cari dan pilihlah bentuk tapak kaki kanan.

step11.gif

12 – Pengulangan
Sebelum membuat tapak kaki kanan pada editing area, ganti warna pada Color di bagian Options dengan warna biru tua senada background (2B4C8D). Setelah itu drag bentuk tapak kaki kanan pada posisi header area atau di atas ‘h-top’. Ukuran bisa diubah dengan cara Ctrl+T dan resize sesuai keinginan.

Ganti nama ‘Layer 1′ untuk bentuk tapak kaki kanan yang baru saja dibuat dengan nama ‘foot-a’. Lalu duplikasi layer ‘foot-a’ dan ganti nama layer ‘foot-a copy’ menjadi ‘foot-b’. Masih aktifkan layer ‘foot-b’, tarik/pindahkan ke arah kanan bawah pada bagian footer (lihat gambar). Perkecil ukurannya yang disesuaikan tinggi ‘h-bot’.

13 – Text
Membuat text ‘MY BLOG’ sebagai background penghias header. Klik icon Horizontal Type Tool (gambar letter ‘T’) pada Toolbox lalu klik pada Editing Area hingga kursor berganti garis panjang berkedip. Tuliskan MY BLOG lalu akhiri dengan klik icon Move Tool pada Toolbox.

Untuk memformat jenis font, ukuran, warna dan sebagainya, klik lagi gambar
letter ‘T’ pada Toolbox. Lihat bar Options, ubahlah jenis font dan ukuran sesuai
selera dan warna text sama dengan back (2B4C8D) lalu lihat perubahannya (Tutorial menggunakan Verdana uk.166pt).

step12a.gif

Pindahkan text ‘MY BLOG’ ke bagian header area dengan mengaktifkan icon Move Tool terlebih dahulu. Kemudian sesuaikan ukurannya atau resize lebar dan tinggi) dengan ukuran ‘h-top’. Setelahnya, buat warna text menjadi sangat tipis (sedikit saja berbeda dari warna h-top) dengan cara klik box Opacity di Layers Pallet yang semula tertera 100%. Ganti angkanya menjadi 3%. Semakin kecil setting angkanya semakin transparant warna objek.

Ulangi langkah di atas untuk membuat judul blog pada header. Tutorial ini menggunakan judul ‘JEJAK LANGKAH’ dengan font Impact uk.30pt, warna #2B4C8D, Opacity 80%.

Hasil akhir Layers

layer-akhir.gif

14 – Simpan File
Sebenarnya menyimpan file untuk layout ini jangan benar-benar dilakukan pada langkah akhir, tapi setiap saat perubahan layout. Kecewa sekali jika susah payah layout dibuat tapi sebelum disimpan terjadi mati listrik atau komputer bermasalah seperti hang misalnya. Simpanlah file dengan format PSD atau standar file Photoshop agar dilain waktu bisa dilakukan perubahan.

step13.gif
Tutorial selanjutnya adalah memotong-motong (slice-cut) layout yang sudah dibuat berdasarkan bagian-bagian blog seperti main, header dan footer.

Layout blog yang sudah dibuat pada Tutorial ‘Bagian 1 – Layout Blog dengan Photoshop‘ akan diproyeksikan sebagai tampilan blog, dengan terlebih dahulu dibagi/dipotong dalam beberapa file.

Pembagian atau pemotongan images dalam beberapa file ini dimaksudkan agar images dapat diloading atau ditampilkan dengan cepat dalam browser.

lay-cut.gif

Ada dua cara pemotongan images di photoshop yang bisa dilakukan, yaitu pertama dengan fasilitas slice tool dan kedua menggunakan copymerged-paste. Sedangkan menyimpan file digunakan fitur Save for Web, dimana file image akan dioptimalisasi ukurannya sehingga loading images di browser tidak terlalu berat/lama namun kwalitasnya tetap baik.

Untuk memulai tutorial kali ini, buka kembali file psd yang dibuat pada tutorial sebelumnya.

Slice Tool
Slice berfungsi membagi images dalam beberapa area yang langsung dapat disimpan menggunakan Save for Web dan secara sekaligus bisa dibuat dalam sebuah web.

Langkah-langkahnya:

1 – Bagian Header
Membatasi bagian header dan footer dengan ruler sebagai garis bantu pembatas. Untuk bagian header dibatasi garis menjadi dua bagian (header1 dan header2) agar ukuran file tidak besar sehingga saat loading images tidak terlalu berat/lama.

Arahkan pointer ke area horizontal ruler, lalu klik tahan mouse dan drag ke arah bawah. Garis biru yang tampil letakkan diposisi akhir batas header (di bawah shape tapak kaki kanan). Lakukan hal yang sama seperti di atas dan posisikan garis pembatas di tengah header untuk membagi header menjadi dua bagian.

2 – Bagian Footer
Masih menggunakan cara yang sama, tarik ruler dari atas ke arah bawah dan letakkan pada batas atas bagian footer.

3 – Garis Bantu Back-Main
Tambahkan satu garis bantu pembatas untuk bagian ‘back-main’ yang ditempatkan di bawah garis bantu header2 dengan lebar secukupnya.

grsbantu.gif

4 – Slice Tool
Aktifkan icon Slice Tool di Toolbox, kemudian kotaki area header1. Akan terlihat area header1 memiliki delapan kotak sudut kecil dan angka ‘01′ pada bagian sudut kiri atas yang menunjukkan nomor urut slice yang dibuat.

slicetool.gif
Ulangi langkah di atas untuk menandai slice pada area header2, back-main dan footer, sehingga terdapat empat slice. Jika terdapat lima slice dengan tambahan slice ke-4 yaitu area lebar di bagian tengah layout, biarkan saja. Slice ini bisa dibuang/delete kemudian.

imgslice.gif

5 – Fitur Save for Web
Dengan menggunakan slice tool, area images yang sudah dibuat bisa langsung disimpan secara bersama-sama.

Pilih menu File – Save for Web. Pada jendela baru yang tampil, klik folder ‘4-Up’ untuk melihat perbandingan hasil optimasi file asli dengan tiga optimalisasi pilihan (lingkaran merah). Fitur Save for Web bisa dilihat disini.

Pilihlah format GIF pada bagian settings di kanan jendela Save for Web (lingkaran hijau). Kemudian lihatlah keterangan di bawah tiga kotak hasil optimalisasi. Setiap gambar memiliki keterangan mengenai ukuran dan waktu download/loading-nya (lingkaran biru). Pilihlah hasil yang memiliki ukuran dan waktu loading terkecil, tapi pastikan kwalitas gambarnya tetap baik.

Format gambar bisa juga dipilih berformat JPG. Format ini biasa digunakan untuk images/gambar seperti foto. Untuk lebih jelasnya, bisa dilakukan banyak percobaan optimalisasi dengan berbagai images.

Bisa juga masing-masing slice yang dibuat dioptimalkan satu persatu. Klik icon Slice Select Tool di sebelah kiri (lingkaran hitam) lalu klik bagian slice yang akan dioptimalkan. Menggeser area slice bisa dilakukan dengan drag mouse menggunakan icon Hand Tool.

6 – Simpan
Simpan images yang sudah dioptimalkan dengan klik tombol SAVE di kanan atas jendela Save for Web.

Agar memudahkan penjelasan, buatlah folder ’simple-blue’ yang berfungsi untuk menyimpan file-file images dan file HTML juga file CSS kemudian. Maka bagian ‘Save in’ masuk ke folder ’simple-blue’. Bagian Save as type, pilih Images Only (*.gif) karena hanya file images yang akan disimpan. Bagian Settings dalam Default Settings dan bagian Slices dalam All Slices. Untuk nama file, beri nama ‘blue.gif’. Terakhir klik Save.

save-as.gif

File-file images hasil slice ini akan disimpan dalam sub folder images di folder simple-blue dan masing-masing bernama blue_01.gif sampai blue_05.gif.

CopyMerged – Paste
Pada cara kedua pemotongan images ini, tiga langkah pertama (1,2 dan 3) memiliki langkah yang sama dengan cara memotong images menggunakan cara Slice Tool, yaitu membagi bagian-bagian header1, header2, footer dan back-main dengan garis bantu.

3 – Duplikasi gabungan
Dari bagian-bagian yang sudah dibatasi dengan garis bantu tadi, maka akan dilakukan pengambilan bagian tersebut satu persatu menggunakan Retangle Marquee Tool.

Klik icon Retangle Marquee Tool di Toolbox, dan pastikan Feather yang berada di baris Options dalam keadaan 0 px. Bagian pertama yang akan dicopy adalah header1, maka kotaki area dimaksud dengan cara tempatkan pointer pada salah satu sudut area, lalu klik tahan mouse dan drag hingga akhir sudut diagonalnya.

Terlihat bagian header1 yang dipilih akan dikitari garis putus-putus. Dalam keadaan demikian, pilih menu Edit – Copy Merged.

copymerged.gif

4 – Paste di New Layout
Kemudian buka lembar kerja baru dengan cara pilih menu File – New atau langsung Ctrl+N dan pilih OK untuk konfirmasi jendela New yang tampil.

Setelah lembar kerja baru siap, pilih menu Edit – Paste atau langsung Ctrl+V untuk menampilkan objek hasil copy di atas.

5 – Save for Web
Tahap selanjutnya adalah menyimpan bagian header1 tadi. Pilih menu File – Save for Web. Lakukan optimalisasi seperlunya lalu klik SAVE dan beri nama file image ‘header1′ dan simpan di folder simple-blue agar tidak tercampur dengan file lain atau memudahkan pencarian file.

6 – Pengulangan
Ulangi langkah 3 sampai 5 untuk bagian header2, footer dan back-main.

back-main.gif

Bagian back-main akan digunakan sebagai background area main. Untuk lebar diambil tidak terlalu besar karena ‘back-main’ ini nantinya dalam CSS akan disetting berulang (reply) secara vertikal atau searah sumbu-y.

Tahapan selanjutnya adalah membuat file HTML dan CSS.

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:

/*
Stylesheet Name: Simple Blue
*/

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’.

margin: 0;
padding: 0;

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

background: #2B4C8D;

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

color: #333;
font: 12px ‘Trebuchet MS’, Verdana, Georgia, Arial, sans-serif;

Kode CSS untuk setting font bisa juga seperti ini:

font-size: 12px;
font-family: ‘Trebuchet MS’, Verdana, Georgia, Arial, sans-serif;

Hasil setting body pada stylesheet menjadi seperti berikut:

body {
margin: 0;
padding: 0;
background: #2B4C8D;
color: #666666;
font: 12px ‘Trebuchet MS’, Verdana, Georgia, Arial, sans-serif;
}

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.

width: 730px;

– 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.

margin: 0px auto;

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:

margin: 5px 10px; –>(top&bottom right&left)
padding: 5px 10px;

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

line-height: 16px;

– 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.

background: #fff url(backmain.gif) repeat-y;

Kode CSS untuk setting background bisa juga seperti ini:

background-image: url(backmain.gif);
background-color: #fff;
background-repeat: repeat-y;

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:

#main {
width: 730px;
margin: 0px auto;
padding: 0;
line-height: 16px;
background: #fff url(backmain.gif) repeat-y;
}

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:

margin: 0;
padding: 0;
background-repeat: no-repeat;

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:

#header1 {
margin: 0;
padding: 0;
background-image: url(header1.gif);
background-repeat: no-repeat;
height: 72px;
}
#header2 {
margin: 0;
padding: 0;
background-image: url(header2.gif);
background-repeat: no-repeat;
height: 81px;
}

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

– Lebar area posting diset 450 pixel,

width: 450px;

– Letak area diposisikan sebelah kiri dan margin dibuat 0,

float: left;
margin: 0;

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

padding: 20px 10px 20px 29px;

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

border-right: solid 1px #ccc

Setting #content pada stylesheet menjadi seperti berikut:

#content {
width: 450px;
float: left;
margin: 0;
padding: 20px 10px 20px 29px;
border-right: solid 1px #ccc
}

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,

width: 200px;
float:right;
margin: 0;

– Padding diatur dan disesuaikan dengan posisi Content,

padding: 10px 30px 10px 10px;

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

font-size: 10px;
font-family : verdana, tahoma, arial, serif;
color: #2B4C8D;

Setting #sidebar pada stylesheet menjadi seperti berikut:

#sidebar {
width: 200px;
float:right;
margin: 0;
padding: 10px 30px 10px 10px;
font-size: 10px;
font-family : verdana, tahoma, arial, serif;
color: #2B4C8D;
}

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:

clear: both;

– 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,

height: 35px;
padding: 20px 50px 0 0;

Setting #footer pada stylesheet menjadi seperti berikut:

#footer {
margin:0;
clear: both;
font-size: 10px;
color: #333399;
text-align:right;
background-image: url(footer.gif);
background-repeat: no-repeat;
height: 35px;
padding: 20px 50px 0 0;
}

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

a {
text-decoration: none;
color: #000099;
}

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

a:hover {
color: #2B4C8D;
text-decoration: underline;
}

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:

#sidebar a:hover {
color: #333;
font-weight: bold;
}

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.

.comment {
font-size: 10px;
text-align: right;
}

Juga tambahkan code berikut:

html>body #sidebar {
width: 200px;
}

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:

<style type=”text/css”>
<!–
(tulis style CSS disini)
–>
</style>

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,

<div id=”main”>



</div>

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! Good Luck!