Home
tips

Cara Mengatur Ukuran Lebar Template di Blog


Dari sekian banyak Template yang dibuat khusus untuk Blogger, mungkin ada beberapa template yang kita sukai. Namun kemungkinan banyak yang mengeluh karena salah satunya disebabkan oleh ukuran lebar dari template blog tersebut. Kadang ukuran serta penempatan kolom dirasa kurang sesuai dan cocok untuk dijadikan template pilihan.
 Cara Mengatur Ukuran Lebar Template di Blog
Perlu diketahui bahwa kendala tersebut sebenarnya bisa diselesaikan jika kita bisa 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 ketika seorang blogger menemukan kasus seperti ini. Karena itu saya akan mengajak siapa saja yang belum paham benar tentang elemen-elemen penting di dalam template yang pengaturannya harus berhadapan dengan kode-kode HTML yang cukup rumit.

Berikut ini adalah contoh gambaran mengenai elemen kode HTML di dalam sebuah template. Yang saya akan jelaskan di bawah ini adalah satu dari beberapa template umum yang biasa dipakai:

  1. Mempelajari elemen Header (halaman template paling atas):
    2. #header-wrapper adalah kode ukuran lebar header template, Header bagian 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 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 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 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 ukuran template blog.
  2. Mempelajari elemen Outer (bagian template yang mencakup seluruh ukuran halaman):
    3. #outer-wrapper adalah kode semua bagian ukuran lebar sebuah 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 agar sesuai dengan ukuran template blog.
  3. Mempelajari elemen Main (bagian template tempat memposting artikel):
    4. #main-wrapper adalah kode bagian kolom postingan blog. Kita bisa 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 adalah Kode bagian Postingan dalam template blog.
    • width: 655px; adalah ukuran lebar kolom postingan blog, Ganti nilainya agar sesuai dengan ukuran template blog.
    • float: left; adalah letak posisi kolom postingan blog berada dibagian kiri dalam template blog.
  4. Mempelajari elemen Sidebar (bagian sisi template):
    5. #sidebar-wrapper adalah kode bagian sisi/ pinggir dalam template blog, biasanya di kolom yang satu ini diisi dengan widget-widget tertentu. 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 nilainya agar sesuai dengan ukuran template blog.
    • float: right; adalah letak posisi kolom sidebar blog berada dibagian kanan dalam template blog.

    Catatan:
    Bila dalam template 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 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 tentang Cara Mengatur Ukuran Lebar Template di Blog. Semoga bermanfaat dan mudah dipahami. Jika mencari artikel lain yang serupa, silahkan cek di bawah ini: