Learn 2 Share

Kali ini saya akan menjelaskan cara merubah logo standar di halaman profile frindster anda menjadi logo pilihan anda sendiri, dan untuk melakukannya anda hanya memerlukan beberapa file gambar pendukung, serta file css eksternal yang telah ditempatkan secara terpisah. Teknik yang akan digunakan kali ini hanyalah menutup/menghilangkan beberapa bagian yang tidak diperlukan, serta menambahkan background pada bagian yang lainnya.

Agar lebih mudah dimengerti, saya akan menjelaskannya tahap demi tahap, dan saya anggap anda sudah memiliki file style.css yang saya telah jelaskan sebelumnya. Jadi yang perlu anda lakukan sekarang adalah meng-edit file tersebut. Berikut adalah kode-kode yang anda perlukan.


1. Pertama- tama tambahkan background pada element #navrow dengan kode dibawah ini:



#navrow {

background: #000 url(images/body-header.png);

}



2. Lalu Hilangkan logo standar, form pencarian serta link-link navigasi tambahan



#logo, #headersearch, #subnav {

display: none;

}



3. Membuat navigasi utama memiliki latar belakang gambar serta transparan



#mainnav {

background: transparent url(images/killua.gif) no-repeat top center !important;

padding-top: 60px;

}



4. Hilangkan kotak yang ada di kanan dan kiri menu utama, garis pembatas, serta block classifields



#mainnav_left, #mainnav_right, #navdivider, #marketing_bg {

display: none;

}



5. Dan terakhir mengubah warna menu navigasi serta menghilangkan pembatasnya



#mainnav a:link, #mainnav a:visited {

color: #000 !important;

padding: 0px 13px 0px 13px;

}

#mainnav span {

display:none;

}


Di bawah ini adalah hasil yang akan anda dapatkan dari kode-kode tadi, dan untuk melihat contoh header yang lebih baik, kunjungi profile friendster saya di www.friendster.com/websurffer.