Body & Wrapper

cara membuat theme blogger

Hai, masih ingat kan kalau tampilan theme-nya masih kosong melompong. Nah pada sesi ini kita akan mulai membentuk theme dengan menambahkan CSS untuk elemen body dan main-wrapper.

Body

Bagian pertama yang akan diatur tampilannya adalah body.

1. Pilih menu Theme » edit HTML, lalu copy kode dibawah ini

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
font-size: 100%;
}

body {
background-color:#f6f6f6;
}

2. Simpan kode tersebut tepat dibawah <style> atau sebelum penutupnya, yaitu </style>.

3. Klik save, lalu lihat perubahan yang terjadi pada blog.

Karena body hanya mengatur tampilan dasar maka pada ukuran font saya menggunakan satuan persen. Selain persen ukuran font bisa diatur dengan px, pt atau em. Untuk warna latar saya gunakan warna abu-abu yang ditulis dalam kode hex.

Wrapper

Pada dasarnya main-wrapper adalah sebuah bungkus seluruh konten blog, dimana header, navigasi, post, sidebar dan footer akan tesimpan di dalamnya.

Sama seperti body, karena elemen ini hanya sebagai pembungkus maka kita tidak perlu terlalu banyak membuat pengaturan untuk main-wrapper.

1. Copy CSS berikut ini dan letakan tepat sebelum </style>.

#main-wrapper {
    text-align: left;
    background-color: #fff;
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    margin-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

2. Klik Save, lalu lihat perubahannya secara langsung.

Nah sekarang kamu sudah memiliki pembungkus untuk seluruh konten blog.

Ada beberapa poin penting yang harus diperhatikan dari properti CSS body dan main-wrapper tadi, yaitu

PropertiNilai

color

Properti color digunakan untuk mengatur warna font. Untuk nilainya bisa menggunakan kode hex atau rgb.dengan bantuan aplikasi editor citra/grafis seperti Photoshop atau Corel,

Tapi jika tidak familiar dengan aplikasi sejenis itu kita bisa mencarinya secara online, salah satunya bisa didapatkan di flatuicolors.com

background-color

Background-color adalah properti yang mengatur warna latar sebuah elemen. Sama seperti properti color kita bisa menggunakan kode warna hex atau rgb.

font-size

Dalam CSS properti font-size berfungsi untuk mengatur ukuran font, sedangkan nilainya bisa menggunakan satuan %, px, pt, atau em.

text-align

Rata teks sebuah elemen dapat diatur melalui properti text-align, dan untuk nilainya kita bisa memilih antara left (rata kiri), right (rata kanan), atau center (rata tengah)

margin

Margin adalah properti yang bisa mengatur posisi sebuah elemen, atau tepatnya jarak tepi elemen tersebut dengan elemen lainnya.

margin-left : tepi kiri

margin-right: tepi kanan

margin-top: tepi atas

margin-bottom: tepi bawah.

Untuk nilai properti ini kita bisa menggunakan satuan px, % atau auto jika ingin memposisikan elemen tersebut berada ditengah bidang yang membungkusnya.

padding

Fungsinya hampir sama seperti margin, tapi padding lebih mengatur spasi atau jarak tepi yang ada dalam sebuah elemen Untuk nilai properti ini kita bisa menggunakan satuan px dan, %

width

Width adalah properti yang dibuat untuk mengatur lebar sebuah elemen. Pada umumnya satuan nilai untuk properti ini menggunkan px atau %

sebagai latihan dan membiasakan diri dengan CSS kamu boleh merubah nilai properti dari body dan main-wrapper, lalu lihat perubahannya setiap kamu merubah nilai propertinya.

 

 

 

 

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *