Lebar Blog Fleksibel Di Monitor Biasa ataupun Laptop

Berangkat dari pertanyaan salah satu sobat blogger pagi tadi, intinya ia bertanya bagaimana membuat halaman penuh di latop. Blognya penuh di komputer biasa, namun ketika dibuka di laptop, blognya terlalu ke tengah dan ada jarak yang sangat lebar di kanan dan kiri. Kita semua tahu itu karena memang layar laptop lebih memanjang ketimbang monitor biasa. Beberapa orang memilih untuk menyesuaikan dengan layar monitor PC karena sebagian besar pengguna Internet masih gunakan PC seperti di rumah atau warnet, namun sebagian lagi beranggapan laptop akan merajai karena sekarang era hot-spotan di alam bebas.

Baik pendapat satu atau dua ada titik benarnya, dan yang paling benar adalah bagi Anda pemilik blog adalah membuat lebar yang fleksibel, yang bisa menyesuaikan dengan lebar layar. Di laptop OK!, di monitor PC Ok!, dimanapun OK!

Untuk contoh kali ini saya akan menggunakan minima, ini adalah kode css beberapa bagian minima yang telah saya lebarkan (saya ambil beberapa sebagai contoh):

#header-wrapper {
  width:960 px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
  }
#outer-wrapper {
  width: 960 px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
  }
 #main-wrapper {
  width: 710 px;
  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 */
  }
#sidebar-wrapper {
  width: 220 px;
  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 */
}

Dengan keadaan seperti itu, template minima akan baik-baik saja di resolusi 1024 x 768

Nah, karena sedang tak ada laptop di rumah, saya tes dengan ubah resolusi layar PC saya menjadi 800 x 600 (beberapa orang memilih ini untuk mendapatkan tampilan besar, sehingga lebih jelas bagi orang-orang yang sudah uzur). Dalam resolusi ini, minima saya tampil tidak penuh dan hilang kesamping, sebagai ganti akses ada bantuan otomatis berupa horizontal scrollbar.

Lalu saya ubah lagi menjadi 1152 x 864. Dalam keadaan seperti ini, template minima terkesan mengecil dan lari ke tengah (seperti di laptop), dan ada ruang kosong di kanan dan kiri template.

Ini terjadi karena template mempertahankan lebar yang tertera di css di atasseperti 960 px untuk outer-wrapper, dan 710 px untuk main-wrapper. Agar lebar menjadi fleksibel langkah yang digunakan sangat simple, kita hanya perlu mengganti satuan px ke persen. Agar mudah, saya buat 10 px = 1 %. Sehinggga cssnya menjadi:

#header-wrapper {
  width:96%;
  margin:0 auto 1%;
  }
#outer-wrapper {
  width: 96%;
  margin:0 auto;
  padding:1%;
  text-align:$startSide;
  font: $bodyfont;
  }
 #main-wrapper {
  width: 71%;
  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 */
  }
#sidebar-wrapper {
  width: 22%;
  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 */
}

Yang perlu diperhatikan, padding dan marginpun harus diubah menjadi persen juga karena jika tidak, nanti saat lebar templet Anda menyesuaikan monitor dan padding tetap mempertahankan lebarnya, maka akan terjadi desain yang tidak proporsional.

Setelah diubah ke persen, dalam resolusi 800 x 600 hasilnya seperti gambar di bawah ini, lebar template tetap terlihat penuh dan tidak memunculkan horizontal scrollbar.

Sedang di resolusi 1152 x 864, template akan tetap otomatis menyesuaikan dan juga penuh sehingga tidak ada lagi ruang kosong di kanan dan kiri.

Silahkan bagi Anda yang berminat, cobalah dan buat lebar Anda fleksibel dimanapun itu dibuka. Jika Anda pun kesusahan mencari laptop untuk mencobanya, silahkan tes dengan ubah resolusi monitor PC Anda seperti yang saya lakukan. Pada desktop, klik kanan lalu pilih properties, pilih setting. Semoga bermanfaat.

Related Posts by Categories

Widget by Hoctro | Jack Book