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

Panduan dan dan tutorial untuk melakukan modifikasi template ini berdasarkan template lama blogger. Bagi yang berniat belajar pasti akan sangat bermanfaat. Belajar dengan template lama lebih mempermudah dan mempercepat blogger dalam memahami desain blog dibandingkan template blogger baru yang sekarang ini ada. Untuk mendapatkan template blogger lama silahkan buat blog latihan dan gunakan template lama blogger dengan cara memilih Pilih Template Tata Letak yang tersedia di Dasbor pada bagian terbawah halaman. Sebelum tutorial ini telah terposting bagian-1 dan bag-2 oleh karena itu sebaiknya buka dulu 2 (dua) posting sebelumnya.

1. Cara Memperlebar Kolom dan Halaman Blog.
2. Rahasia Merubah Lebar Halaman dan Kolom Blog bagian-1
3. Rahasia Merubah Lebar Halaman dan Kolom Blog bagian-2

Template 897

KODE CSS yang harus di rubah :

#outer-wrapper {
       position:relative;
       top:4px;
       left:4px;
       background: #999;
       width:744px; /* width = A */  
       margin:10px auto;
       text-align:left;
       font: normal normal 100% Verdana, Sans-serif;
}
#main-wrapper {    /* background main  = bg_main  */
       background:#214552 url("http://www.blogblog.com/no897/corner_main_left.gif") no-repeat right top;
       width:460px; /* width = B */  
       float:left;
       color:#ffffff;
       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*/
}
#sidebar-wrapper {     /* background main bagian kiri = bg_Sbar  */ 
       background:#cedfbd url("http://www2.blogblog.com/no897/corner_sidebar_left.gif") no-repeat left top;
       width:254px; /* width = C */  
       float:right;
       padding:0;
       color: #335566;
       font-size: 83%;
       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 KODE CSS :

1. width pada syntax #outer-wrapper = A
2. width pada syntax #main-wrapper = B
3. width pada syntax #sidebar-wrapper = C

A = B + C + 30px

Template Thisaway

KODE CSS yang harus di rubah :

body {
       margin: 0;
       text-align: center;
       min-width: 760px; /* min-width (body) = minWbody */ 
       background: #ce8b43 url(http://www.blogblog.com/thisaway/bg_body.gif) repeat-x left top;
       color: #634320;
       font-size: small;
}
#outer-wrapper {
       margin: 0 auto;
        width: 760px; /* width (#outer-wrapper) = A */ 
       text-align: left;
       font: normal normal 100% Helvetica,Arial,Verdana,'Trebuchet MS', Sans-serif;
}
#header-wrapper {
       padding-bottom:15px; /*background Header bag bawah = bgHbot -->dimensi orisinil W=760px, H=15px */ 
       background: url(http://www.blogblog.com/thisaway/bg_header_bottom.gif) no-repeat left bottom;
}
#header {  /* background Header = bgH   --> dimensi orisinil = W=760px, H=88px */  
       background: #634320 url(http://www.blogblog.com/thisaway/bg_header.gif) repeat-x left bottom;
}
#content-wrapper { /* background #conten-wrapper = bgCW  --> dimensi orisinil = W=760px, H=5px */ 
       position: relative;
       width: 760px;
       background: #f7f0e9 url(http://www.blogblog.com/thisaway/bg_main_wrapper.gif) repeat-y left top;
}
#main-wrapper {
       display: inline; /* fixes a strange ie margin bug */
       float: left;
       margin-top: 0;
       margin-right: 0;
       margin-bottom: 0;
       margin-left: 3px;
       padding: 0;
       width: 483px; /* width (#main-wrapper) = B */ 
       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 {
       display: inline; /* fixes a strange ie margin bug */
       float: right;
       margin-top: 0;
       margin-right: 3px;
       margin-bottom: 0;
       margin-left: 0;
       width: 269px; /* width (#sidebar-wrapper) = C */ 
       color: #634320;
       line-height: 1.4em;
       font-size: 90%;
       background: url(http://www.blogblog.com/thisaway/bg_sidebar.gif) repeat-x left top;
       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 {
       padding-top: 7px;
       padding-right: 11px;
       padding-bottom: 0;
       padding-left: 14px;/* posisi background = PB ---> 179 */     
       background: url(http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif) repeat-y 179px 0;
}

Kunci Perubahan KODE CSS :

1. min-width pada syntax body = minWbody
2. width pada syntax #outer-wrapper = A
3. width pada syntax #main-wrapper = B
4. width pada syntax #sidebar-wrapper = C

minWbody = A = B + C + 8px

Kunci Perubahan Background Image :

1. #header-wrapper :
- background image : http://www.blogblog.com/thisaway/bg_header_bottom.gif.
- dimensi (orisinil): Height = 15px, Width = 760px
- Perubahan : perbesar lebar background image sesuai width pada #outer-wrapper (A).

2. #header :
- background image : http://www.blogblog.com/thisaway/bg_header.gif
- dimensi (orisinil): Height = 88px, Width = 760px
- Perubahan : perbesar lebar background image sesuai width pada #outer-wrapper (A).

3. #content-wrapper :
- background image : http://www.blogblog.com/thisaway/bg_main_wrapper.gif
- dimensi (orisinil): Height = 5px, Width = 760px
- Perubahan : perbesar lebar background image sesuai width pada #outer-wrapper (A).

4. #sidebar :
- background image : http://www.blogblog.com/thisaway/bg_sidebar_arrow.gif
- dimensi (orisinil): Height = 88px, Width = 98px
- Perubahan : Rubah posisi background = PB dengan menjumlahkan 179px + (C setelah perubahan - C orisinil)
Keterangan: tanda (-) = dikurangi !

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

update » January, 10, 2012

» Happy Blogging - gubhugreyot «