Trick Customize Wide Rail

Customize Rail kali ini, membuat Rail lebih lebar dari default nya.
Mungkin saat membaca ini, timbul pertanyaan, mengapa harus dilebarkan ?
Bukankah apabila dilebarkan, justru akan mengurangi space untuk content kita ?
Jawabannya adalah, akan dilebarkan jika memang diperlukan.

Kemarin ada yang bertanya kepada saya, bagaimana cara menempatkan background dan image di Rail dengan ukuran yang lebih besar dari lebar Rail ?
Saya saat itu tidak langsung menjawab. Jika saya jawab "Image nya yang dikecilkan" mungkin dia menjadi tidak nyaman karena image yang dipasang adalah photo dia ... sungguh heavy narsis.

Jadi, Rail nya saja yang dilebarkan, mengapa tidak ?

Contoh saya ambil dari "Andros base theme". Jika anda memakai base theme lainnya, anda perlu menyesuaikan dengan lebar asal.. Rata-rata Rail mempunyai lebar yang mirip.

Kita mulai.

Berikut adalah gambar rail default.



Pertama, kita geser batas kanan Site Title dan Navigation Menu ke kiri 40px, dengan lain kata dikecilkan 40px. Hal ini merupakan langkah aman karena kita tidak merubah lebar page yang ada. Dan dijamin muat pada semua jenis layar monitor.

div.owner_nav {
margin:20px 200px 20px 0;
}
Dan kita akan mendapatkan :



Berikutnya, kita tambah lebar Rail ID, tempat dimana semua bagian Rail berada.

div#rail {
width:179px;
}
Efek nya :



Dan selanjutnya kita perlebar Railstart. Bagian atas Headshot yang bagaimanapun juga masih anggota dari Rail.

.railstart {
width:179px;
}
Hasil nya :



Dan menjadi satu hal yang aneh apabila isi rail tidak dilebarkan. Kita perlebar Railbody.

.railbody {
width:159px;
}


Lebar awal Rail adalah 139px. Dengan penambahan 40px, maka Rail kita menjadi 179px. Sehingga cukup untuk memuat image Live Traffic Feed seperti FEEDJIT .



Kode lengkap :

div.owner_nav {
margin:20px 200px 20px 0;
}
div#rail {
width:179px;
}
.railstart {
width:179px;
}
.railbody {
width:159px;
}
Sederhana tapi dapat bekerja dengan baik.

Hope can helps.
© 2009 Lilok http://dangdutkoplo.multiply.com