Dalam merubah tampilan blog biasanya tidak terlepas dari bagaimana cara merubah huruf, tata letak (margin, padding), background, link dan lain sebagainya pada bagian tertentu blog.
Bagian - bagian tetentu dari template blog standar blogger secara umum dapat kita sebut sebagai struktur blog (pada bahasan kali ini lebih tepatnya disebut layout blog) yang secara garis besar dibagi dalam 5 (lima) bagian yaitu Body, Content, Header, Main Outer (Didalamnya terdapat Posting dan Sidebar) serta Footer.
Bagian - bagian tetentu dari template blog standar blogger secara umum dapat kita sebut sebagai struktur blog (pada bahasan kali ini lebih tepatnya disebut layout blog) yang secara garis besar dibagi dalam 5 (lima) bagian yaitu Body, Content, Header, Main Outer (Didalamnya terdapat Posting dan Sidebar) serta Footer.
Kode Css pada Selector yang ada di 5 (lima) bagian itulah yang akan dibahas dalam artikel "memahami struktur css blogger" ini. Tujuannya adalah untuk memudahkan edit template dengan tanpa harus bersusah payah mencari - cari kode css mana yang hendak dirubah untuk mendapatkan tampilan sesuai yang diinginkan.
Perlu diketahui bahwa kode css pada suatu template mungkin berbeda tetapi pada prinsipnya sama. Susunan css blogger adalah "selector {property:value;}".
Selector adalah item yang hendak dirubah (bisa berupa Id item atau Class item) misalnya #Navbar1.
Property menunjukkan "apanya yang hendak dirubah" misalnya ketinggiannya berarti propertynya "height".
Value menunjukkan nilai perubahan dari property, misalnya "40px".
Maka susunannya akan menjadi: #Navbar1 {height:40px;}
Dan untuk memahami struktur kode css kali ini saya uji coba dengan template standar blogger memakai 2 (dua) kolom dengan detail berikut.
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
Kode apa saja yang dapat kita rubah pada struktur css template blogger untuk mendapatkan penampilan blog sesuai keinginan:
1. Bagian Body.
Body adalah merupakan lapis pertama atau bagian terdalam pada blog. Pada bagian ini diantaranya berisi kode css untuk mengatur Navbar dan kode css untuk style body yang diinginkan yaitu mengatur huruf, link dan background.
Klik Gambar untuk memperbesar tampilan
Selector
Perlu diketahui bahwa kode css pada suatu template mungkin berbeda tetapi pada prinsipnya sama. Susunan css blogger adalah "selector {property:value;}".
Selector adalah item yang hendak dirubah (bisa berupa Id item atau Class item) misalnya #Navbar1.
Property menunjukkan "apanya yang hendak dirubah" misalnya ketinggiannya berarti propertynya "height".
Value menunjukkan nilai perubahan dari property, misalnya "40px".
Maka susunannya akan menjadi: #Navbar1 {height:40px;}
Dan untuk memahami struktur kode css kali ini saya uji coba dengan template standar blogger memakai 2 (dua) kolom dengan detail berikut.
Blogger Template Style
Name: Simple
Designer: Josh Peterson
URL: www.noaesthetic.com
Kode apa saja yang dapat kita rubah pada struktur css template blogger untuk mendapatkan penampilan blog sesuai keinginan:
1. Bagian Body.
Body adalah merupakan lapis pertama atau bagian terdalam pada blog. Pada bagian ini diantaranya berisi kode css untuk mengatur Navbar dan kode css untuk style body yang diinginkan yaitu mengatur huruf, link dan background.
- Kode Css Blogger untuk mengatur Navbar adalah #Navbar1 {...}
- Kode Css untuk mengatur huruf (secara global) dan mengatur background blog adalah body {...}
- Kode Css untuk mengatur link (secara global) adalah a:link {...}, a:visited {...} serta a:hover {...}.
- Kode Css untuk menghilangkan efek gradient - pendar pada background blog adalah: .body-fauxcolumn-outer .fauxcolumn-inner, .body-fauxcolumn-outer .cap-top, .body-fauxcolumn-outer .cap-top .cap-left {background: none;}
2. Bagian Content.
Lapis kedua dari struktur css blogger adalah content. Content adalah merupakan bagian isi dari blog atau biasa disebut dengan "halaman utama".
Content dikelompokkan menjadi 2 bagian yaitu Content Outer menunjukkan ukuran keseluruhan content dan Content Inner yang menunjukkan ukuran isi content.
Pada content outer dapat kita atur lebar content dan dalam Content inner dapat kita atur background halaman utama serta tata letak dengan menggunakan margin dan padding.
- Kode css content outer: .content-outer, .content-fauxcolumn-outer, .region-inner {...}
- Kode css content inner: .content-inner {...}
3. Header
Pada kepala blog atau header terdiri dari beberapa bagian yaitu Header Outer, Titlewrapper, Title, Descriptionwrapper dan Description.
Header Outer adalah area total dari header dimana terdapat area judul blog dan area deskripsi blog. Dibagian inilah kita dapat merubah dan menambahkan kode css background header dan border.
- Kode css header outer adalah .header-outer {...}
Titlewrapper adalah area terletak judul blog. Kode css yang dapat kita rubah dan tambahkan adalah margin, padding, background dan border.
- Kode css Titlewrapper adalah .header-inner .Header .titlewrapper {...}
Title merupakan judul blog. Dalam bentuk standar dikenal dengan kode h1. Kode css yang dapat kita atur pada bagian ini adalah merubah huruf (warna, bentuk, ukuran), background, border, margin dan padding.
- Kode css untuk judul blog atau h1 adalah .Header h1 {...} untuk tampilan di homepage.
- Dan .Header h1 a {...} untuk tampilan selain homepage.
Descriptionwarapper dan Description. Definisi dan kode css yang dapat dirubah dan ditambahkan sama halnya dengan Titlewrapper dan Title. Perbedaannya, kalau titlewrapper memuat judul blog sedangkan descriptionwrapper berisi deskripsi blog.
- Kode css untuk Descriptionwrapper adalah .header-inner .Header .descriptionwrapper {...}
- Kode css untuk Description adalah .Header .description {...}
Ikuti bagian 2 dari artikel ini dengan pokok bahasan struktur css blogger terkait css post atau posting. Salam blogger.
"Cara termudah merubah template blog adalah dengan memahami struktur css template blog itu sendiri. Bahasan kali ini adalah css blogger mencakup Header, Body, Navbar dan Content Blog."
0 Comments