Desain Template Blogger: Tutorial 5
<< Tutorial 4: Mengatur Properti Kontainer di CSS
>> Tutorial 6: Menggunakan Template Blogger Generik
Kembali ke Daftar Isi
Berikut yakni daftar dari semua bagian dan elemen biasa yang ada dalam template blogger beserta fungsi dari bab dan unsur tersebut. Elemen pada dasarnya ialah setiap objek yang menciptakan fungsi di blog, sedangkan bab/cointainers yakni suatu bab yang besar yang berisi komponen-elemen yang lebih kecil.
Elemen-unsur yang dibahas disini nantinya belum tentu merupakan bagian yang harus ada disetiap template Blogger, tetapi cuma beberapa unsur umum yang sering dipakai didalam template Blogger. Mengetahui bagian-komponen ini akan membuat Anda lebih gampang untuk mengetahui mana yang harus dicari dalam instruksi template dan bagaimana mengatasi unsur gres yang lain yang mungkin Anda temukan dalam template yang lain.
Saya akan merujuk ke gambar dari Bagian CSS di bawah ini semoga lebih gampang untuk disertai.
Simbol # dan . memperlihatkan atribut dari elemen (semacam klasifikasi dari jenis bagian). Jika belum paham dengan simbol ini, diabaikan aja dulu tidak usah perlu dipikirkan secara serius. Tetapi kalau ingin tahu lebih detail wacana simbol ini, pelajari di W3Schools.
Global:
- body ….. : mengatur sifat umum dari template, bila unsur yang dibawahnya tidak didefinisikan, maka properti yang ada dibagian ini yang berlaku.
- #outer-wrapper ….. : Bagian permulaan dan terbesar dari template. Didalam bab ini berisi header-wrapper, content-wrapper, dan footer-wrapper.
- #content-wrapper ….. : suatu bab yang berisi bagian sidebars dan main.
- a ….. : mengendalikan properti dari tulisan yang mempunyai link.
- a:visited ….. : mengendalikan properti dari tulisan yang mempunyai link setelah dikunjungi.
- a:hover ….. : mengendalikan properti dari goresan pena yang mempunyai link disaat mouse melewati goresan pena tersebut.
Karena semua isyarat harus ditulis didalam ….. sehabis judul bagian, maka untuk penjelasan berikutnya cuma 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 menertibkan performa 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-wrapper : bab yang didalamnya terdiri atas Date Header, Blog Posts, Comments, Feed Link, dan setiap widget yang ditempatkan di atas atau bawah postingan (Blog Posts).
- #main : bagian yang ada didalam main-wrapper.
- #main .widget : menertibkan properti dari semua widget yang ada didalam bagian main.
- h2.date-header – menertibkan properti dari Date Header (yang ada diatas Post Title).
- .post – menertibkan properti pada bagian Blog Posts.
- .post h3 – mengontrol properti dari judul artikel (Post Title).
- .post-body p – mengendalikan properti dari body atau isi artikel (post).
- .post ul – mengatur properti dari unordered list (daftar yang tidak bernomor).
- .post ol – menertibkan properti dari ordered list (daftar bernomor).
- .post li – mengendalikan properti dari daftar individu didalam unordered list atau ordered list.
- a img – mengendalikan properti secara biasa dari suatu 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 sidebar-wrapper.
- #sidebar1 : menertibkan properti didalam sidebar1.
- #sidebar2 : mengendalikan properti didalam sidebar2. Jika ingin properti yang ada didalam sidebar1 dan sidebar2 sama, maka properti cukup dikontrol di .sidebar dan tidak perlu ditulis didalam #sidebar1 dan #sidebar2 lagi di kode CSS.
- .sidebar .widget : menertibkan properti semua widget (yang ditambahkan lewat Added Page Element) di sidebar.
- #sidebar1 .widget : hanya mengatur widget di sidebar1.
- .sidebar .BlogArchive : menertibkan properti Blog Archive. Ini secara teknis merupakan widget disidebar juga, akan tetapi mengontrol properti di sidebar widget tidak mengubah widget untuk Blog Archive. Oleh alasannya adalah itu properti di .BlogArchive pengaturannya ditulis sendiri.
- .sidebar h2 : mengendalikan properti judul (title/header) pada sidebar widget.
- .sidebar #BlogArchive1 h2 : mengontrol properti judul pada Blog Archive.
Miscellaneous:
Pada dasarnya, bagian Profile (About Me) terletak didalam sidebar, tetapi dalam penjelasan ini diletakkan di bagian Miscellaneous.
- #Profile1 : mengendalikan properti dari About Me.
- #Profile1 h2 : mengontrol judul (title/header) pada About Me.
- .profile-img a img : mengontrol gambar didalam About Me.
- .profile-textblock : mengontrol deskripsi penulis pada About Me.
- .profile-data : mengendalikan data penulis pada About Me.
- .profile-datablock : mengontrol keseluruhan data dalam About Me.
- blockquote : mengendalikan teks dalam tanda kutip (quoted text) pada artikel.
- code : mengatur goresan pena dalam tags code di postingan.
Post-Footer:
- .post-footer : mengendalikan semua properti didalam post-footer.
- .post-footer-line : mengendalikan properti setiap baris baru di post-footer.
- .post-footer a : mengatur properti link text didalam post-footer.
- .post-footer .post-comment-link a : mengontrol link di “comment” dalam post-footer.
- #blog-pager : mengatur properti link pada tulisan “newer posts“, “home“, dan “older posts“.
- #blog-pager-newer-link : menertibkan properti pada link “newer posts“.
- #blog-pager-older-link : menertibkan properti pada link “older posts” link.
- .feed-links : menertibkan properti pada link “Subscribe to: Posts (Atom)“.
Comment:
- #comments : menertibkan semua properti pada bagian comment.
- #comments a : mengatur properti link didalam bab comment.
- #comments h4 : mengatur header dibagian comment.
- .deleted-comment : menertibkan properti untuk deleted comment.
- .comment-author : mengatur properti untuk comment author.
- .comment-body p : mengontrol properti comment body.
- #comments ul : mengontrol unordered list didalam bab comment.
- #comments li : mengontrol daftar individu didalam comment.
Footer:
- #footer-wrapper : bab yang membungkus semua elemen dan isi didalam footer section.
- #footer : bab yang ada didalam footer-wrapper.
- #footer h2 : mengontrol properti dari judul (title/header) di footer.
- #footer .widget : mengatur properti widget yang ada di footer.
- .footer a : menertibkan properti link di footer.
Dengan memahami dan memahami bagian-bagian diatas, kita mampu dengan segera menemukan arahan dan mengubahnya untuk mengganti bab-bagian dari template tertentu sesuai dengan selera, contohnya ingin mengganti aksara, warna goresan pena, background, padding, dsb. Untuk mengubah bagian-bab tersebut, yang dijalankan hanyalah memodifikasi instruksi yang ada didalam ……. pada bab yang ingin kita ubah saja.
___________________
Sumber: Our Blogger Templates