Home » , , , » Cara Mengatur Ukuran Lebar Template Blog

Cara Mengatur Ukuran Lebar Template Blog

Written By Ku Kupas on Monday, 27 May 2013 | 5/27/2013 08:37:00 pm

KUCOPAS - Cara Mengatur Ukuran Lebar Template Blog. Bagi sobat yang sedang mencari artikel informasi mengenai cara mengatur ukuran lebar template blog atau juga ingin tau bagaimana cara merubah lebar kolom template blog agar sesuai dengan keinginanan sobat, kali ini KUCOPAS akan memberikan trik-triknya secara gamblang agar sobat lebih mudah untuk mengerti.

Ada banyak sekali template blog yang bagus dan sangat menarik bagi sobat, namun kemungkinan sobat tidak menyukai karena salah satunya disebabkan oleh ukuran lebar dari suatu template blog tersebut. Hal ini biasanya sobat kurang cocok pada ukuran lebar kolom template yang meliputi kolom postingan, sidebar, footer, header dan masih banyak lagi.

Dalam mengatur ukuran suatu template blog tentu saja ada beberapa kode yang harus sobat ketahui, diantaranya adalah kode untuk template bagian keseluruhan atau dari beberapa kolom seperti ukuran lebar postingan, sidebar, header dan footer.

Agar sobat bisa lebih dengan mudah untuk mengatur ukuran template blog, sobat bisa mengikuti arahan dari contoh yang akan saya berikan dibawah ini:

1. Silahkan sobat Masuk atau Login ke >> Blogger.com menggunakan akun sobat.
2. Pilih menu >> Template >> klik Cadangkan / Pulihkan >> Download template lengkap. Guna untuk berjaga-jaga, jika ada kesalahan saat edit template.
3. Klik >> Edit HTML
4. Kemudian cari kode-kode berikut yang berwarna Biru, untuk mengatur ukuran lebar kolom dalam template blog. (Tekan CTRL+F untuk mempercepat pencarian kode dalam Edit HTML Template).

1. #header-wrapper adalah kode untuk ukuran lebar header suatu template blog, Header bagian atas meliputi kolom Judul atau nama blog. Biasanya ada dua kolom kanan dan kiri.
Contoh:

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

Keterangan:
  • Warna Biru adalah Kode Header dalam template blog.
  • Warna Merah adalah Ukuran lebar Header dalam template blog.
Catatan:
Bila Header dalam template blog memiliki dua kolom kanan dan kiri, pastikan kedua ukurannya disesuaikan dengan ukuran #header-wrapper diatas.

Contoh Kode Kolom Header Bagian Kiri:

#header{
margin:0;border:0 solid $bordercolor;
color:$pagetitlecolor;
float:left;
width:179px;
overflow:hidden}

Keterangan:
  • #header adalah kode Header sebelah kiri, biasanya kolom untuk tempat Judul blog.
  • float:left; adalah posisi kolom berada dibagian kiri.
  • width:179px; adalah ukuran lebar kolom. Ganti nilainya agar sesuai dengan keinginan sobat dan ukuran template blog sobat.
Contoh Kode Kolom Header Bagian Kanan:

#header2{
float:right;
width:728px;
margin-right:0px;
padding-right:0px;
overflow:hidden}

Keterangan:
  • #header2 adalah kode Header sebelah kanan, biasanya kolom untuk tempat iklan atau sponsor blog.
  • float:right; adalah posisi kolom berada dibagian kanan.
  • width:728px; adalah ukuran lebar kolom. Ganti nilainya agar sesuai dengan keinginan sobat dan ukuran template blog sobat.

2. #outer-wrapper adalah kode bagian untuk semua ukuran lebar suatu template blog, biasanya memiliki ukuran yang sama dengan ukuran pada #header-wrapper diatas. Karena ukuran #outer-wrapper didalamnya biasanya berisi ukuran #main-wrapper (Kolom postingan), #sidebar-wrapper (Kolom Sidebar).

Contoh Kode:

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

Keterangan:
  • #outer-wrapper adalah Kode untuk mengatur keseluruhan lebar template blog.
  • width: 1000px; adalah ukuran lebar keseluruhan template blog, ganti nilainya sesuai dengan ukuran template blog yang sobat inginkan.

3. #main-wrapper adalah kode template bagian kolom postingan blog. Sobat bisa mengatur ukuran lebarnya sesuai dengan keinginan sobat, namun sesuaikan dengan ukuran #outer-wrapper yang dibagi untuk kolom postingan dan juga sidebar.

Contoh Kode:

#main-wrapper {
width: 655px;
margin-left: 20px;
margin-right: 20px;
float: left;
}

Keterangan:
  • #main-wrapper adalah Kode bagian Postingan dalam template blog.
  • width: 655px; adalah ukuran lebar kolom postingan blog, Ganti dan tentukan nilainya sesuai dengan keinginan sobat.
  • float: left; adalah letak posisi kolom postingan blog berada dibagian kiri dalam template blog.

4. #sidebar-wrapper adalah kode bagian Sidebar dalam template blog, yang biasanya dalam kolom di isi dengan widget-widget yang diterapkan. Sidebar bisa berada dibagian posisi kanan dan kiri atau salah satunya.

Contoh Kode:

#sidebar-wrapper {
width: 310px;
float: right;
}

Keterangan:
  • #sidebar-wrapper adalah kode bagian Sidebar dalam template blog.
  • width: 310px; adalah ukuran lebar kolom sidebar blog, Ganti dan tentukan nilainya sesuai dengan keinginan sobat.
  • float: right; adalah letak posisi kolom sidebar blog berada dibagian kanan dalam template blog.

Catatan:
Bila dalam template blog sobat memiliki dua sidebar yang berada dibagian kanan dan kiri, maka penentuan ukuran lebar yang meliputi kolom postingan, sidebar kanan dan kiri harus sesuai dengan ukuran lebar #outer-wrapper yang dibagi menjadi tiga kolom.

Contoh membagi ukuran kolom dalam template agar tepat dan sesuai dengan ukuran #outer-wrapper.

#outer-wrapper = 1000px
#main-wrapper = 450px
#sidebar-wrapper = 300px
#newsidebar-wrapper = 200px

Berikut contoh gambar screenshot dalam kolom Tata Letak template blog KUCOPAS.

Mengatur Ukuran Kolom Template Blog

Demikian trik tutorial Cara Mengatur Ukuran Template Blog yang dapat KUCOPAS share untuk sobat semua, bila ada kekurangan mohon diberitahukan karena trik ini untuk para blogger pemula. Bila ada pertanyaan mengenai tutorial ini, silahkan sobat bertanya dalam kotak komentar yang tersedia.
thumbnail Title: Cara Mengatur Ukuran Lebar Template Blog
Posted by:Ku Kupas
Published :2013-05-27T20:37:00+07:00
Rating: 4.5
Reviewer: 7 Reviews
Cara Mengatur Ukuran Lebar Template Blog

Artikel Terkait:

Comments
10 Comments

10 comments:

  1. mantep nih gan ane bisa liat berapa ukuran blog ane :D

    ReplyDelete
  2. kalau ngukur bangunan sama tanah sama siapa yang sob.? hmmmm www.nagichat.com

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. mantabb gan, kebetulan saya juga sudah sering pake trik kayak gitu. buat sidebar dan dipaskan dengan widget2nya.

    ReplyDelete
  6. kerennn gan...
    mkazi...
    mnfaat bgt.. :-)

    ReplyDelete
  7. Gan, lebarnya emang berhasil tapi semua widget yang ada di samping ilang semua gan, pas diganti lagi ukurannya seperti semula muncul lagi widget2nya

    ReplyDelete
  8. langsung diterapkan dan langsung bisa...alhamdulillah...makasih ya :)

    ReplyDelete

 
Support : Google | Yahoo | Bing
Copyright © 2011-2013. KUCOPAS - All Rights Reserved
Sitemap | About Me | Contact Us | Privacy Policy
Proudly powered by Blogger