Mengatur Margin dan padding di template blogger

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by mukhammad nur Minggu, 01 April 2012 2 komentar
Mengatur Margin dan padding di template blogger | Mengenal Padding dan Margin HTML pada Template. 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:
Mengatur Margin dan padding di template blogger


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

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:
Mengatur Margin dan padding di template blogger

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:
Mengatur Margin dan padding di template blogger

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:

Mengatur Margin dan padding di template blogger


Selamat berkarya..
artikel cinta fido tentang Mengatur Margin dan padding di template blogger
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Mengatur Margin dan padding di template blogger
Ditulis oleh mukhammad nur
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://cintafido.blogspot.com/2012/04/mengatur-margin-dan-padding-di-template.html. Terima kasih sudah singgah membaca artikel ini.

2 komentar:

bisnis mudah mengatakan...

Lumayan bingung, tapi bermanfaat

coba mengatakan...

sama-sama bingung gk pp, yg penting belajar...

Posting Komentar

Panduan blog dan SEO support Online Skill - Cinta fido Fido | Kopi kanan Akherat | Kisah Nabi Muhammad | Sahabat | Belajar Blogger | Template | HTML | Tutorial | Komputer.

investasi semoga anda senang

kurs mata uang BCA-2


Selamat datang di blog cinta fido, semoga anda diberi keSehatan oleh alloh SWT

Islam itu Cinta Damai Agama Islam Cinta Damai
jihad Damai adalah amal kebaikan yang Allah perintahkan dan menjadi sebab kokoh dan kemuliaan umat islam