Memperlebar Halaman Blogspot

Tentunya kita sering terpaku dengan template yang di sediakan oleh bloger bloger manapun, namun apa template tample tersebut bisa membuat kita pusa dengan fasilitas yang di berikan, kali ini saya ingin sedikit memodifikasi halaman blogger menjadi lebih lebar...jika anda pembaca tertarik, silahkan ikuti langkah langkah di bawah ini

1. cari kode #header-wrap dan tambahkan kode ini {margin:0px auto; height:70px; width:1100px} fungsi diatas adalah merubah ukuran header menjadi lebar 1100 dan tinggi header 70 px.
2. lalu perlebar content blog anda suapaya serasi. cari kode #container dan tambahkan kode ini {width:1100px; background: #3A4954; margin:0 auto 20px; padding-bottom:5px; border:1px solid #485865}    keterangan.width untuk memperlebar isi content sesuaikan dengan kebutuhan anda. background untuk latar warna belakang container, margin dan padding adalah untuk mengatur jarak header, contain dan footer
3. perlebar juga footer sesuai kebutuhan anda. 
4. pada intinya anda dituntut untuk bermain logika saat ingin memperlebar blog anda.
5. jadi ketika anda ingin memperlebar blog anda, anda juga harus merubah element element yang berada di blog anda, mulai dari header, contain, footer bahkan element element nya jika masih kurang puas dengan tuturial di atas ada cara lain yang di berikan dari blogger hebat seperti di bawah ini
6. sangat disarankan menggunakan google chrome saat mengedit lebar halaman blog anda, kenapa? karena di google chrome anda dapat melihat element dari blog dengan cara pilih element mana yang ingin kita inspeksi setelah itu klick kanan dan pilin inspection element.

DELAPAN LANGKAH MEMPERLEBAR HALAMAN BLOG


Sekarang saatnya untuk merubah lebar blog, dengan delapan langkah sebagai berikut.




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. 




Ketujuh, jika sudah yakin, simpan template.


Kedelapan, selesai.




Yang ingin mencoba, selamat mencoba ya, semoga sukses!!




Sumber : www.tips-trik-blog.blogspot.com