Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Arsip...

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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 «

2 komentar:

 
GR | Edited by | gubhug reyot