Cara Meng-Edit Memperlebar Halaman Blog

Cara Meng-Edit Memperlebar Halaman Blog

Bagi sahabat yang suka otak atik template Mungkin artikel ini bisa membantu, agar tampilan blog kita sesuai dengan kemauan kita. Disini saya akan menjelaskan tentang Memperlebar Halaman Blog agar lebih dinamis dan nyaman untuk baca-baca, sebelum meng-edit Template kita saya akan menjelaskan sedikit tentang elemen yang perlu di lebarkan.

1. Body  elemen/area yang ada di paling belekang yang mencakup keseluruhan sebuah template
2. #outer-wrapper elemen ini letaknya di depan body yang berisi elemen-elemen seperti #header, #main, #sidebar-wrapper, dan #footer-Wrapper
3. #header  karena namanya header ya berarti kepala artinya tempat atau areanya ada di atas Template yang berisi Judul blog dan Deskripsi Blog
4. #main elemen yang satu ini isinya tentang artikel yang kita tulis atau post dan kotak komentar
5. #sidebar-wrapper  klo elemen yang satu ini isinya ya widget-widget yang biasa sob pakai seperti buku tamu trus statistik dll.
6. #footer-wrapper elemen ini letaknya ada di paling bawah Template yang berguna untuk meletakkan Widget atau pun yang lain

Cara Memperlebar Halaman Blog,  langkah-langkah nya di bawah ini :

1.  Login ke blogger
2.  Masuk ke Tata Letak  Edit HTML
3.  Sebelum meng-edit Backup dulu Template sahabat dengan cara Download Template Lengkap
4.    Setelah selesai membackup Template cari kode yang akan di lebarkan, saya kasih contoh : #Outer-Wrapper, apabila sahabat menggunakan Mozilla tekan Shift+F3 agar lebih mudah dalam pencarian
5.   Nah setelah ketemu akan ada tampilan kurang lebih seperti di bawah ini

#outer-wrapper {
background:#000;
width:973px;
margin:0 auto;
padding:0;
text-align:left;
border:2px solid #1A1A1A;}

 6.  Nah sobat perhatikan tulisan yang bercetak tebal  merah, tulisan tersebut yang mempengaruhi lebar dari #outer-Wrapper. Apabila sahabat ingin di perlebar tinggal ganti saja angka yang bercetak Tebal dan merah menjadi angka yang lebih tinggi dari semula.
7. kalau kira-kira sudah cukup jangan dimpan dulu takut tidak sesuai keinginan klik Pratinjau
8.  kalau sudah lihat dan sesuaikan dengan kenginan, setelah puas baru Simpan
9.  untuk elemen yang lain yang ingin sahabat perlebar bisa coba sendiri meng edit nya, caranya sama sepertiyang di atas

-------------------------------------------------------------------------------------------------------------
ungkin para sobat yang baru bikin blog merasa template yang di sediakan oleh blogger terlalu sempit atau kurang lebar. Sobat ingin merubah template sobat hingga menjadi lebih lebar? Bagaimana caranya..? Mungkin ada beberapa cara untuk merubah halaman template. Dan saya biasa menggunakan cara sebagai berikut,yang saya anggap paling sederhana.

Dan tidak perlu panjang lebar lagi kita mulai saja caranya.
Yang perlu kita ketahui beberapa bagian dari template yang nantinya kita
bisa ubah ukurannya:

Outer-wreper : Lebar template secara keseluruhan
Main-wrapper: Bagian dimana kita biasa posting artikel
Sedebar-wrapper : biasanya terletak di kanan atau kiri dari main wraper
Header- wrapper: Bagian paling atas dari template
Footer-wrapper : Dasar atau berada paling bawah

Sekarang masuk ke blog sobat, klik tata letak kemudian edit html.Pada edit
html sobat tidak perlu kasih centang pada Expand template widget.
Kemudian cari code sebagai berikut:

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#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 */
}
#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 */

Sobat bisa ganti ukuran pada teks yang berwarna merah. Sobat bisa ganti dengan ukuran berapa saja,biar keliatan rapi sesuaikan ukurannya. Misal :

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

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

Jika lebar outer-wrapper: 950px maka jarak main-wraper dan sedebar-wraper harus di sesuai:

Main-wrapper:500px
Sedebar-wrapper: 400px
Sedang sisanya yang 50px merupakan jarak agar sedebar dan postingan blog tidak berhimpitan.
Setelah itu jangan lupa sesuaikan juga lebar header-wraper dan footer-wraper sama dengan outer-wraper

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

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

Yang perlu di rubah teks yang berwana merah. Jika sudah klik pratinjau atau preview,kalau dirasa sudah cocok baru di save.
Selamat mencoba...!!!