Edit Ukuran Template Blog

Untuk mengatur ukuran  template blog tentu ada beberapa code yang harus andat ketahui, diantaranya adalah code untuk template bagian keseluruhan atau dari beberapa kolom seperti ukuran lebar postingan, sidebar, header dan footer.

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

1. Masuk atau Login ke >> Blogger.com

2. Pilih menu >> Template >> klik Cadangkan / Pulihkan >> Download template lengkap. berguna 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:

• #header-wrapper adalah Kode Header dalam template blog.
• width:1000px; 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 di 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 anda.

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 anda dan ukuran template blog anda.

---------------------------------------------------------------------------------------------------------

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 anda 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 anda 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 = 200pxMail.

Cara edit template blog,

Tunggu posting selanjutnya

Baca juga tulisan menarik lainnya