Cara Memperlebar Halaman Template
Mungkin kamu yang baru bikin blog merasa template yang di sediakan
oleh blogger terlalu sempit atau kurang lebar. Kamu ingin merubah
template kamu menjadi lebih lebar ? Bagaimana caranya..?
Ada satu cara, yang saya anggap paling sederhana. Yang perlu kita ketahui beberapa bagian dari template yang nantinya kita bisa ubah ukurannya Sbb :
Outer-wreper : Lebar template secara keseluruhan
Main-wrapper : Bagian dimana kita biasa posting artikel
Sedebar-wrapper : biasanya terletak di kanan atau kiri dari main wrapper
Header- wrapper : Bagian paling atas dari template
Footer-wrapper : Dasar atau berada paling bawah
Sekarang masuk ke blog kamu, klik Tata Letak kemudian Edit html. Pada edit html, kamu tidak perlu mencentang 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 */
Kamu juga bisa ganti ukuran pada teks yang berwarna merah. Kamu bisa ganti dengan ukuran berapa saja, biar keliatan rapi sesuaikan ukurannya. Misalnya :
#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 sidebar-wraper harus di sesuaikan :
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 adalah teks yang berwana merah. Jika sudah klik pratinjau atau preview, kalau dirasa sudah cocok baru di save.
Ada satu cara, yang saya anggap paling sederhana. Yang perlu kita ketahui beberapa bagian dari template yang nantinya kita bisa ubah ukurannya Sbb :
Outer-wreper : Lebar template secara keseluruhan
Main-wrapper : Bagian dimana kita biasa posting artikel
Sedebar-wrapper : biasanya terletak di kanan atau kiri dari main wrapper
Header- wrapper : Bagian paling atas dari template
Footer-wrapper : Dasar atau berada paling bawah
Sekarang masuk ke blog kamu, klik Tata Letak kemudian Edit html. Pada edit html, kamu tidak perlu mencentang 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 */
Kamu juga bisa ganti ukuran pada teks yang berwarna merah. Kamu bisa ganti dengan ukuran berapa saja, biar keliatan rapi sesuaikan ukurannya. Misalnya :
#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 sidebar-wraper harus di sesuaikan :
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 adalah teks yang berwana merah. Jika sudah klik pratinjau atau preview, kalau dirasa sudah cocok baru di save.
Komentar
Posting Komentar