Mengatur Margin dan padding di template blogger

Margin dan padding adalah elemen penting dalam design blogger. Kalo kau tahu, mereka adalah nyawa dari design dan style dari blog kamu.
Sebelum kita melakukan modifikasi dan macam-macam pada blog kita, kita cari tahu dulu struktur blog di blogger itu seperti apa. Oh ya yang pasti kamu juga udah daftar dulu di blogger agar punya blog dengan alamat http://www.nama_blog_kamu.blogspot.com
OK kalo udah kita lanjut!!!
Perhatikan gambar berikut ini:

Perhatikan gambar di atas, dan kita akan tahu, apa yang disebut padding dan margin!!

Cara mudah bagaimana Padding dan Margin akan mempengaruhi tampilan layout blogger

Beginilah cara yang mudah bagaimana untuk melihat dengan jelas efek perubahan dari setiap editan yang kita lakukan lewat padding dan margin:

TAMBAHKAN BORDER PADA SETIAP ELEMEN

dengan adanya border setiap bagian dari blogger kita terlihat jelas. Perhatikan gambar berikut ini:



setelah kita kasih border akan tampil seperti ini. (oiya.. jangan lupa sewaktu memilih template, pilihlah "minima" ya.. agar editnya lebih mudah)



Lebih mudah khan untuk memahami bila blog kamu kelihatan seperti itu.


CARA MENAMBAHKAN BORDER DI BLOGGER
Tambahkan border pada bagian-bagian berikut ini:

• Outer Wrapper
• Header Section
• Sidebar
• Main Post Column
• Footer

Untuk menambahkan border tersebut kita tinggal menambahkan kode berikut ini:

border: 1px solid #000000;

Copy kode ini dan carilah kode berikut ini di HTML blogger kamu. Kemudian "paste" di bawah nya:

#outer-wrapper {

#header-wrapper {

#main-wrapper {


#sidebar-wrapper {

#footer {

Jika kamu punya 3 kolom pada layoutnya tambahkan pula di tag berikut ini:

#new-sidebar-wrapper

Sebelum menyimpan, preview dulu hasilnya, kamu akan lihat tulisan kamu dan border pasti terlalu mepet. Seperti ini:

Tapi jangan takut, kita akan merapikannya dengan cara yang sangat mudah.Dalam kasus ini saya mengambil contoh bahwa main wrapper kamu lebarnya 450px, coba cek di kode HTML blog kamu, ada nggak kode yang seperti ini:

#main-wrapper {

border: 1px solid #000000;

width: 450px;


float: $startSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

Atur lebarnya agar tidak ada ruang yang terlalu lebar antara main-wrapper dan sidebar (misalnya menjadi 430px), kita akan lihat bahwa sidebar kamu akan lebih rapi:

Menentukan margin

Margin menentukan jarak antara setiap elemen dalam layout. Dalam contoh di atas kita lihat tidak ada jarak antara main-post-column dan sidebar. Kita bisa menggunakan margin untuk menentukan jarak antara keduanya

Mengatur Margin sebelah kanan main wrapper

Disini kita akan mencoba untuk menambahkan margin 10px di sebelah kanan yang akan mengatur jarak antara main wrapper dengan sidebar.
Tambahkan saja kode yang dicetak merah di bawah ini dan tempatkan di main wrapper:

#main-wrapper {

border: 1px solid #000000;

margin-right: 10px;

width: 444px;

float: $startSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */


overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

PADDINGKita lihat dari contoh di atas, tidak ada jarak antara isi dan border, hanya bagian atas dan bawah saja yang sudah ber-jarak.
Sekarang misalnya kita ingin membuat jarak antara tulisan dan bordernya dengan jarak 5 pixel. Maka yang harus kita lakukan adalah:
Menambahkan kode berikut ini

padding: 0 5px 0 5px;

Kode tersebut artinya adalah jarak atasnya : 0 pixels, kanan: 5 pixels, bawah: 0 pixels, kiri: 5 pixels.
Dan paste di bagian ini:

#main-wrapper {

#sidebar-wrapper {

#new-sidebar-wrapper {

Sayangnya kadang-kadang pengaturan padding tersebut juga akan merubah layout dari keseluruhan tampilan blog kita. Yang tadinya sudah pas, tiba-tiba sidebar kita turun ke bawah. Jangan takur yang kita lakukan hanyalah mengurangi lebar sidebar tersebut.

#sidebar-wrapper {

padding: 0 5px 0 5px;

border: 1px solid #000000;

width: 235px;


margin-right: 10px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

#new-sidebar-wrapper {

padding: 0 5px 0 5px;


border: 1px solid #000000;

width: 235px;

float: $endSide;

word-wrap: break-word; /* fix for long text breaking sidebar float in IE */

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */

}

With these padding declarations in place and the nescessary adjustments have been made, the demonstration template now looks like this:

OK !! Selamat Mencoba

Artikel Terkait