Mengganti Ukuran Template Blogspot

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 ke blogger anda, selanjutnya masuk "Tata Letak" dan pilih menu "Edit HTML".



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 auto;
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 monitor CPU anda, dan dalam konten blog anda jadi kelihatan longgar.

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