Home » » Edit Width, Padding, Margin, Border Template Blog

Edit Width, Padding, Margin, Border Template Blog

Ada beberapa hal sederhana yang harus diperhatikan dalam mendesain sebuah Blog. Namun kadang hal ini justru kurang di pahami oleh sebagian blogger pemula (NewBie) seperti saya..hehe.
Disini saya akan menerangkan tentang dasar pengeditan template Blogger agar menjadi lebih rapi, Apa saja hal yang harus diperhatikan dalam merapikan template Blog ?
Sebuah Template Blog terdiri dari beberapa elemen, yaitu Header, Post, Sidebar, dan Footer. Untuk membuat template Blog terlihat lebih rapi kita dapat mengatur tampilan empat elemen tersebut. Nah bagaimana caranya ?
Pertama kita harus memahami dulu apa dan dimana letak Header, Sidebar, Postingan, dan Footer.
Berikut adalah caranya :

1. Header adalah kepala atau bagian paling atas dari Template Blog, biasanya berisi gambar.
2. Postingan adalah tempat untuk menuliskan posting pada Blog
3. Sidebar adalah bagian sisi dari Template Blog yang biasanya terletak disamping postingan dan dapat di isi dengan widget
4. Footer adalah bagian terbawah dari sebuah Blog
Untuk lebih jelasnya mari kita lihat gambar di bawah ini :




Sekarang bagaimana agar Template Blog terlihat lebih rapi, kita dapat mengatur posisi Header, Sidebar, Postingan, dan Fotter agar tidak saling bertabrakan atau dengan kata lain lebih teratur, caranya adalah dengan mengatur lebar kolom elemen tersebut, dan mengatur jarak antar elemen. Sebelum kita mengatur lebar dan memberi jarak sebaiknya kita pahami dulu elemen apa saja yang diperlukan dalam proses ini :

1. Body Objek ( Tempat posting atau widget yang di tambahkan).
2. Padding adalah jarak atau spasi antara Body dengan Bordir.
3. Bordir adalah garis tepi atau batas dari tempat postingan, sidebar, header, dan footer.
4. Margin adalah jarak atau spasi antara satu bordir dengan bordir yang lain.
5. Background adalah latar belakang dari elemen elemen tersebut, yang biasanya dapat di isi dengan warna ataupun gambar.
6. Width adalah lebar dari elemen.
Untuk lebih jelasnya mari kita lihat gambar dibawah ini :






Sekarang bagaimana penempatan dan cara menulis serta membaca elemen elemen tersebut :
Contoh penulisan dalam sebuah Sidebar template :


#sidebar2-wrapper {
width: 200px;
float: left;
padding: 10px 20px 10px 20px;
margin:5px 10px 20px 10px;
border:0px solid #ffffff;

Cara membaca :

1. Width : lebar sidebar adalah 200 pixel.
2. Float : letak atau posisi sidebar di sebelah kiri.
3. Padding : Padding di baca mulai dari sisi atas , kanan, bawah, kiri. Jadi
cara membacanya :
Jarak widget dalam Sidebar tersebut dengan Bordir adalah
( Pada sisi atas 10 pixel, sisi kanan 20 pixel, sisi bawah 10 pixel, sisi kiri 20 pixel )
4. Margin : di baca sama dengan Padding yaitu mulai dari sisi atas, kanan, bawah, kiri. Dari margin di atas dapat di baca:
Jarak antara Bordir yang satu dengan yang lain adalah ( pada sisi atas 5 pixel, pada sisi kanan 10 pixel, pada sisi bawah 20 pixel, pada sisi kiri 10 pixel
5. Bordir : Bordir atau garis tepi sidebar adalah sebesar 1 pixel, jenis solid, warna putih
(jenis bordir ada beberapa macam : Solid, dotted, Grove, Double, Inset dan masih banyak lagi)
6. #ffffff; adalah kode warna, dapat di lihat pada kode warna photoshop

Nah bagaimana sudah jelas belum ? Pertama memang biasanya membingungkan,tapi jika sudah terbiasa akan terasa mudah, karena itu perbanyaklah belajar dan mencoba.
Tapi sebelum mengedit Template Blog sebaiknya back up dulu seluruh Template anda. Caranya adalah dengan Klik Download Template Lengkap atau kamu copy aja semuanya dalam microsoft word. Cukup sekian dulu semoga bermanfaat, jika ada yang kurang atau ada yang salah mohon komentarnya..

0 komentar:

Posting Komentar

Silakan berkomentar sesuai dengan topik. Jangan menyisipkan link aktif pada komentar dan jangan sampai komentar Anda masuk komentar SPAM.

Jangan salahkan Saya bila komentar Anda dihapus !

Arsip Blog