Belajar membuat template sendiri-bag.3

Belajar membuat template sendiri-bag.3

Setelah sebelumnya saya telah membagikan apa yang telah saya baca pada artikel berjudul belajar membuat template sendiri bagian 1, dan bagian 2 di blog THINKING OUT OF THE BOX ,sekarang saya lanjutkan dengan membagikan bagian 3 nya,yang baru saja saya baca di blog THINKING OUT OF THE BOX.Pada bagian ini kita fokus ke section 2, yaitu section ini terdapat code css di dalamnya. di artikel tersebut tidak di berikan  penjelasan panjang lebar, agar kita bisa bereksperimen dengan stylenya masing-masing.yang penting kita mengenal sedikit kode CSS, seperti width, font, border, background, color, margin dan padding,sisanya akan mengikuti seiring dengan berjalannya usaha kita dalam belajar membuat template.

Di artikel tersebut telah dirangkum 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

seperti itulah yang jelaskan di artikel tersebut,gimana ngerti gak?jujur,kalau saya masih belum ngerti,tapi insayaAllah lah,kalau lebih serius lagi belajarnya bisa ngerti... untuk sobat blogger yang pengen lebih lengkapnya kunjungi aja blog THINKING OUT OF THE BOX di 

http://subagya.blogspot.com

Read more: http://subagya.blogspot.com/2008/10/belajar-membuat-template-sendiri-3.html#ixzz1wDhvQE2B
Under Creative Commons License: Attribution

Semoga Bermanfaat!!!