Disini akan sedikit saya jelaskan bagaimana menambah ukuran atau lebar template baru blogspot , mungkin sudah banyak yang sudah posting tutorial seperti ini, mungkin aja pembaca yang kebetulan mampir diblog ini tertarik unuk membaca artikel ini.
Langsung aja sebelum anda mengobrak-abrik template, seperti biasa anda harus login dulu keblogger anda, selanjutnya masuk "Tata Letak" dan pilih menu "Edit HTML".
Langsung aja sebelum anda mengobrak-abrik template, seperti biasa anda harus login dulu ke
Sebelumnya mungkin untuk jaga-jaga simpan template anda, kemudian anda bisa mulai merubah ukuran lebar keseluruhan dari template anda dengan mencari script seperti dibawah
#header {
width: 760px;
margin: 0
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}
Ganti ukuran widht pada script tersebut dengan ukuran yang anda kehendaki misalnya 1000px, maka scriptnya menjadi sebagai berikut :
#header {
width: 1000px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}
Selain itu juga cari script dibawah
#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
Dan ganti ukuran width dari 760px menjadi 1000px.
Ukuran diatas jika dilihat hasilnya memenuhi semua lebar
Agar tidak kelihatan loggar selanjutnya anda harus juga menganti ukuran main-wrapper dan sidebar-wripper. Cari script dibawah
#main-wrapper {
margin-$startSide: 10px;
width: 470px;
float: $startSide;
background-color: $mainBgColor;
display: inline;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
margin-$endSide: 10px;
width: 270px;
float: $endSide;
background-color: $mainBgColor;
display: inline;
word-wrap: break-word;
overflow: hidden;
}
Sesuaikan ukuran lebar masing-masing lebar wrapper dengan ukuran content-wrapper, jika kita tadi membiri content wrapper menjadi 1000px, maka ukuran masing-masing content jika dijumlah akan sama dengan ukuran content wrapper dikurangi margin, misalnya main-wrapper kita ganti menjadi 690 dan sidebar-wrapper menjadi 290, sehingga menjadi seperti dibawah:
#main-wrapper {
margin-$startSide: 10px; //margin kanan
width: 690px; //ukuran konten main wrapper
float: $startSide;
background-color: $mainBgColor;
display: inline;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
margin-$endSide: 10px; //margin kiri
width:290px; //ukuran konten main wrapper
float: $endSide;
background-color: $mainBgColor;
display: inline;
word-wrap: break-word;
overflow: hidden;
}
Kemudian save dan silahkan lihat hasilnya. Semoga bermanfaat
Tidak ada komentar:
Posting Komentar