Setelah mengenal dan mempelajari HTML dan CSS, kita coba membuat template blog sederhana. Tanpa image atau gambar dan tidak menggunakan table (tableless). Semua setting tampilan dibuat dalam file style sheet.
Tampilan blog sederhana
Sebelumnya, untuk dapat melihat dan mencoba langsung tutor berikut, silahkan mengambil dua source code (index.html dan layout.css) template sederhana di atas, yang caranya penulis uraikan di bawah ini. Cara ini bisa digunakan jika kita ingin mempelajari sebuah blog di internet.
File index.html- Klik pada image di atas
- Setelah terbuka jendela baru berupa tampilan blog, klik kanan mouse
- Pilih ‘view source’ untuk browser IE; Alt+F3 untuk browser Opera, ‘view page source’ untuk browser Mozilla Firefox.
- Save source code dengan nama file index.html (lokasi bebas, tapi lebih baik buat folder baru agar tidak tercampur dengan data lain).
File layout.css
1. Perhatikan tag yang terdapat sebelum </head> pada index.html
2. File layout.css ditaruh pada server geocities. Untuk mengambilnya, copy url pada ‘link href’ (http://www.geocities.com/ynalinkware/tutorial/layout.css) dan paste di address browser lalu go/enter.
3. Save code style sheet dengan nama layout.css di folder yang sama dengan index.html
4. Ganti tag link style sheet index.html menjadi :
<link href="layout.css" rel="stylesheet" type="text/css" />
Sebenarnya, tidak ada standar khusus sebuah blog harus terdiri dari bagian A, B atau C. Tapi secara garis besar, menurut pengamatan penulis, terdapat 5 (lima) bagian utama dari sebuah blog. Sebut saja lima bagian utama itu adalah main, header, sidebar, content, dan footer.
a. Main
Bagian ini merupakan area utama yang mengatur luas sebuah blog. Keempat bagian lain (header, sidebar, content, dan footer) akan berada pada area main ini.
b. Header
Bagian blog ini biasanya memuat judul atau tema blog. Bisa berupa teks saja, image saja atau gabungan keduanya. Pada contoh kali ini, header hanya berupa teks.
c. Content
Bagian yang akan berisi posting, judul posting, tanggal posting, juga komentar. Posisinya bisa di kiri atau kanan, bersebelahan dengan Sidebar.
Di bagian ini terdapat ‘about me’, shoutbox, list links, blogroll, credits dan lain-lain. Letaknya di samping Content.
e. Footer
Posisinya di bagian bawah yang memuat copyright atau teks dan images lain sesuai keinginan..
