Belajar membuat template sendiri (3)

Setelah bagian 1, dan bagian 2 kita lanjutkan ke bagian 3, dimana bagian ini merupakan bagian inti dalam memodifikasi tampilan template yang sobat buat, pada bagian ini kita fokus ke section 2, yaitu section ini terdapat code css di dalamnya. Saya tidak kasih penjelasan panjang lebar, agar sobat bisa bereksperimen dengan stylenya masing-masing. Hal utama adalah sobat mengenal sedikit kode CSS, seperti width, font, border, background, color, margin dan padding sisanya akan mengikuti seiring dengan berjalannya usaha sobat dalam belajar membuat template.
Penasaran gak sih?

Pada bagian ini saya mencoba merangkum hasil dari bereksperimen dan melihat pola struktur template terutama di section 2. Pola penulisan kode pada bagian section 2 ini adalah seperti ini :

selector{property:value}

Ket :
- selector = merupakan pembentuk suatu elemen HTML
-{ } = sebagai tag penutup dari property dan value
- property = memberikan suatu atribute untuk merubah selector
- value = memberikan nilai untuk property

contoh =

body (background:#000000)

artinya : untuk element body - (definisi body saya sudah jelakan di bagian 1-red) mempunyai background (latar belakang) berwarna hitam (#000000) ini semua berlaku global atau keseluruhan.

Bagaimana menyatakan untuk setiap element yang berbeda?
Nah, di sini diperlukan untuk id selector dan class selector
- untuk id selector dimulai dengan tanda # (slash)
- untuk class selector di mulai dengan tanda . (dot)
Contoh :

#sidebar-wrapper (width: 350px;background-color:#00000)

artinya : element id sidebar mempunyai panjang 350px dan backgroundnya warna hitam. Nilai ini berlaku hanya untuk element id sidebar

Sekarang untuk class selector adalah di mana satu element bisa di style berbeda-beda.
Contoh :

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar ol {
list-style-type: decimal;
margin:0 0 0 25px;
padding:0 0 0 0;
}


Pada intinya di bagian 3 ini adalah sobat bisa menambahkan selector serta merubah property dan value dari masing-masing container/tag.
Sekarang masuk ke bagian masing-masing container :

Header:

* #header-wrapper - container yang berisi title blog dan descriptionnya.
* #header - container yang berada dalam header-wrapper.
* #header h1 - mengkontrol container header dan memberikan nilai dari tampilan title blog
* #header h1 a - mengkontrol nilai title blog ketika sebagai link teks
* #header .description - memberikan properties untuk description blog
* #header a img - mengkontrol properties image (gambar) di dalam container

Main:

* #main-wrapper - container yang berisi umumnya : post, comments, date header, dan widget yang berada di dalamnya
* #main - container yang berada dalam main wrapper
* h2.date-header - mengatur nilai untuk tanggal postingan
* .post - mengatur nilai untuk postingan
* .post h3 - mengatur nilai judul postingan
* .post-body p - mengatur isi content di post
* .post ul - menagatur nilai unordered list (daftar yang tidak ada bernomor)
* .post ol - mengatur nilai ordered list (daftar yang bernomor).
* .post li - mengatur nilai daftar tersendiri dari unordered list atau ordered list.

Sidebar :
* #sidebar-wrapper - container yang berisi umumnya sidebar (memblock)
* .sidebar h2 - mengatur propeties title sidebar
* .sidebar .widget - mengatur properties dari widget sidebar
* .sidebar ul - mengatur nilai dari unordered list

Comments :
* #comments - mengatur container comments
* #comments a - mengatur nilai link teks di dalam container comments
* #comments h4 - mengatur nilai title header comments
* #comments ul - mengatur nilai dari unordered list yang berada dalam comment container.
* .comment-author - mengatur nilai comments author
* .comment-body p - mengatur nilai body isi komentar
* .deleted-comment - mengatur nilai ketika delete comments
Footer :

* #footer-wrapper - mengatur element footer container
* #footer - container yang berada dalam footer-wrapper.
* #footer h2 - mengatur properties dari footer title/header.
* #footer .widget - mengatur footer widget properties.
* .footer a - mengatur nilai link teks di footes
* .footer ul - mengatur nilai dari unordered list yang berada dalam footer

Pyuuh, akhir selesai juga bagian 3, perlu di sampaikan pembagian kontainer ini belum semuanya lengkap tergantung keinginan sobat dalam menambahkan style dalam template, untuk menambah variasi silahkan sobat melihat kode template dari template yang beredar bebas :) di internet (gratisan-red).Ok, sobat happy blogging :p
NB : untuk belajar CSS silahkan klik di sini!!
Untuk para suhu-suhu mohon koreksinya yaks :D :
- Kang Jaloee
- Kang Rohman
- Kang Herro
dan suhu-suhu lainnya.