04.14
Unknown
Bosen 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 940x121 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/yoyon/homes/files/bfs_abstract_02.jpg
http://my.opera.com/yoyon/homes/files/bfs_abstract_03.jpg
http://my.opera.com/yoyon/homes/files/bfs_abstract_04.jpg
http://my.opera.com/yoyon/homes/files/bfs_abstract_05.jpg
http://my.opera.com/yoyon/homes/files/bfs_abstract_06.jpg
http://my.opera.com/yoyon/homes/files/bfs_abstract_07.jpg
http://my.opera.com/yoyon/homes/files/bfs_abstract_08.jpg
http://my.opera.com/yoyon/homes/files/bfs_abstract_09.jpg
http://my.opera.com/yoyon/homes/files/bfs_abstract_10.jpg
http://my.opera.com/yoyon/homes/files/1bfs_naruto_01.jpg
http://my.opera.com/yoyon/homes/files/1bfs_naruto_02.jpg
http://my.opera.com/yoyon/homes/files/1bfs_naruto_03.jpg
http://my.opera.com/yoyon/homes/files/1bfs_naruto_04.jpg
http://my.opera.com/yoyon/homes/files/1bfs_naruto_05.jpg
Posted in: 
0 komentar:
Posting Komentar