DELAPAN LANGKAH MEMPERLEBAR HALAMAN BLOG

keselarasan antara komponen suatu blog itu sangatlah penting guna menjaga keindahan dari blog / web tersebut. Pada waktu ini saya akan menyutarakan beberapa cara untuk mengatur keselarasan blog/web dalam hal pembagian tempat (luas komponen2 site)
Dari Tutorial yang pernah saya baca mengatur lebar/luas komponen2 site/ blog meliputi delapan langkah.Delapan langkah itu antara lain adalah sebagai berikut ini:

Pertama, ubah width pada kode halaman blog .., misalnya kita tentukan dengan lebar 900 pixel, seperti di bawah ini.

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Kedua, agar jarak antara halaman posting dan side bar tidak terlalu jauh yang dapat menyebabkan tampilan blog kurang rapi/serasi, maka ubah juga width pada kode halaman posting, misalkan 550 pixel, seperti di bawah ini.

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

Ketiga, agar side bar kelihatan serasi dengan lebar halaman posting yang telah disesuakan tersebut maka Anda dapat merubahnya dengan lebar maksimal 350 pixel, yaitu 900 pixel (lebar halaman blog) dikurangi 550 pixel (lebar halaman posting). Namun agar jarak antara halaman posting dan side bar tidak berdempetan, Anda dapat memberi jarak antara 30 pixel sampai dengan 50 pixel sesuai selera masing-masing. Misalkan kita tentukan jaraknya 40 pixel, maka lebar side bar nya menjadi 310 pixel {900 – (550 + 40)} , seperti di bawah ini.

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

Keempat, agar tidak timpang, Anda dapat merubah lebar header blog menjadi 900 pixel, seperti di bawah ini.

#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Kelima, begitu juga dengan footer agar diperoleh lebar footer yang serasi dengan halaman blog, maka Anda dapat merubahnya menjadi 900 pixel, seperti di bawah ini.

#footer {
width:900px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}

Keenam, sebelum menyimpannya, alangkah baiknya Anda melihat tampilan previewnya terlebih dahulu,dengan cara klik pratinjau


Ketujuh, jika sudah yakin, simpan template.

Kedelapan, Selesai dan Tinggal di lihat saja bagai mana hasilnya.

Bagai anda yang belum mencoba dan ingin mencoba silahkan di coba ,pasti kalau berhasil blog anda akan kelihatan lebih luas. Dan semoga berhasil and jangan lupa beri komentar ya!!!!