Memahami Struktur Css Blogger - Bagian 2

Tulisan kali ini adalah kelanjutan dari artikel memahami struktur css blogger bagian satu yang telah dijelaskan pada artikel sebelumnya. 

Struktur css blogger bagian 2 (dua) ini akan menjelaskan kode - kode css terkait dengan posting yang meliputi date header (tanggal diatas judul) sampai dengan feed links (tulisan langganan atom dll). 

Kode css bagian posting yang saya uraikan hanya menyangkut Selector nya saja, untuk property dan value nya silahkan diisi sesuai kreatifitas sendiri.

Pada prinsipnya property yang dapat dirubah pada css bagian posting tidak jauh berbeda dengan css bagian lainnya yaitu,  merubah tata letak (margin dan padding), merubah border, merubah huruf (jenis, ukuran, warna), merubah background dan merubah link.

Klik Gambar Untuk Memperbesar

"Dengan memahami Struktur Css Blogger pada bagian posting akan mempermudah dalam merubah dan mengatur tampilan halaman posting."

Pada bagian 1 (satu) telah saya uraikan selector kode css dari bagian body sampai dengan header. Dan selanjutnya adalah:

4. Main Outer
Main outer adalah bidang atau area yang terletak antara header dan footer.

• Kode css main outer adalah .main-outer {...}

Setelah ditambah dengan padding, maka di dalam main outer muncul area baru yang disebut sebagai main inner. Pada main inner inilah terletak kolom posting dan kolom sidebar.

• Kode css main inner adalah .main-inner {...}

5. Fauxcolumn Center Outer
Dalam area main inner terdapat fauxcolumn center outer atau kolom posting. Sedangkan dalam fauxcolumn center outer sendiri terdapat area column center outer. Perbedaan antara fauxcolumn center outer dengan column center outer dapat diilustrasikan sebagai berikut.

Misalnya total ketinggian widget yang ada di sidebar adalah 700 px, sedangkan total ketinggian artikel posting sampai komentar adalah 400px. Bila memberi warna background dengan merubah css fauxcolumn center outer maka background akan nampak full setinggi 700px. Tetapi bila memberi warna background melalui kode css column center outer maka warna background hanya sebatas 400px.

Selector kode css fauxcolumn center outer adalah:

• .main-inner .fauxcolumn-center-outer {...}

Selector kode css column center outer adalah:

• .column-center-outer {...}

6. Column Center Inner
Column center inner terletak dalam column center outer setelah adanya penambahan padding. Adapun kode css column center inner adalah:

• .main-inner .column-center-inner {...}

7. Column Center Inner - Section
Pada area column center inner terdapat area Column Center Inner - Section. Di area inilah terletak Date header, Post, Comment, Blog Pager dan feed links.

Kode css selector Column Center Inner - Section adalah

• .main-inner .column-center-inner .section {...}

8.Date Header
Date header adalah tanggal yang berada di atas Judul postingan atau artikel. Bila ingin merubahnya kode css nya adalah:

• .date-header span {...}

9. Post
Post adalah area posting terdiri atas Post Title (Judul Posting), Post Body (Isi atau uraian Posting) dan Post Footer (Catatan kaki Posting). Jika ingin merubah bagian - bagian tersebut, selector kode css yang dijadikan pedoman adalah:

• Untuk merubah area Post secara keseluruhan kode css nya adalah .post {...}

• Merubah judul posting kode css nya h3.post-title{...}

• Merubah isi posting kode css nya .post-body {...}

• Dan untuk merubah catatan kaki posting yang berisi label, nama author dan lain - lain kode css nya .post-footer {...}

10. Comment
Dibawah post footer terdapat area comment atau komentar. Pada template standar blogger Judul artikel masuk dalam kategori h3 sedangkan untuk judul komentar masuk pada kategori h4.

• Untuk merubah judul komentar, kode css nya adalah .comments h4 {...}

11. Blog Pager
Blog Pager adalah navigasi halaman yang menunjukkan "Posting Lama", "Beranda" dan "Posting Baru".

• Untuk merubahnya kode css nya adalah: #blog-pager {...}

• Kalau ingin merubah lebih detail kode css nya .blog-pager-older-link, .home-link, .blog-pager-newer-link {...}

12. Feed Links
Feed Links merupakan link langganan - subscribe dalam bentuk rss atom. Pada feed links biasanya tertulis "Langganan: Poskan Komentar (Atom). Untuk merubah tata letak dan tampilan feed links kode css nya adalah:

• .feed-links {...}

Demikian uraian sederhana mengenai selector dari kode css bagian kolom posting yang biasanya di edit atau dirubah para blogger.

Selanjutnya pembahasan mengenai kode css yang ada di sidebar dan footer akan saya tulis di artikel berikutnya. Terimakasih atas kunjungannya.

Related Post