Cara memperlebar halaman blog – Tentunya
apabila kita mendownload template dari blogspot atau template default, kebanyakan
lebar halaman pada template tersebut tidak maksimal / menyisisahkan ruang,
padahan ruang tersebut dapat dimanfaatkan untuk memperlebar halman posting
maupun sidebar.Pada postingan kali ini ozy akan memberikan sedikit tips untukmemperlebar
halaman blog tersebut.
Klik pada dashboard / layout / edit HTML.
Hilangkan centang pada expand template widget. Lalu cari kode #outer-wrapper . Agar
memudahkan pencarian tekan ctrl+f lalu ketikan kode tersebut.
Kalau sudah ketemu akan nampak dibawahnya kode seperti dibawah ini.
#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 */
}
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 */
}
Keterangan :
#outer-wrapper –> kode untuk lebar halaman blog.
#main-wrapper –> kode untuk lebar postingan blog
#sidebar-wrapper –> kode untuk lebar sidebar blog.
Jadi apabila kita ingin memperlebar halaman blog kita
tinggal mengganti besaran angka pada width (pada warna merah
diatas) didalam code css #outer-wrapper , begitu juga apabila kita ingin memperlebar
postingan dan sidebar blog, tmn2 tinggal mengganti besaran angkanya pada width di
dalam code css #main-wrapper dan #sidebar-wrapper . Nech saya berikan saran
besaran angka pada width yang dari pengalaman hasilnya lebar blognya
seimbang…Tapi kalau tmn2 pngn yang lainnya juga ngga apa2..
Ingat :
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.
Setealah dirubah besarnya seperti di bawah ini :
#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 */
}
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 */
}
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 semuanya udah dilakukan, maka sebelum nge-save
sebaiknya melihat dulu hasil perubahannya dengan mengklik view /
pratinjau. Kalau memang udah cocok tmn2 tinggal save dech. Untuk
mengembalikan seperti awalnya, tmn2 tinggal klik bersihkan edit / clear
edit.
Kalau ada yang ditanyakan or kurang jelas, silahkan teman2
tinggalkan komentar aja, pasti Saya bantu semaksimal mgkn.
SELAMAT MENCOBA ……. !!!!!

0 komentar:
Posting Komentar