Dalam tutorial ini akan dijelaskan bagian dan elemen umum yang ada dalam template blogger beserta fungsi dari bagian dan elemen tersebut. Elemen pada dasarnya adalah setiap objek yang membuat fungsi di blog, sedangkan bagian/cointainers adalah suatu bagian yang besar yang berisi elemen-elemen yang lebih kecil.
Elemen-elemen yang dibahas disini nantinya belum tentu elemen yang harus ada disetiap
template Blogger, tapi hanya beberapa elemen umum yang sering dipakai didalam template
Blogger.
Untuk memahami bagian ini, kita akan merujuk pada gambar yang ada di tutorial Struktur dari kode CSS.
Simbol # Menunjukkan atribut dari elemen (semacam klasifikasi dari jenis elemen). Jika belum paham dengan simbol ini, diabaikan aja dulu tidak usah perlu dipikirkan secara serius.
Global:
body {.....} : mengatur sifat umum dari template, jika elemen yang dibawahnya tidak
didefinisikan, maka properti yang ada dibagian ini yang berlaku.
#outer-wrapper {.....} : Bagian awal dan terbesar dari template. Didalam bagian ini
berisi header-wrapper, content-wrapper, dan footer-wrapper.
#content-wrapper {.....} : suatu bagian yang berisi sidebars dan main.
a {.....} : mengatur properti dari tulisan yang mempunyai link.
a:visited {.....} : mengatur properti dari tulisan yang mempunyai link setelah dikunjungi.
a:hover {.....} : mengatur properti dari tulisan yang mempunyai link disaat mouse ada
diatas tulisan tersebut.
Karena semua kode harus ditulis didalam {.....} setelah judul elemen, maka untuk penjelasan berikutnya hanya ditulis judul elemennya saja.
Header:
#header-wrapper : Bagian yang membungkus judul dan deskripsi blog/website (Blog
Title dan Blog Description).
#header : Bagian yang ada didalam header-wrapper.
#header h1 : Perintah yang ada didalam bagian ini mengatur tampilan dan tata letak judul
blog (Blog Title).
#header h1 a : Mengatur properti link di judul blog.
#header .description : Mengatur properti dari deskripsi blog.
#header a img : Mengatur properti dari gambar yang ada didalam header.
Main:
#main-wrapper : bagian yang didalamnya terdiri atas Date Header, Blog Posts,
Comments, Feed Link, dan setiap widget yang ditempatkan di atas atau bawah artikel
(Blog Posts).
#main : bagian yang ada didalam main-wrapper.
#main .widget : mengatur properti dari semua widget yang ada didalam bagian main.
h2.date-header - mengatur properti dari Date Header (yang ada diatas Post Title).
.post - mengatur properti pada bagian Blog Posts.
.post h3 - mengatur properti dari judul artikel (Post Title).
.post-body p - mengatur properti dari body atau isi artikel (post).
.post ul - mengatur properti dari unordered list (daftar yang tidak bernomor).
.post ol - mengatur properti dari ordered list (daftar bernomor).
.post li - cmengatur properti dari daftar individu didalam unordered list atau ordered list.
a img - mengatur properti secara umum dari sebuah gambar (memacu pada link; dan
gambar pada link itu sendiri).
No comments:
Post a Comment