Bagian Penting dalam Pembuatan Template

Bagian Penting dalam Pembuatan Template

Berikut adalah beberapa Bagian Penting dalam pembuatan templateyang harus kita pahami, diantaranya :

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

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 judul blog (Blog Title)

#header h1 a : mengatur properti link di judul blog.

#header .description : mengatur properti dari deskripsi blog.

#headera img : mengatur properti dari gambar yang ada didalam header.

Main :

#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 Posy Title)

.post : mengatur properti pada bagian Blog Posts.

.post h3 :  mengatur properti dari judul artikel ( Post Title)

.post-bodyp : mengatur properti dari body /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 : mengatur properti dari daftar individu dalam unorder list atau ordered list

a img  : mengatur properti secara umum dari sebuah gambar ( memacu pada link, dan gambar pada link itu sendiri)

Sidebar :

Sidebar-wrapper : bagian yang membungkus semua element dan isi yang ada didalam sidebar

.sidebar : bagian yang ada didalam sedebar-wrapper

#sidebar1 : mengatur properti didalam sidebar 1

#sidebar2 : mengatur properti didalam sidebar 2. Jika ingin properti yang ada didalam sidebar1 dan sidebar2 sama, maka properti cukup diatur di .sidebar dan tidak perlu ditulis didalam #sidebar1 dan #sidebar2 lagi di kode CSS.

.sidebar .widget : mengatur properti semua widget ( yg ditambah melalui added page element) disebar

#sidebar1 .widget: hanya mengatur widget di sidebar1

.sidebar .BlogArchive : mengatur properti Blog Archive. Ini secara teknis merupakan widget disebar juga, akan tetapi mengatur properti di sidebar widget tidak mengubah widget untuk BlogArchive. Oleh sebab itu pengaturannya di tulis sendiri.

.sidebar h2 : mengatur properti judul (title/header) pada sidebar widget.

.sidebar #BlogArchive1 h2 : mengatur posisi judul pada Blog Archive.

Miscellaneouse:

#profile1 : mengatur properti dari About Me

#profile1 h2 : mengatur judul (title/header) pada About Me

.profile-img img : mengatur gambar di About Me

.profile-textblock : mengatur deskripsi penulis pada About Me

.profile-data : mengatur data penulisan pada About Me

.profile-datablock : mengatur keseluruhan data dalam About me

blockquote : mengatur teks dalam tanda kutip (quoted text) pada artikel

code: mengatur tulisan dalam tag code di artikel

Post-Footer:

.post-footer : mengatur semua properti didalam post-footer

.post-footer-line : mengatur properti setiap baris baru di post-footer

.post-footer a : mengatur properti link text didalam post-footer

.post-footer .post-comment-link a : mengatur properti link di"comment" dalam post-footer

#blog-page : mengatur properti link di "newer posts","home",dan"older posts".

#blog-page-newer-link : mengatur properti link "newer posts"

#blogpage-older-link : mengatur properti link "older posts" link

.feed-link : mengatur properti link "subscribe to: Posts (Atom)"

Comment :

#comments : mengatur semua properti pada

#comments a : mengatur properti link didalambagian comment

#comments h4 : mengatur header dibagian comment

.deleted-comments : mengatur properti untuk deleted comment

.comment-author : mengatur properti untuk comment author

.comment-body p : mengatur properti comment body

#comments ul : mengatur unordered list didalam bagian comment

#comments li: mengatur daftar individu didalam comment

Footer:

#footer-wrapper : bagian yang membungkus semua elemen dan isi didalam footer section

#footer : bagian yang ada didalam footer-wrapper

#footer h2 : mengatur properti dari judul (title/header) di footer

#footer .widget : mengatur properti widget yang ada di footer

.footer a :mengatur properti link di footer

Bagian yang paling umum untukmengatur ukuran template :

Body

Outer-wrapper

header-wrapper

content-wrapper

footer-wrapper

main-wrapper

sidebar-wrapper

footer-wrapper

Untuk menghindari kesalahan/bug, ada baiknya mengatur bagian pembungkus, walaupun itu terjadi pengulangan pengaturannya. Nah, itu adalah bagian umum dan paling penting dalam pembuatan template. Semoga tulisan diatas mudah untuk dicerna dan bermanfaat.

Sekian dan Terimakasih

Share this post