Tips dan Cara memperlebar halaman blog (Full-Grobog)
Mungkin dari sebagian besar template
default yang disediakan blogger, tidak semuanya memeliki lebar halaman yang
penuh. Rata – rata setiap template masih memiliki ruang untuk dimanfaatkan baik
untuk memperlebar sidebar, ataupun halaman posting. Kali ini saya akan
coba memberikan sedikit gambaran tentang memperlebar halaman blog. Cuma, cara
ini akan lebih pas jika diaplikasikan di template minima, yaitu template
default blogger. Tapi…tidak menutup kemungkinan juga dapat diaplikasikan di
template default blogger yang lainnya. Oke….berikut penjelasannya. Sebelumnya,
saya asumsikan kalo temen2 sudah berada di menu edit html. Dan
ingat…tidak usah memberikan tanda centang pada kolom expand template widget
karena hanya akan membingungkan saja. Sebelumnya, silahkan cari kode css #outer-wrapper. Untuk lebih mudah mencarinya, tekan ctrl+f lalu
ketikkan kode yang di cari. Kalo sudah ketemu, maka akan tampak kode seperti
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 */ }
Penjelasan : #outer-wrapper
--> kode untuk lebar halaman blog. #main-wrapper --> kode untuk
lebar postingan blog #sidebar-wrapper --> kode untuk lebar sidebar
blog. Untuk merubah lebar halaman blog, temen2 tinggal mengganti angka – angka
yang terdapat pada setiap kode css diatas. Semakin besar angkanya, maka halaman
blog pun semakin lebar. Contoh : Misalnya, temen2 ingin mengganti lebar halaman
blog menjadi 950 pixel. Maka silahkan ganti jumlah angka pada tag width
untuk kode css #outer-wrapper menjadi --> 950px; Sehingga hasilnya seperti dibawah ini
:
#outer-wrapper { width: 950px; margin:0 auto; padding:10px;
text-align:$startSide; font: $bodyfont; }
Nah…setelah mengganti kode #outer-wrapper, jangan lupa untuk mengganti kode tag width pada #main-wrapper dan #sidebar-wrapper juga.
Karena jika tidak diganti maka jarak antara halaman posting dan sidebar blog
akan sangat lebar. Untuk mengantisipasinya, rubah juga angka pada tag width #main-wrapper dan #sidebar-wrapper menjadi
500px untuk #main-wrapperdan 400px untuk #sidebar-wrapper.
Sehingga menjadi :
#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 */ }
Untuk merubah lebar kolom pada #main-wrapper dan
#sidebar-wrapper, harus sesuai dengan lebar kolom pada #outer-wrapper.
Misalnya, lebar halaman blog 950px maka jumlah dari lebar postingan dan sidebar
blog harus kurang dari 950px. Hal ini dikarenakan supaya postingan blog dan
sidebar blog tidak berdempetan dan mempunyai jarak antara keduanya. Jarak
antara postingan dan sidebar bisa disesuaikan dari 30px s.d 50px.
Nah…setelah merubah lebar bagian
blog diatas, ada satu bagian lagi yang harus dirubah yaitu bagian bawah blog.
Temen2 tinggal mencari kode #footer-wrapper dan rubah
angka pada tag width-nya menjadi sama dengan lebar halaman blog
(#outer-wrapper). Jika semua bagian telah mengalami perubahan, maka sebelum
nge-save template lebih baik melihat dulu hasil perubahan dengan mengklik pratinjau
/ preview. Jika memang sudah sesuai baru di save. Jika belum temen2 tinggal
klik bersihkan edit / clear edit untuk mengembalikan perubahan2 yang
telah terjadi pada template. Ok….selamat mencoba.