Rahasia Cara Merubah Lebar Halaman dan Kolom Blog -2: Tutorial BloGGeR Modifikasi Blog

Untuk mecoba apa yang kami sampaikan pada posting ini alangkah baiknya anda membuka dulu 2 (dua) posting sebelumnya yang di dalamnya juga terdapat prosedur untuk melakukan perubahan desain blog :

1. "Memperlebar Kolom dan Halaman Blog" yang bisa anda buka dengan KLIK di sini !.

2. "Rahasia Merubah Lebar Halaman dan Kolom Blog bagian pertama" yang terpostingkan di sini !.

III. Template Scribe

KODE CSS yang harus di rubah :

/* width (#outer-wrapper) = A */
#outer-wrapper {
        background-color:#473624;
        border-left:1px solid #332A24;
        border-right:1px solid #332A24;
        width:700px;
        margin:0px auto;
        padding:8px;
        text-align:center;
        font: normal normal 100% Georgia, Times New Roman,Sans-Serif;;
}
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #outer-wrapper baru, background orisinil --> W=700px   H=49px  
width (#main-top) = B */
#main-top {
        width:900px;
        height:49px;
        background:#FFF3DB url("http://www2.blogblog.com/scribe/bg_paper_top.jpg") no-repeat top left;
        margin:0px;
        padding:0px;
        display:block;
}
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #main-bot baru, background orisinil --> W=700px   H=81px  
 width (#main-bot) = C */
#main-bot {
        width:700px;
        height:81px;
        background:#FFF3DB url("http://www.blogblog.com/scribe/bg_paper_bot.jpg") no-repeat top left;
        margin:0;
        padding:0;
        display:block;
}
/* background image di bawah ini harus di rubah dengan membuat background image baru sesuai width pada #wrap2 baru, background orisinil --> W=700px   H=129px  
 width (#wrap2) = D */
#wrap2 {
        width:700px; 
        background:#FFF3DB url("http://www1.blogblog.com/scribe/bg_paper_mid.jpg") repeat-y;
        margin-top: -14px;
        margin-right: 0px;
        margin-bottom: 0px;
        margin-left: 0px;
        text-align:left;
        display:block;
}
/* width (#main) = E */
#main {
        width:480px;
        float:right;
        padding:8px 0;
        margin:0;
        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 */
}
/* width (#sidebar) = F */
#sidebar {
        width:300px;
        float:left;
        padding:8px 0;
        margin:0;
        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 dengan lebar (width) #outer-wrapper baru - 100px, background orisinil --> W=600px   H=3px  
 width (#footer) = #outer-wrapper baru - 100px = G */
#footer {
        clear:both; 
        background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat top left;
        padding-top:10px;
        _padding-top:6px; /* IE Windows target */
}
/* background image di bawah ini harus di rubah dengan membuat background image baru dengan lebar (width) #outer-wrapper baru - 100px, background orisinil --> W=600px   H=3px  
 width (#header) = #outer-wrapper baru - 100px = H */
#header {       
        background:url("http://www.blogblog.com/scribe/divider.gif") no-repeat bottom left;
}

Kunci Perubahan Width (lebar):

1. #outer-wrapper (width) = A
2. #main-top (width) = B 
3. #main-bot (width) = C
4. #wrap2 (width) = D
5. A = B = C = D
6. #main (width) = E
7. #sidebar (width) =  F
8. #footer (width) = #outer-wrapper (width) - 100px = F
7. #header (width) = #outer-wrapper (width) - 100px = G

A = B = C = D = E + F + 20px

G = H = A - 100px

G = H -->  di gunakan sebagai ukuran lebar background image pada  #footer dan #header

Kunci Perubahan Background Image:

1. Background Image pada syntax #outer-wrapper, #main-top, #main-bot dan #wrap2 lebarnya sama. Sesuaikan dengan A, B, C, atau D.
2. Background Image pada syntax #footer dan #header lebarnya = A, B, C atau D dikurangi 100px atau = F dan G.

IV. Template Dots

KODE CSS yang harus di rubah :

/* background image di bawah ini harus di rubah posisi backgrounnya dengan menambahkan besar selisih perubahan yang dilakukan pada width (#main-wrapper) dengan 250px background-position orisinil = 250px 50px background-position baru = Selisih lebar main-wrapper baru ditambah orisinil = ((A) + 250px) 50px
width (#outer-wrapper) = A */
#outer-wrapper {
        background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 250px 50px;
        width:700px;
        margin:0 auto;
        text-align:left;
        font:normal normal 100% Verdana,Arial,Sans-Serif;
}
/* width (#main-wrapper) = B */
#main-wrapper {
        idth: 450px;
        float:right;
        padding:100px 0 20px;
        font-size:85%;
        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 */
}
/* width (#sidebar-wrapper) dan (#sidebar) = C */
#sidebar-wrapper {
        width: 200px;
        float:left;
        font-size:85%;
        padding-bottom:20px;
        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 {
        background:url("http://www2.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
        padding:40px 10px 15px;
        width: 200px;
        width/* */:/**/180px;
        width: /**/180px;
}
/* width (body#layout #sidebar-wrapper, body#layout #sidebar) = D */
body#layout #sidebar-wrapper, body#layout #sidebar {
        padding: 0;
        width: 240px;
}

Kunci Perubahan Width (lebar):

1. #outer-wrapper (width) = A
2. background-position (#outer-wrapper) = penambahan lebar pada #main-wrapper (E) + 250px (terdapat pada tag #outer-wrapper -->
background:url("http://www.blogblog.com/dots_dark/bg_3dots.gif") no-repeat 250px 50px;
E + 250px digunakan untuk mengganti angka 250px. 
3. E (selisih lebar) = width (#main-wrapper_baru) -  width (#main-wrapper_orisinil/lama) =  B_baru - B_orisinil
4. A (width-outer-wrapper) = B (width_main-wrapper) + C (width_sidebar-wrapper) + 50px
5. C = D 

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 «