Untuk mengatur rasio lebar layout artikel dan sidebar, Anda perlu mengubah beberapa bagian dalam CSS. Berikut adalah lokasi-lokasi yang perlu diedit:

 

Untuk mengatur rasio lebar layout artikel dan sidebar, Anda perlu mengubah beberapa bagian dalam CSS. Berikut adalah lokasi-lokasi yang perlu diedit:

1. Layout Mode Edit Blogger (Cara termudah)

css

1

2

body#layout #main-wrapper{width:70%;float:left;margin:0;padding:0}

body#layout #sidebar-wrapper{width:30%;float:right;margin:0}

2. Layout Mode Tampilan (Yang penting)

A. Lebar Main Content (Artikel)

Cari kode ini:

css

1

#main-wrapper{position:relative;width:640px;word-wrap:break-word;margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:left}

Ubah menjadi:

css

1

#main-wrapper{position:relative;width:65%;word-wrap:break-word;margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:left}

B. Lebar Sidebar

Cari kode ini:

css

1

#sidebar-wrapper{position:relative;display:block;width:300px;word-wrap:break-word;margin:0;padding:0;float: right;}

Ubah menjadi:

css

1

#sidebar-wrapper{position:relative;display:block;width:32%;word-wrap:break-word;margin:0;padding:0;float: right;}

C. Container Utama

Cari kode ini:

css

1

.full-row{width:100%;margin:0 auto;max-width:1200px}

Ubah menjadi:

css

1

.full-row{width:100%;margin:0 auto;max-width:1200px;padding:0 20px}

3. Opsi Rasio yang Disarankan

Opsi 1: Artikel Lebih Lebar (70:30)

css

1

2

#main-wrapper{width:70%}

#sidebar-wrapper{width:28%}

Opsi 2: Seimbang (65:35)

css

1

2

#main-wrapper{width:65%}

#sidebar-wrapper{width:33%}

Opsi 3: Artikel Dominan (75:25)

css

1

2

#main-wrapper{width:75%}

#sidebar-wrapper{width:23%}

4. Jarak Antara Artikel dan Sidebar

Cari kode ini:

css

1

#outer-wrapper{width:100%;padding:15px 0;overflow:hidden;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

Tambahkan gap:

css

1

#outer-wrapper{width:100%;padding:15px 0;overflow:hidden;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;display:flex;gap:20px}

5. Responsive Mode

Untuk tampilan mobile, pastikan kode ini ada:

css

1

2

3

⌄

@media screen and (max-width:1024px){

#main-wrapper,#sidebar-wrapper{float:none;width:100%;margin:0;border:0}

}

6. Contoh Lengkap Perubahan

css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/* Container Utama */

.full-row{width:100%;margin:0 auto;max-width:1200px;padding:0 20px}

#outer-wrapper{width:100%;padding:15px 0;overflow:hidden;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;display:flex;gap:30px}

/* Main Content - 70% */

#main-wrapper{position:relative;width:70%;word-wrap:break-word;margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:left}

/* Sidebar - 28% */

#sidebar-wrapper{position:relative;display:block;width:28%;word-wrap:break-word;margin:0;padding:0;float: right;}

/* Layout Mode Edit */

body#layout #main-wrapper{width:70%;float:left;margin:0;padding:0}

body#layout #sidebar-wrapper{width:28%;float:right;margin:0}

Tips:

• Gunakan persentase (%) daripada piksel (px) untuk layout yang lebih responsif
• Total lebar sebaiknya tidak melebihi 98% (70% + 28% = 98%) untuk memberi ruang gap
• Sesuaikan gap untuk mengatur jarak antara artikel dan sidebar
• Untuk monitor besar, Anda bisa meningkatkan max-width menjadi 1400px

Pilih rasio yang sesuai dengan kebutuhan konten Anda. Rasio 70:30 umumnya baik untuk blog dengan konten teks panjang.