Mengubah lebar template blog

Mungkin ada diantara teman-teman yang menggunakan template default dari blogger. Umumnya template tersebut mempunyai tampilan yang kurang lebar. Berikut ini adalah cara ubah lebar template blog (dalam contoh ini saya menggunakan template : Denim). Mungkin jika menggunakan template lain source templatenya agak berbeda.

Untuk mengubah lebar tampilan blog, prosedur yang anda lakukan adalah:

1. masuk ke dashboard -> Tata letak -> Edit Html
Centang " Expand widget Templates"
(Catatan: sebelum mengubah kode berikut, lakukan backup template agar jika gagal anda bisa mengembalikan ke kondisi template awal)


2. Cari kode berikut:

a. mengubah lebar header
(pada bagian width : ubah menjadi 880px)

#header {
width: 880px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;

b. mengubah lebar bagian konten (content)
(pada bagian with : ubah menjadi 880px)

#content-wrapper {
width: 880px;
margin: 0 auto;
padding: 0 0 15px;
text-align: $startSide;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;

c. Mengubah lebar ruang postingan
Pada bagian width ubah menjadi 550px

#main-wrapper {
margin-$startSide: 14px;
width: 550px;
float: $startSide;
background-color: $mainBgColor;
display: inline;

d. Mengubah lebar sidebar
Ubah ukuran width menjadi 280px

#sidebar-wrapper {
margin-$endSide: 14px;
width: 280px;
float: $endSide;
background-color: $mainBgColor;
display: inline;

Setelah kode di atas selesai di edit, klik tombol Simpan Template
Jika sudah tersimpan bisa lihat perubahannya pada blog anda.
Contoh blog yang saya jadikan uji coba bisa dilihat hasilnya (klik link di bawah ini):
1. Dummy
2. Kalongkalong

Anda bisa berkreasi mengubah lebar blog anda sesuai keinginan, dengan catatan:
1. Lebar header harus sama dengan lebar konten (content)
2. Lebar ruang postingan ditambah lebar sidebar harus lebih kecil dari lebar header.

Contoh template bawaan blogger yang telah saya ubah lebarnya bisa dilihat di blog mycomputer dummy

Artikel Terkait :