Cara Mengatur Lebar Template Blog Dengan Mudah

Cara Mengatur Lebar Template Blog Dengan Mudah - 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 saya akan coba memberikan trik-triknya secara gamblang agar sobat lebih mudah untuk memahami.

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. 
5. Warna Merah adalah Ukuran lebar Header 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

Demikian trik tutorial Cara Mengatur Ukuran Template Blog yang dapat saya 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.

Share this post