Cara Memperlebar Halaman Template Pada Blogspot | Blogspot | Cara Memperlebar Halaman Template Pada Blogspot. Kali ini saya akan membahas bagaimana cara memperlebar halaman pada template blog anda, setelah sebelumnya membahas cara menambah kolom di sidebar. Bagi anda yang merasa halaman pada blog terlalu sempit ikutilah postingan ini sampai akhir dijamin anda akan halaman blog anda akan lebar sesuai keinginan anda.
Langsung saja, anda hanya mengikuti intruksi yang saya berikan. Sebelumnya anda harus mengetahui bagian-bagian template yang akan anda tubah lebarnya.
Outer-wreper : Keseluruhan lebar template
Main-wrapper : Bagian pada postingan artikel anda
Sedebar-wrapper : Terletak di sebelah main wrapper
Header- wrapper : Bagian paling atas dari template
Footer-wrapper : Dasar atau berada paling bawah
Masuk pada Edit HTML, jangan centang Expand template widget. Kemudian Cari Kode atau kode yang mirip di bawah ini.
#outer-wrapper {
width: 560px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 310px;
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: 120px;
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: 560px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 310px;
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: 120px;
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 */
Anda bisa ganti ukuran pada teks yang berwarna merah. Anda bisa ganti dengan ukuran berapa saja, agar kelihatan rapi sesuaikan ukurannya. Contoh :
#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 */
Jika lebar outer-wrapper: 950px maka jarak main-wraper dan sedebar-wraper harus disesuaikan.
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;
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;
Ingat yang perlu dirubah adalah huruf yang berwarna merah. Save kalo sudah cocok.
Semoga bermanfaat.............
0 komentar:
Posting Komentar