CONTAINER DAN ELEMEN UMUM DALAM BLOGGER TEMPLATE

BELAJAR MEMBUAT BLOGGER TEMPLATE 5

Inilah daftar dari container dan elemen umum dalam blogger template dan fungsi-fungsi mereka.( elemen adalah dasar dari setiap objek yang membuat blog berfungsi dan container adalah elemen besar yang mengandung elemen lebih kecil atau content lain).

elemen elemen umum di bawah ini yang akan diperlihatkan tidak elemen yang semestinya ada atau harus ada di dalam blogger template, tapi hanya beberapa elemen umum yang mengontrol bagian terbesar dari template style. Dengan mengetahui ini, akan memuahkan kita untuk mengetahui dimana melihat kode itu dan bagaimana menyesuaikan dengan elemen baru lainnya yang mungkin kita temukan di blogger template yang lain.

Aku tidak akan mendaftar semua elemen, tapi hanya elemen yang cukup sehingga kita bisa mendapat ide dan bisa mengerti semua elemen lain dalam template kita sendiri. Tutorial ini akan merefer kepada gambar dari CSS Styling Section di bawah ini agar lebih mudah untuk diikuti.

Simbol pagar (#) dan titik (.) memperlihatkan atribut dari elemen ( klasifikasi singkat dari tipe elemen). Tapi kita tidak perlu terlalu mengkhawatirkan itu. Jika ingin tahu lebih banyak, silahkan lihat tutorial dari W3Schools .

Global:
• body {.....} – Properti umum dari template secara keseluruhan.
• #outer-wrapper {.....} – Permulaan dan container terbesar dari semua content template. Di dalam sini ada header-wrapper, content-wrapper, dan footer-wrapper.
• #content-wrapper {.....} – Wrapper yang mengandung sidebars dan main containers.
• a {.....} – Ini mengatur semua property dari link text (hyperlink)
• a:visited {.....} – Ini mengatur semua property link yang sudah dikunjungi(visited link text).
• a:hover {.....} – ini mengatur property semua link text ketika panah mouse menunjuknya.

Karena semua code elemen harus ditulis dalam {…}, kita akan menulis judul elemen setelah ini.

Header:
• #header-wrapper - container yang membelit Blog Title dan Blog Description.
• #header – container di dalam header-wrapper.
• #header h1 – tag di dalam container ini mengatur tampilan dan layout dari Blog Title.
• #header h1 a – mengatur property Blog Title sebagai link text.
• #header .description – property Blog Description.
• #header a img – mengatur property dari gambar di dalam header

Main:
• #main-wrapper – container yang membelit Date Header, Blog Posts, Comments, Feed Link, dan beberapa widget yang ditempatkan di atas atau di bawah Blog Posts.
• #main – container di dalam main-wrapper.
• #main .widget – mengatur property dari semua widget di main container.
• h2.date-header – mengatur property dari Date Header (di atas Post Title).
• .post – mengatur Blog Posts container.
• .post h3 – mengatur property dari Post Title.
• .post-body p – mengatur property dari body atau content
• .post ul – mengatur property dari unordered list (daftar yang tidak bernomor).
• .post ol – mengatur property dari ordered list (daftar bernomor).
• .post li – mengatur property dari daftar sendiri di unordered list atau ordered list.
• a img – mengatur property umum dari gambar (refer link dan gambar itu sendiri dengan linknya).

Sidebar:
• .sidebar-wrapper – container yang membelit semua elemen dan content sidebar.
• .sidebar – container di dalam sidebar-wrapper.
• #sidebar1 – mengatur property sidebar1.
• #sidebar2 – mengatur property dalam sidebar2. Jika ingin membuat property sidebar1 dan sidebar2 sama, kita hanya perlu .sidebar dan tidak harus menuliskan #sidebar1 dan #sidebar2 dalam CSS code.
• .sidebar .widget – mengatur property dari semua widget (add Page Element) dalam sidebar.
• #sidebar1 .widget – hanya mengatur widget dalam sidebar1.
• .sidebar .BlogArchive – mengatur property Blog Archive. Tekniknya sih ini sidebar juga, tapi aku tidak yakin mengapa pengaturan property untuk sidebar widget tidak mengubah property Blog Archive. Itulah mngapa kita harus menuliskan perintah untuk mengatur property BlogArchive.
• .sidebar h2 – mengatur property judul sidebar widget.
• .sidebar #BlogArchive1 h2 –mengatur judul Blog Archive.

Miscellaneous:
tekniknya, profile (about Me) diletakkan did alam sidebar, tapi sering ditempatkan dalam Miscellaneous section karena ada elemen-elemen yang lebih kecil bersamaan dengan Profile container dan meletakkannya dalam Miscellaneous.
• #Profile1 – mengatur property umum About Me.
• #Profile1 h2 – mengatur title/header dari the About Me.
• .profile-img a img – mengatur gambar dari About Me.
• .profile-textblock – mengatur descripsi author About Me.
• .profile-data – mengatur author data About Me.
• .profile-datablock – mengatur semua blok dalam About Me.
• blockquote - mengatur quoted text dalam postingan.
• code – mengatur text di dalam tag code dalam postingan.

Post-Footer:
• .post-footer – mengatur property keseluruhan post-footer.
• .post-footer-line – mengatur property setiap baris baru dalam post-footer.
• .post-footer a – mengatur property link text dalam post-footer.
• .post-footer .post-comment-link a – mengatur "comment" link dalam post-footer.
• #blog-pager – mengatur property "newer posts", "home", dan "older posts" link.
• #blog-pager-newer-link – mengatur property dari "newer posts" link.
• #blog-pager-older-link – mengatur property dari "older posts" link.
• .feed-links – mengatur "Subscribe to: Posts (Atom)" link.

Comment:
• #comments – mengatur property keseluruhan comment container.
• #comments a - mengatur property link text dalam comment container.
• #comments h4 – mengatur header comment container.
• .deleted-comment – mengatur property deleted comment.
• .comment-author – mengatur property comment author.
• .comment-body p - mengatur property comment body.
• #comments ul - mengatur unordered list di dalam comment container.
• #comments li – mengatur individual list di dalam comment container.

Footer:
• #footer-wrapper – bagian yang membelit keseluruhan elemen dan content di dalam footer section.
• #footer – container dalam footer-wrapper.
• #footer h2 – mengatur property footer title/header.
• #footer .widget - mengatur footer widget properties.
• .footer a – mengatur semua footer link text.

Sekarang kita tahu semua elemen dan container ini, kita akan bisa melihat dimana meletakkan template kode saat mengubah beberapa hal tentang (fonts, text colors, background colors, padding, dll). Yang harus dilakukan setelah ini hanya sedikit memodifikasi kode di dalam {.....} untuk elemen tersebut.

translate dari :ourbloggertemplate.com