Cara Mengatur Ukuran Lebar Template Di Blog

Dari sekian banyak Template yang dibentuk khusus untuk Blogger, mungkin ada beberapa template yang kita sukai. Namun kemungkinan banyak yang mengeluh lantaran salah satunya disebabkan oleh ukuran lebar dari template blog tersebut. Kadang ukuran serta penempatan kolom dirasa kurang sesuai dan cocok untuk dijadikan template pilihan.

 

Perlu diketahui bahwa hambatan tersebut sebetulnya sanggup diselesaikan bila kita sanggup mengatur ukuran halaman dan beberapa kolom di dalam templatenya. Entah itu mengatur ukuran lebar halaman postingan, sidebar, header, maupun footer. Karena masih saja ada yang kebingungan dikala seorang blogger menemukan kasus menyerupai ini. Karena itu saya akan mengajak siapa saja yang belum paham benar wacana elemen-elemen penting di dalam template yang pengaturannya harus berhadapan dengan kode-kode HTML yang cukup rumit.

Berikut ini yaitu rujukan citra mengenai elemen isyarat HTML di dalam sebuah template. Yang saya akan jelaskan di bawah ini yaitu satu dari beberapa template umum yang biasa dipakai:

1. Mempelajari elemen Header (halaman template paling atas):
#header-wrapper yaitu isyarat ukuran lebar header template, Header penggalan atas meliputi kolom Judul atau nama blog. Biasanya ada dua kolom kanan dan kiri. Jika di template Anda tidak terdapat 2 kolom header, silahkan baca dulu artikel tentang: Cara Membuat Header Menjadi 2 Kolom dan Cara Membagi header menjadi 2 kolom (2)
Contoh:
----------------------------------------
#header-wrapper {
width:1000px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
----------------------------------------
Keterangan:


• Warna Biru yaitu Kode Header dalam template blog.
• Warna Merah yaitu Ukuran lebar Header dalam template blog.


Catatan:
Bila Header dalam template blog mempunyai dua kolom kanan dan kiri, pastikan kedua ukurannya diadaptasi 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 yaitu isyarat Header sebelah kiri, biasanya kolom untuk kawasan Judul blog.
• float:left; yaitu posisi kolom berada dibagian kiri.
• width:179px; yaitu ukuran lebar kolom. Ganti nilainya sesuai dengan ukuran template blog yang diinginkan.


Contoh Kode Kolom Header Bagian Kanan:
------------------------------
#header2{
float:right;
width:728px;
margin-right:0px;
padding-right:0px;
overflow:hidden}
-------------------------------
Keterangan:


• #header2 yaitu isyarat Header sebelah kanan, biasanya kolom untuk kawasan iklan atau sponsor blog.
• float:right; yaitu posisi kolom berada dibagian kanan.
• width:728px; yaitu ukuran lebar kolom. Ganti nilainya supaya sesuai dengan ukuran template blog.

2. Mempelajari elemen Outer (bagian template yang meliputi seluruh ukuran halaman):
#outer-wrapper yaitu isyarat semua penggalan ukuran lebar sebuah template blog, biasanya mempunyai 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 yaitu Kode untuk mengatur keseluruhan lebar template blog.
• width: 1000px; yaitu ukuran lebar keseluruhan template blog, Ganti nilainya supaya sesuai dengan ukuran template blog.

3. Mempelajari elemen Main (bagian template kawasan memposting artikel):
#main-wrapper yaitu isyarat penggalan kolom postingan blog. Kita sanggup mengatur ukuran lebarnya sesuai keinginan, 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 yaitu Kode penggalan Postingan dalam template blog.
• width: 655px; yaitu ukuran lebar kolom postingan blog, Ganti nilainya supaya sesuai dengan ukuran template blog.
• float: left; yaitu letak posisi kolom postingan blog berada dibagian kiri dalam template blog.

4. Mempelajari elemen Sidebar (bagian sisi template):
#sidebar-wrapper yaitu isyarat penggalan sisi/ pinggir dalam template blog, biasanya di kolom yang satu ini diisi dengan widget-widget tertentu. Sidebar sanggup berada dibagian posisi kanan dan kiri atau salah satunya.

Contoh Kode:

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

Keterangan:


• #sidebar-wrapper yaitu isyarat penggalan Sidebar dalam template blog.
• width: 310px; yaitu ukuran lebar kolom sidebar blog, Ganti nilainya supaya sesuai dengan ukuran template blog.
• float: right; yaitu letak posisi kolom sidebar blog berada dibagian kanan dalam template blog.


Catatan:
Bila dalam template mempunyai 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 cara membagi ukuran kolom dalam template sesuai dengan ukuran #outer-wrapper:

-----------------------------------
#outer-wrapper = 1000px
#main-wrapper = 450px
#sidebar-wrapper = 300px
#sidebarbaru-wrapper = 200px
-----------------------------------
Itulah sekilas pemahaman saya wacana Cara Mengatur Ukuran Lebar Template di Blog. Semoga bermanfaat dan gampang dipahami. Jika mencari artikel lain yang serupa, silahkan cek di bawah ini:

Berbagi :

Anda mungkin menyukai postingan ini :

• 
  Cara Menghapus Attribution Di Blog
• 
  Cara Menghapus Navbar Blog Bawaan Blogger
• 
  Cara Merubah Template 2 Kolom Menjadi 3 Kolom
• 
  Cara Merubah Template 2 Kolom Menjadi 3 Kolom (2)