Rahasia Cara Merubah Lebar Halaman dan Kolom Blog -1: Panduan BloGGeR Modifikasi Blog

Merubah lebar halaman dan kolom blog yang paling mudah akan terasakan ketika desain blog yang kita rubah tanpa menggunakan background image, seperti halnya Template Minima bawaan Blogger atau template-template yang lain dimana background image yang digunakan tidak harus dirubah baik tinggi (height) ataupun lebarnya (width) ketika semua bagian kolom dirubah ukurannya. Meskipun demikian, janganlah mengendorkan semangat kita apabila perubahan desain blog mengharuskan kita juga harus membuat background image yang baru guna disesuaikan dengan perubahan yang kita lakukan. Percayalah bahwa tuntutan dan keharusan membuat background image yang baru tersebut akan semakin meningkatkan pemahaman kita baik terhadap desain sebuah blog maupun pengetahuan kita akan desain gambar/image karena secara otomatis kita akan termotivasi untuk belajar tentang desain background image dengan mempelajari cara membuatnya menggunakan software yang sebelumnya tidak pernah kita sentuh, seperti Adobe Photoshop ataupun software yang lain.

Untuk melangkah lebih jauh pada bagian ini sebaiknya anda baca terlebih dahulu posting sebelum ini (Memperlebar Kolom dan Halaman Blog), atau anda bisa membukanya di sini !. Pada posting tersebut kita bisa belajar tentang dasar merubah kolom blog pada Template Minima yang akan menjadi dasar untuk lebih memahami cara merubah lebar kolom dan lebar halaman blog pada template bawaan blogger yang lain.

Sebelum mencoba melakukan perubahan pada template silahkan untuk mengikuti prosedur di bawah ini :

1. Login ke Blogger.
2. Dasbor (Dasboard).
3. KLIK TataLetak (Layout).
4. KLIK Edit HTML.
5. Amankan template. Lihat caranya di sini !.
6. Untuk mempercepat kerja, cari setiap KODE HTML menggunakan Ctrl+F. Untuk mengetahui lebih lanjut silahkan lihat di sini !.
7. KLIK Simpan Template pada setiap akhir proses (SAVE Template).
8. Lihat hasilnya dengan membuka blog.

I. Template Denim

KODE CSS yang harus di rubah :

#header {
        width: 760px; 
        margin: 0 auto;
        background-color: #336699;
        border: 1px solid #336699;
        color: #ffffff;
        padding: 0;
        font: normal normal 210% Verdana, Arial, Sans-serif;;
}
#content-wrapper {
        width: 760px; 
        margin: 0 auto;
        padding: 0 0 15px;
        text-align: left;
        background-color: #ffffff;
        border: 1px solid #cccccc;
        border-top: 0;
}
#main-wrapper {
        margin-left: 14px;
        width: 464px; 
        float: left;
        background-color: #ffffff;
        display: inline; /* fix for doubling margin in IE */
        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 */
}
#sidebar-wrapper {
        margin-right: 14px;
        width: 240px; 
        float: right;
        background-color: #ffffff;
        display: inline; /* fix for doubling margin in IE */
        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 */
}

Kunci Perubahan :

#header (width) = #content-wrapper (width) = A ,#main-wrapper (width) = B, #sidebar-wrapper (width) = C

A = B + C + 56px

Keterangan : Setiap perubahan pada B atau C atau ke dua-duanya, maka width pada #header dan #content-wrapper anda tinggal menjumlahkan keduanya kemudian ditambah 56px.

II. Template Rounders

KODE CSS yang harus di rubah :

#header-wrapper {      
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper, background orisinil --> W=740px   H=8px  */
        background:#445566 url("http://www2.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
        margin-top:22px;
        margin-right:0;
        margin-bottom:0;
        margin-left:0;
        padding-top:8px;
        padding-right:0;
        padding-bottom:0;
        padding-left:0;
        color:#ffffff;
}
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper yang baru, background orisinil --> W=740px   H=8px  */
#header {
        background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
        padding:0 15px 8px;
}
/* #outer-wrapper (width) = A */

#outer-wrapper {
        width: 740px;
        margin:0 auto;
        text-align:left;
        font: normal normal 100% 'Trebuchet MS',Verdana,Arial,Sans-serif;
}
/* #main-wrap1 (width) = B */
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #main-wrap1 yang baru, background orisinil --> W=485px   H=50px  */
#main-wrap1 {
        width:485px;
        float:left; 
        background:#ffffff url("http://www1.blogblog.com/rounders/corners_main_bot.gif") no-repeat left bottom;
        margin:15px 0 0;
        padding:0 0 10px;
        color:#333333;
        font-size:97%;
        line-height:1.5em;          
        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 */
}
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #main-wrap1 yang baru, background orisinil --> W=485px   H=50px  */
#main-wrap2 {
        float:left;
        width:100%; 
        background:url("http://www1.blogblog.com/rounders/corners_main_top.gif") no-repeat left top;
        padding:10px 0 0;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #main yang baru, background orisinil --> W=485px   H=10px  */
/* #main (width) = C */
#main {
        background:url("http://www.blogblog.com/rounders/rails_main.gif") repeat-y left;
        padding:0;
        width:485px;
}
/* #sidebar-wrap (width) = D */
#sidebar-wrap {
        width:240px;
        float:right;
        margin:15px 0 0;
        font-size:97%;
        line-height:1.5em;
        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 */
}

/* .main .widget (width) = E */

.main .widget {
        margin-top: 4px;
        width: 468px;
        padding: 0 13px;
}

/* .main-blog (width) = F */

.main .Blog {
        margin: 0;
        padding: 0;
        width: 484px;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #sidebar-wrap yang baru, background orisinil --> W=240px   H=8px  */

#sidebartop-wrap {
        background:#ccddcc url("http://www.blogblog.com/rounders/corners_prof_bot.gif") no-repeat left bottom;
        margin:0px 0px 15px;
        padding:0px 0px 10px;
        color:#334455;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #sidebar-wrap yang baru, background orisinil --> W=240px   H=8px  */
#sidebartop-wrap2 {
        background:url("http://www2.blogblog.com/rounders/corners_prof_top.gif") no-repeat left top;
        padding: 10px 0 0;
        margin:0;
        border-width:0;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #sidebar-wrap yang baru, background orisinil --> W=240px   H=30px  */
#sidebarbottom-wrap1 {
        background:#ffffff url("http://www.blogblog.com/rounders/corners_side_top.gif") no-repeat left top;
        margin:0 0 15px;
        padding:10px 0 0;
        color: #333333;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #sidebar-wrap yang baru, background orisinil --> W=240px   H=30px  */
#sidebarbottom-wrap2 {
        background:url("http://www1.blogblog.com/rounders/corners_side_bot.gif") no-repeat left bottom;
        padding:0 0 8px;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper yang baru, background orisinil --> W=740px   H=8px  */
#footer-wrap2 {
        background:#445566 url("http://www2.blogblog.com/rounders/corners_cap_top.gif") no-repeat left top;
        color:#ffffff;
}

/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper yang baru, background orisinil --> W=740px   H=8px  */
#footer {
        background:url("http://www.blogblog.com/rounders/corners_cap_bot.gif") no-repeat left bottom;
        padding:8px 15px;
}

Kunci Perubahan Width (lebar):

1. #outer-wrapper (width) = A
2. #main-wrap1 (width) = B 
3. #main (width) = C
4. #sidebar-wrap (width) = D
5. .main .widget (width) = E
6. .main-blog (width) =  F

A = B + D + 15px, atau A = C + D + 15px

E = B - 17px, atau E = C - 17px

F = B - 1px, atau F = C - 1px

Kunci Perubahan Background Image:

1. Background Image pada syntax #main-wrap1, lebarnya disesuaikan dengan lebar pada syntax #main-wrap1 yang baru (B).
2. Background Image pada syntax #main-wrap2, lebarnya disesuaikan dengan lebar pada syntax #main-wrap1 yang baru (B).
3. Background Image pada syntax #main, lebarnya disesuaikan dengan lebar pada syntax #main yang baru (C).
4. Background Image pada syntax #header-wrapper dan syntax #footer-wrap1 (background sama), lebarnya disesuaikan dengan lebar pada syntax #outer-wrapper yang baru (A).
5. Background Image pada syntax #footer, lebarnya disesuaikan dengan lebar pada syntax #outer-wrapper yang baru (A).

Untuk sementara cukup dua template terlebih dahulu supaya nggak tambah pusing (karena aku juga jadi pusing saat nyusun postingnya ! Habis panjang juga, sih ...).

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 «