Menghilangkan / mengganti logo friendster

Posted: 12 Februari 2009 in internet
Tag:

tapa-bromo Bosan dengan logo Friendster yang itu-itu aja, gimana kalo kita ganti dengan logo kita sendiri. beberapa hari lalu saat browsing saya menemukan caranya dari situs web master yang bersumber pada http://my.opera.com/yoyon/ 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 :
-> abstak : http://my.opera.com/yoyon/homes/files/bfs_abstract_10.jpg
abstrak-01

-> Naruto 1 : http://my.opera.com/yoyon/homes/files/1bfs_naruto_01.jpg
naruto_01

-> Naruto 2 : http://my.opera.com/yoyon/homes/files/1bfs_naruto_02.jpg
naruto_02

-> Naruto 3 : http://my.opera.com/yoyon/homes/files/1bfs_naruto_03.jpg
naruto_03

-> Naruto 4 : http://my.opera.com/yoyon/homes/files/1bfs_naruto_04.jpg
naruto_04

-> Naruto 5 : http://my.opera.com/yoyon/homes/files/1bfs_naruto_05.jpg
naruto_05

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s