share all free for you

Advertiser Here

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...........!!!

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.

Sudah ada [ 5 komentar ] bagaimana pendapat Anda,,?

  1. mantep tutornya,
    blog juga keren :)

    ReplyDelete
  2. thank gan sudah berkunjung...

    ReplyDelete
  3. lebih mantep lagi kalo , pake % jadi responsive

    ReplyDelete
  4. @ Mbah Qopet : bener juga sob,kadang ane juga pake % kalo males ngukur wkwkwk =))

    ReplyDelete
  5. Thnks gan Ilmunya, Moga sukses slalu...

    ReplyDelete

Untuk menyisipkan kode,gunakan tag
[code]KODE ANDA[/code]
Untuk menyisipkan quote,gunakan tag
[blockquote]KATA-KATA ANDA[/blockquote]
Untuk menyisipkan gambar,gunakan tag
[img]URL GAMBAR ANDA[/img]
Untuk menyisipkan video,gunakan tag
[youtube]URL VIDEO ANDA[/youtube]
Anda juga bisa menggunakan emoticon seperti biasa.

Pasang Iklan Anda Disini

 
Copyright © 2011 Blogcunayz Template Design By Rizky Wardiansyah