TWEAKING CSS CODE

Subpost dari Belajar Membuat Blogger Template 12 step 5

Ini adalah bagian penting untuk mendesain dan mengatur bagaimana tampilan blog. Saat melakukan ini, lebar dari container di dalam CSS code sebaiknya sudah diatur. Apa yang perlu diketahui tentang tweaking CSS code bahwa itu adalah proses recursive. Ini adalah proses untuk menyempurnakan template, mengubah kode kemudian melihat tampilan, bolak-balik seperti itu sampai kita ‘puas’ dengan hasil akhirnya.

Ada banyak hal yang harus ditweaking dan banyak container harus dicustomize. Jadi bagaimana caranya melakukan semua ini dan dari mana kita memulai? Pendekatan yang paling mudah adalah memulai dari atas. Assumsikan bahwa kita memulai dari template yang sudah jadi, pada point ini kita tidak perlu kawatir terlalu banyak tentang mengcustomize body, outer-wrapper, dan content-wrapper, kecuali lebar. Kita bisa tweaking container ini nanti (atau biarkan seperti kode aslinya, kecuali mau mengubahnya nanti). Jika ingin menggunakan gambar sebagai gambar background dari keseluruhan template, kita juga bisa melakukannya nanti.

Baca Tutorial 3: Struktur dari bagian CSS style dulu jika kamu tidak familiar dengan dasar-dasar bagian kode CSS Styling. Ingat juga bahwa desain tidak mungkin sempurna saat pertama kali. Prosesnya memerlukan waktu dan banyak latihan.Untuk mengetahui dasar-dasar tweaking CSS code, baca Tutorial 4: Mengatur Property dari Container. Dan jika mau tahu container mana saja yang akan dicostumize, baca Tutorial 5: Container dan elemen Umum dalam Blogger Template.

Header:

Saya menyarankan Anda memulai dari bagian Header. Yang paling umum perlu dilakukan adalah mengatur warna background, mengatur tampilan Blog Title dan Blog Description, font, warna, font-size, dll. Jika ingin menggunakan gambar background besar sebagai gambar header image, atur itu menggunakan tombol Edit Header dalam halaman Page Elements. Daftar di bawah ini diambil dari Tutorial 5
• #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 dan Post:

Container selajutnya yang ditweaking adalah Main dan Post (termasuk Post-Footer). Ini akan memakan waktu banyak karena banyak subcontainer di dalamnya. Faktanya, Post adalah subcontainer dari Main. Selalu lebih mudah jika kita melakukan tweaking subcontainers mengikuti urutan-urutan tertentu. Saranku, gunakan urutan di bawah ini. Daftar di bawah ini dari Tutorial 5.

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).
• 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.

Sidebars:

Jika sudah selesai dengan bagian-bagian di atas, selanjutnya kita akan mengatur sidebar. Jika kamu memiliki lebih dari 1 sidebar, kamu mungkin ingin mengcustomize setiap sidebar dengan costumize yang berbeda. Kamu juga akan mengcustomize Profile dan Blog Archive jika ingin mereka berbeda dari widget lainnya. Daftar berikutnya adalah:

• .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.
• #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.

Comments:

Setelah selesai dengan sidebar, sekarang giliran bagian Comments. Posting beberapa comment untuk melihat bagaiman tampilannya setelah tweaking. Daftar berikutnya adalah:
• #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:

daftar terakhir adalah bagian footer, yaitu:

• #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.

Penyempurnaan:

Sekarang kita sudah menyelesaikan semua container, apa yang perlu dilakukan adalah lihat hasil tampilan lalu kembali lagi ke bagian kode untuk memperbaiki beberapa hal kecil. Mungkin untuk mengubah beberapa font atau warna background, font size, margin dan paddings, menambah border atau mengubah warna border, dan sebagainya. Tapi hati-hatilah saat menambah border, melakukan itu mungkin perlu mengubah lebar container yang kamu tambahkan border. Jika terjadi masalah (misalnya Sidebar melorot di bawah Blog Post), kamu perlu menambah lebar container induk dari container tersebut.

Jalan paling baik untuk mengubah background dan warna font adalah membuat mereka sebagai variable sehingga kita bisa menggunakan tab Fonts and Colors dalam halaman Layout. Jika tidak yakin melakukan ini, gunakan Generic Blogger Template sebagai template awal. Template itu punya banyak variable font dan warna untuk memulai.