Memahami Struktur Css Blogger Bagian 3 - Dalam artikel ini pokok bahasannya adalah memilih selector yang tepat untuk mengatur dan merubah tampilan bagian sidebar dan footer pada template blog standar blogger.Untuk memilih selector css guna merubah tampilan body dan content dapat dibaca pada artikel Memahami Struktur Css Blogger Bagian 1.
Sedangkan untuk merubah tampilan kolom post atau posting silahkan baca Memahami Struktur Css Blogger Bagian 2.
Sama dengan struktur css yang telah saya jelaskan terdahulu, pada selector css kali ini perubahan yang dapat dilakukan adalah terkait dengan margin, padding, border, background, link dan font atau huruf.
Klik Gambar untuk memperbesar tampilan
"Dengan memahami struktur css blogger bagian sidebar dan footer akan mempermudah dalam merubah tampilan sidebar dan footer seperti yang diinginkan."
Adapun selector dari kode css terkait dengan kolom sidebar kanan dan footer adalah:
1. fauxcolumn-right-outer
Fauxcolumn right outer adalah area utama untuk kolom sidebar kanan. Area ini terletak disebelah kanan bagian posting dan full dari bawah header sampai dengan atas footer.
Didalam area ini terdapat area column right outer. Perbedaannya dengan fauxcolumn right outer adalah jika fauxcolumn right outer cakupan area nya adalah dari bawah header sampai dengan atas footer, sedangkan column right outer areanya adalah sebatas widget yang ada pada fauxcolumn right outer.
Kode selector css fauxcolumn right outer adalah .main-inner .fauxcolumn-right-outer {...}
2. Column Right Inner
Column right inner sebenarnya adalah area column right outer setelah adanya penambahan padding.
Kode selector css column right outer adalah .main-inner .column-right-inner {...}
3. Sidebar Right
Sidebar right adalah area yang ada dalam column right inner setelah adanya penambahan margin dan padding pada column right inner. Pada sidebar right inilah terletak h2 widget atau judul widget dan isi dari widget atau biasa disebut widget content.
Untuk merubah sidebar right, selector kode css nya adalah #sidebar-right-1.sidebar.section {...}
Untuk merubah Judul Widget, selector css nya adalah #sidebar-right-1 h2 {...}
Dan untuk merubah isi widget, selector kode css nya adalah #sidebar-right-1 .widget {...}
4. Footer Outer
Kalau bagian atas dari suatu content adalah header, maka bagian paling bawah dari content adalah footer. Di dalam footer biasanya terletak berbagai widget dan attribusi blog yang biasanya tertulis "Power by blogger".
Area keseluruhan dari footer disebut dengan footer outer. Dan kode css nya adalah .footer-outer {...}
5. Footer Inner
Footer inner sebenarnya adalah area footer outer setelah ditambah dengan margin dan padding. Pada footer inner inilah letak dari widget termasuk attribution blog.
Selector kode css footer inner adalah .footer-inner {...}
Selector kode css atribusi blog adalah #Attribution1 {...}
Demikian sekilas penjelasan mengenai beberapa selector kode css terkait dengan bagian sidebar dan footer. Semoga bermanfaat.
0 Comments