Cara Merubah Lebar Dan Luas Template

Disini saya ingin memberikan Tutorial Cara Merubah Lebar Template, Lebar template blog asli itu sendiri hanya '660px' sampai '960px',jika anda merasa kurang puas dengan lebar bawaan ini bisa menambah lebar sesuai dengan keinginan kita.

Jika lebar template mencukupi akan memberikan keleluasaan bagi kita untuk menambah berbagai elemen tambahan agar blog yang kita buat lebih menarik.

Bagaimana,sudah siap mengacak-acak template.?
Sebaiknya backup dulu template lengkap anda untuk jaga-jaga jika terjadi hal-hal yang tidak diiginkan.
Silahkan klik Download Lengkap Template untuk backup blog anda..!

Sekarang mari kita ubah lebar template kita dengan langkah-langkah sbb :
Sebagai catatan : tiap template memiliki ciri yang berbeda-beda,maka jika kode idak ditemukan,maka cari kode yang mirip.

1.Masuk Blogger dengan ID anda
2.Klik Tata Letak
3.Klik Edit HTML
4.Cari Kode seperti di bawah :

::: Untuk mengedit ukuran Header Blog :::

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Ganti angka 660 dengan lebar yang diinginkan,misalnya : 860
Sehingga menjadi :

#header-wrapper {
width:860px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

::: Untuk mengedit ukuran Halaman Blog :::

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

Ganti angka 660 dengan lebar yang diinginkan,misalnya : 860
Sehingga menjadi :

#outer-wrapper {
width: 860px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

::: Untuk mengedit ukuran Halaman Posting :::

#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 */
}

Ganti angka 410 dengan lebar yang diinginkan,misalnya : 510
Sehingga menjadi :

#main-wrapper {
width: 510px;
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 */
}

::: Untuk mengedit ukuran Sidebar Blog :::

#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 */
}

Ganti angka 220 dengan lebar yang diinginkan,misalnya : 320
Sehingga menjadi :

#sidebar-wrapper {
width: 320px;
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 */
}

::: Untuk mengedit ukuran Footer Blog :::

#footer {
  width:660px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Ganti angka 660 dengan lebar yang diinginkan,misalnya : 860
Sehingga menjadi :

#footer {
  width:860px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

7.Simpan Template.

Coba klik Lihat Blog untuk melihat hasilnya.!

Sudah cukup lebar atau masih kurang ? Silahkan ganti angka sesuai keinginan anda !

Jangan lupa tinggalkan komentar anda...........!!!

Share this history on :

Tweet

Title : Cara Merubah Lebar Dan Luas Template
URL : http://blogcunayz.blogspot.com/2011/07/cara-merubah-lebar-dan-luas-template.html
Anda boleh menyebar Luaskan atau Meng Copy-Paste Artikel ini bila dapat bermanfaat bagi teman-teman anda, Namun jangan lupa untuk meletakkan Link Cara Merubah Lebar Dan Luas Template sebagai Sumbernya.