Rahasia Merubah Lebar Halaman dan Kolom Blog-4: Tutorial BloGGeR Cara memodifikasi Blog

Posting ini adalah bagian ke-4 tentang rahasia merubah lebar halaman dan kolom blog. Contoh dalam tutorial diambil dari kode html Template Tata Letak. pertimbangan digunakannya template tata letak (template lama) karena template ini lebih mempermudah blogger untuk memahami desain dasar desain blog. Buatlah sebuah blog khusus yang hanya digunakan sebagai latihan melakukan berbagai modifikasi. Akses untuk mendapatkan template tata letak adalah di Halaman Dasbor. Lihat di bagian terbawah halaman dasbor maka akan dijumpai link Template Tata Letak . Melalui link tersebut anda bisa mendapatkan blog dengan template blogger lama (template tata letak). Ada baiknya buka terlebih dahulu beberapa tutorial di bawah ini untuk lebih mempermudah memahami tutorial bagian ke-4.

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
4. Rahasia Merubah Lebar Halaman dan Kolom Blog bagian-3

Template Son of Moto

KODE CSS yang harus di rubah :

body {
       margin: 0;
       padding: 0;
       border: 0;
       text-align: center;
       color: #555544;/* orisinil==>W=722px, H=12px ==> width bg_body = width (#outer-wrapper) = A + 30px */
       background: #692 url(//www.blogblog.com/moto_son/outerwrap.gif) top center repeat-y;
       font-size: small;
}
#outer-wrapper {
       margin: 0 auto;
       border: 0;
       width: 692px; /* width (#outer-wrapper = A */
       text-align: left; /* Orisinil  W=258px, H=12px   ==> bg #outer-wrapper = width (#sidebar) + 32px  */
       background: #ffffff url(http://www.blogblog.com/moto_son/innerwrap.gif) top right repeat-y;
       font: normal normal 100% tahoma, 'Trebuchet MS', lucida, helvetica, sans-serif;
}
#main {
       width: width: 400px; /* width (#main) = B */
       float: left;
       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 {
       width: 326px; /* width: 226px; /* width (#sidebar) = C */
       float: right;
       color: #555544;
       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 + 66px

Kunci Perubahan Background Image :

1. body :
- background image : http://www.blogblog.com/moto_son/outerwrap.gif
- dimensi (default): Height = 12px, Width = 722px
- Perubahan : lebar background image ===> #outer-wrapper (A) + 30px

2. #outer-wrapper :
- background image : http://www.blogblog.com/thisaway/bg_header.gif
- dimensi (default): Height = 12px, Width = 258px
- Perubahan : lebar background image ===> #sidebar (C) + 32px

3.Background Image yang lain = tetap/tidak berubah.

Template Mr. Moto

Kunci perubahan lebar (width) dan background image yang harus dilakukan pada template ini sama persis dengan Template Son of Moto.

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 «