Cara Melebarkan atau Mengecilkan Area Postingan dan Sidebar

Kali ini Saya akan memberitahu cara melebarkan atau mengecilkan area postingan dan sidebar.

Tanpa berlama-lama lihat kode di bawah  ini ↓

Untuk area postingan :

#main-wrapper {
  width: 410px;
  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 */
  }

Untuk area sidebar :

#sidebar-wrapper {
  width: 220px;
  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 */
}

Untuk melihat kode di atas Anda harus :

• Login ke blogger.com, jika sudah,
• Pilih Template → Edit HTML → Expand Widget Template
• Cari kode di atas dengan (ctrl+f) agar mudah mencarinya

Nah, kode lebar ditunjukkan oleh width. Saya beri warna merah. Jika Anda ingin merubahnya silahkan rubah kode bagian itu. Ganti saja angkanya dengan angka yang Anda mau, pertahankan satuan pixel (px). Agar tidak terjadi error seperti jatuhnya sidebar tetap jaga jumlah lebar postingan dan lebar sidebar agar muat di outer-wrapper. (Pembahasan mengenai kaitan outer-wrapper di bahas di seri selanjutnya.).

 

Misal lebar standart postingan (410px) + lebar standart sidebar (220px) adalah 630px
Maka jika Anda melebarkan postingan, maka Anda harus kecilkan sidebar.
Misal lebar postingan menjadi 450px + ditambah sidebar yang dikceilkan menjadi 180px, hasilnya tetap 630px.

 

• Simpan dan lihat hasilnya.

Selamat Mencoba !