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 q akan memberikan sedikit tips untuk memperlebar 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 q 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 awanya, tmn2 tinggal klik bersihkan edit / clear edit.
Kalau ada yang ditanyakan or kurang jelas, silahkan teman2 tinggalkan komentar aja, pasti q bantu semaksimal mgkn. Atau tmn2 langsung tanya via GTalk di mai.octkh@gmail.com
SELAMAT MENCOBA ……. !!!!!
1 Komentar
baguzzz broo...... sharing each......
BalasHapusSilahkan coment dibawah ini, kalo bisa kritik dan sarannya juga yah..