Cara Memperlebar Kolom dan Halaman Blog: Panduan BloGGeR Modifikasi Blog

Membuat desain blog sendiri, baik secara total maupun dari hasil meronovasi blog jadi merupakan kebanggaan tersendiri bagi seorang blogger. Banyak hal sebenarnya yang bisa kita lakukan terhadap desain sebuah blog (template), diantaranya dengan melakukan desain ulang pada ukuran (lebar) kolom, bentuk kolom, bentuk font, jenis font, tebal font, warna background dan warna font, background image, maupun variable lain dalam KODE html yang merupakan komponen dasar untuk membangun sebuah template seperti misalnya padding, margin, border dan beberapa yang lain.

Mendesain ulang lebar kolom sebuah blog sangat berguna sebagai langkah awal mengenal lebih dalam bagaimana sebuah blog dibangun. Melalui ini pula seorang blogger dapat melakukan beberapa penyesuaian terhadap lebar sebuah kolom (baik header, main, sidebar, ataupun footer) ketika sesuatu hal yang ingin dimuat terlalu kecil ataupun terlalu besar sehingga ketika dipaksakan mengakibatkan sebuah blog kehilangan harmonisasi ruang.

Sebagai bahan latihan kita akan mencoba melakukan perubahan pada desain template Minima bawaan Blogger yang mempunyai lebar 660px (outer-wrapper=halaman blog) dengan lebar sidebar = 220px dan main = 400px serta header = footer = outer-wrapper= 660px.

Untuk merubah lebar tiap kolom pada template minima sangat simple sekali karena hanya tiga komponen di atas tersebut yang harus di rubah. Dasar pedoman untuk perubahan adalah dengan cara mengambil ukuran lebar halaman blog yang kita inginkan dihubungkan dengan bagian mana yang lebarnya ingin dirubah untuk penyesuaian dengan kebutuhan yang ada. Sebaiknya lebar blog maksimal yang kita gunakan 1024px karena lebar satu halaman layar adalah 1024px (pixel).

Sebagai bahan percobaan kita akan melakukan perubahan pada template Minima dengan asumsi misalnya karena kita butuh sidebar diperlebar hingga 350px untuk memuat sebuah kalendar yang memang harus berukuran segitu untuk dapat tertampilkan secara sempurna.

Bagian yang harus kita rubah hanya pada KODE CSS di syntax :

#sidebar-wrapper{
        width: 220px;
        float: $endSide;
        word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
        overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Rubah lebar (width) sesuai kebutuhan menjadi 350px, sehingga KODE CSS menjadi :

#sidebar-wrapper {
        width:350px;
        float: $endSide;
        word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
        overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

2. Misalnya bagian halaman posting sekaligus kita perlebar menjadi 500px. Untuk hal ini kita harus merubah lebar pada syntax :

#main-wrapper {
        width: 410px;
        float: $startSide;
        word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
        overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Rubah lebar (width) sesuai kebutuhan menjadi 500px, sehingga KODE CSS menjadi :

#main-wrapper {
        width: 500px;
        float: $startSide;
        word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
        overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

3. Perhatikan metode yang kita gunakan sebagai dasar perubahan :
A. Lebar (width) Desain asli template Minima :
- header = outer-wrapper = footer = 660px
- main = 410px
- sidebar = 220px

B. 660px - width(sidebar) - width(main) = x
- Keterangan : tanda (-) = dikurangi.
660px - 220px - 410px = 30px
angka 30px ini digunakan untuk variable seperti margin dan padding dan kita gunakan sebagai komponen nilai penghitung lebar supaya tetap simetris sesuai dengan aslinya.

C. Lebar sidebar baru = 350px, lebar main baru = 500px.
Lebar (width) pada header = lebar outer-wrapper = lebar footer = width baru =
Lebar (width) Sidebar + lebar (width) Main + 30px = width baru2
350px + 500px + 30px = 880px
880px = width baru pada sidebar, main dan outer-wrapper.

4. Setelah angka width baru pada header, outer-wrapper dan footer diketahui, maka bentuk KODE CSS nya menjadi :

A. Header :

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

Catatan : - sebelum perubahan width:660px;

B. Outer Wrapper :

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

Catatan : - sebelum perubahan width:660px;
C. Footer :

#footer {
        width:880px;
        clear:both;
        margin:0 auto;
        padding-top:15px;
        line-height: 1.6em;
        text-transform:uppercase;
        letter-spacing:.1em;
         text-align: center;
}

Catatan : - sebelum perubahan width:660px;

5. Keterangan :

- Sebelum melakukan perubahan pada template lakukan prosedur standar yang harus dilakukan blogger :

1. Login ke Blogger.
2. Dasbor (Dasboard).
3. KLIK Tata Letak.
4. KLIK Edit HTML.
5. Amankan Template. Cara mengamankan template bisa dilihat di sini !.
6. Untuk memudahkan mencari KODE HTML gunakan Ctrl+F (pada keyboard). Kalau belum jelas caranya, anda bisa melihatnya di sini !.
7. Diakhir proses merubah lebar kolom jangan lupa KLIK Simpan Template (SAVE Template).
8. Untuk perubahan Kolom dari template bawaan Blogger yang lain anda bisa melihatnya di Rahasia Merubah Lebar Kolom Template Blogger yang akan kita postingkan secara berkesinambungan.

- Perubahan lebar kolom pada Template Minima merupakan dasar bagi perubahan untuk template bawaan blogger yang lain.

- Mengetahui cara-cara untuk merubah lebar kolom sangat berati bagi blogger saat melakukan banyak lagi perubahan desain yang lain, seperti misalnya menambah kolom baru, membuat 2 buah sidebar baik di satu sisi ataupun di kanan dan kiri, membuat kolom bagi widget baru dan banyak lagi hal menarik yang bisa dilakukan.

- Panduan modifikasi ini didasarkan pada Template Tata letak (Layout Templates)

Selamat berimprovisasi !

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » January, 08, 2012

» Happy Blogging - gubhugreyot «