Cara Mengatur Lebar Blog Yang Benar

Assalamualaikum.Wr. wb.

Cara mengatur lebar blog mungkin sudah tidak asing lagi untuk para master blogger, lain halnya dengan para pemula yang baru kenal dengan istilah edit html.

Permasalahan yang paling sering terjadi adalah ketika para pemula membuat sebuah blog dan kemudian mengkonfigurasi ulang dengan tujuan agar blognya lebih menarik, tanpa disadari ternyata ketika blognya dibuka menggunakan notebook yang sudah tentu layar monitornya rata-rata 14inch ternyata tampilannya menjadi berantakan, karena terlalu lebar, bahkan sampai ada yang terpotong. Lalu bagaimana solusinya agar blog kita ketika dibuka oleh layar monitor yang memiliki resolusi berapapun tampilannya tetap menyesuaikan dan tidak berantakan ?

Solusinya adalah hanya dengan mengganti ukurannya dengan satuan persen (%).

Kita langsung praktik yuu--->>
1. Atur Outer-Wrapper dengan satuan %
(outer wrapper adalah untuk mengatur keseluruhan blog kita, terutama adalah lebarnya)
Saya contohkan pengaturan outer wrapper blog saya :

#outer-wrapper {
width:80%;
text-align:justify;border:0.5px solid;border-radius:10px;
margin:0 auto;
padding:0
}

Sekarang perhatikan angka warna merah, dengan memberi angka 80% maka lebar keseluruhan blog saya akan mengikuti ukuran layar sebesar 80%, dimanapun anda membukanya maka blog saya tidak akan melebihi batas monitor.

2. Setelah kita atur outer-wrapper, selanjutnya kita atur lebar main-wrapper. 

Main wrapper adalah bagian untuk mengkonfigurasi ukuran bagian daerah posting blog.

Saya contohkan pengaturan nya seperti ini :

#main-wrapper {
width:65%;
float:left;
word-wrap:break-word;
overflow:hidden;
text-shadow:0 1px 0 #fff;font-family: "Comic Sans MS", cursive;
border-right:0.5px solid #000;border-bottom:0.5px solid #000;
margin:0;
padding:10px
}

Perhatikan angka berwarna merah, jadi maksudnya ukuran lebar main-wrapper anda 65% dari ukuran outer-wrapper.
3. Selanjutnya kita mengatur ukuran sidebar.
Sidebar adalah untuk mengkonfigurasi ukuran yang berisi gadget, dsb. Untuk contohnya anda lihat di bagian blog ini yang sebelah kanan, itulah sidebar
Saya beri contoh pengaturannya seperti ini :

#sidebar-wrapper {
width:28%;
float:right;
word-wrap:break-word;text-align:left;
overflow:hidden;
text-shadow:0 0px 0 #fff;
-khtml-opacity:0.0;border-bottom:0.5px solid #000;border-left:0.5px solid #000;
margin:0;
padding:5px
}

Sekarang perhatikan lagi angka warna merah di atas, jadi ukuran sidebar anda 28% dari lebar outer-wrapper.

Saya kira penjelasan ini sudah cukup bagi anda yang ingin mengatur lebar blognya agar tidak acak-acakan dan menjadi lebih rapih, selanjutnya untuk mengatur lebar header juga gunakan skala persen, jangan menggunakan fx (fixel).

Jika sobat cyber, masih merasa bingung saya bersedia untuk membantunya ^-^. Silahkan ditanyakan saja melalui form komentar.