Bosan dengan logo Friendster yang itu-itu aja, gimana kalo kita ganti dengan
logo kita sendiri. Di Friendster Tutorial kali ini kita akan merubah logo Friendster
yang biasa dengan logo baru yang lebih menarik. Hal pertama yang harus kamu
lakukan adalah menghilangkan logo friendster di PFS kamu. Caranya, tambahkan
kode berikut pada kode CSS yang kamu miliki :
#navigation img{width:0px; height:0px;}
Penjelasan:
width:0px - Properti width (lebar) menentukan lebar suatu elemen, dalam
hal ini gambar logo friendster memiliki lebar 0 piksel, yang berarti logo tersebut
tidak akan ditampilkan.
height:0px - Properti height (tinggi) menentukan tinggi suatu elemen,
dalam hal ini gambar logo friendster memiliki lebar 0 piksel, yang berarti logo
tersebut tidak akan ditampilkan.
Tips:
Cara termudah untuk mengedit kode CSS kamu adalah dengan menggunakan notepad.
Salin seluruh kode ke notepad, lakukan pengeditan, dan setelah selesai, paste
kembali ke dalam kotak kode CSS.
Cara penulisan kode CSS bisa dimodifikasi untuk memudahkan pengeditan yaitu
seperti berikut:
Kode awal:
#navigation img {width: 0px; height: 0px;}
Dimodifikasi menjadi:
#navigation img
{
width: 0px;
height: 0px;
}
Memasukkan Banner/Logo Baru
Langkah selanjutnya adalah meletakkan gambar untuk menggantikan logo FS. Sebelumnya
kamu harus sudah siap dengan link gambar yang akan dimasukkan. Kamu bisa menggunakan
gambar yang sudah tersedia di internet atau menggunakan gambar kamu sendiri.
Saya juga telah membuat contoh banner yang bisa kamu gunakan. Saya sarankan
kamu membaca tips pada akhir tulisan ini terlebih dahulu sebelum melakukan langkah
berikutnya.
OK, sekarang saya anggap bahwa kamu sudah memiliki alamat URL gambar yang akan
dimasukkan. Selanjutnya ikuti langkah-langkah berikut :
1. Pada kode CSS yang telah kamu buat, cari kode baris berikut ini:
/* BOX BG & BORDER: NAV BAR */
#navigation { background-color:transparent; background-image:none; }
atau:
/* BOX BG & BORDER: NAV BAR */
#navigation
{
background-color: transparent;
background-image: none;
}
2. Masukkan kode properti, alamat URL gambar kamu, dan kode pendukungnya sehingga
terlihat seperti ini:
#navigation
{
background-color: transparent;
background-image: url(URL gambar kamu);
margin-left: 0px;
margin-right: 0px;
padding: 0px;
width: 940px;
height: 121px;
}
Penjelasan:
background-color: transparent; - Properti background-color menentukan
warna latar, dalam hal ini transparan.
background-image: url(URL gambar kamu); - Properti background-image menentukan
gambar latar, dalam hal ini adalah gambar pada alamat URL yang tertera.
margin-left: 0px; Properti margin-left menentukan ruang (space) di bagian
kiri elemen, dalam hal ini tidak terdapat ruang kosong antara gambar dengan
batas kiri.
margin-right: 0px; - Properti margin-right menentukan ruang (space) di
bagian kanan elemen, dalam hal ini tidak terdapat ruang kosong antara gambar
dengan batas kanan.
padding: 0px; Properti padding menentukan ruang (space) di sekitar elemen,
dalam hal ini tidak terdapat ruang kosong antara gambar dengan batas luar.
width: 940px; - Properti width (lebar) menentukan lebar suatu elemen,
dalam hal ini gambar yang kamu masukkan memiliki lebar 940 piksel.
height: 121px; - Properti height (tinggi) menentukan tinggi suatu elemen,
dalam hal ini gambar yang kamu masukkan memiliki tinggi 121 piksel.
Tips:
Agar tampilan banner terlihat proporsional, pastikan properti width dan height
memiliki nilai yang sama dengan ukuran gambar kamu.
Ukuran gambar yang tepat menurut saya adalah 940×121 piksel.
Saya telah membuat beberapa macam banner yang bisa kamu gunakan. Untuk mendapatkan
URL-nya, klik kanan pada gambar:
Pengguna Internet Explorer: Pilih Properties, Lihat Address URL
Pengguna Opera: Pilih Image Properties, Lihat Address
Pengguna Mozilla Firefox: Pilih Copy Image Location, Lihat XXX
Berikut ini beberapa gambar yang bisa kamu pakai sebagai pengganti banner Friendster
:
http://my.opera.com/dirrga/homes/files/bfs_abstract_02.jpghttp://my.opera.com/dirrga/homes/files/bfs_abstract_03.jpg
http://my.opera.com/dirrga/homes/files/bfs_abstract_04.jpg
http://my.opera.com/dirrga/homes/files/bfs_abstract_05.jpg
http://my.opera.com/dirrga/homes/files/bfs_abstract_06.jpg
http://my.opera.com/dirrga/homes/files/bfs_abstract_07.jpg
http://my.opera.com/dirrga/homes/files/bfs_abstract_08.jpg
http://my.opera.com/dirrga/homes/files/bfs_abstract_09.jpg
http://my.opera.com/dirrga/homes/files/bfs_abstract_10.jpg
http://my.opera.com/dirrga/homes/files/1bfs_naruto_01.jpg
http://my.opera.com/dirrga/homes/files/1bfs_naruto_02.jpg
http://my.opera.com/dirrga/homes/files/1bfs_naruto_03.jpg
http://my.opera.com/dirrga/homes/files/1bfs_naruto_04.jpg
http://my.opera.com/dirrga/homes/files/1bfs_naruto_05.jpg
sumber : http://kapal-petjah.blog.friendster.com/
