Kamis, 11 Oktober 2007

Mengganti logo Friendster

Saat ini siapa yang tidak memiliki account di Friendster? Tentu kita sudah melihat bagaimana para anggotanya (dan mungkin juga Anda) mengganti tampilan halaman profil agar tampak berbeda dan menunjukkan kepribadian pemiliknya. Perubahan yang dilakukan ini mulai dari merubah jenis huruf, mengganti warna-warna kotak, sampai menambahkan gambar latar belakang sendiri.

Satu hal yang pasti sama adalah adanya logo Friendster di pojok atas halaman profil kita. Bagaimana caranya agar halaman kita bisa jadi lebih berbeda lagi? Ganti logo Friendster itu dengan logo kita sendiri! Berikut cara melakukannya.

Sebagai catatan, untuk melakukan ini, Anda membutuhkan jasa hosting untuk menyimpan logo yang Anda buat dan file CSS yang mengaturnya. Hosting gratis banyak ditemui di internet tapi pastikan jasa hosting yang Anda pilih bisa diandalkan agar logo kita bisa tampil setiap waktu halaman Friendster kita dibuka. Jika di tempat kerja atau kampus Anda menyediakan hosting, itu juga bisa Anda gunakan.

Langkah pertama tentu saja mendesain logo pribadi. Tinggi yang disarankan adalah 18px dengan lebar maksimal 150px. Logo bisa disimpan dalam format JPEG, GIF, atau PNG. Format terakhir dengan latar belakang transparan lebih disarankan sebab gambar atau warna latar belakang yang kita atur untuk halaman kita akan masih dapat terlihat dengan baik. Upload gambar ini ke hosting yang sudah Anda siapkan dan pastikan gambar ini bisa diakses oleh browser. Cara sederhana untuk mengujinya adalah dengan mengetikkan URL gambar di address bar (misal, http://www.hosting-anda.com/logo.png) dan lihat apakah gambarnya bisa ditampilkan.

Langkah selanjutnya adalah menyiapkan file CSS untuk memerintahkan halaman menampilkan logo kita. Buka Notepad atau aplikasi pengolah teks pada komputer Anda dan salin aturan CSS di bawah ini.

/* MENGGANTI LOGO FRIENDSTER */

/* Menyembunyikan logo standar */
#logo a { display:none; }

/* Menampilkan logo baru */
#logo { height:18px; width:150px; background-image:url('http://www.hosting-anda.com/logo.png'); }

Ganti teks berwarna merah dengan URL logo Anda. Simpan file ini dengan nama custom.css dan upload ke hosting yang sudah Anda siapkan. Seperti pada gambar, pastikan file ini bisa diakses oleh browser.

Langkah terakhir adalah menyisipkan perintah dalam halaman Friendster untuk membaca file CSS yang sudah kita buat. Friendster pada kenyataannya sejak awal tahun 2007 telah memangkas fleksibilitas pengguna dalam menyunting CSS halaman profilnya, menutup pengaturan CSS bebas di halaman pengaturannya dan membatasi pengaturan CSS pribadi khusus untuk elemen-elemen tertentu. Namun setelah dipelajari, Friendster masih menyediakan celah untuk menggunakan CSS tersendiri tanpa pembatasan. Celah ini dimungkinkan oleh adanya fasilitas menambahkan tag HTML di kotak “About Me”, “Who I Want To Meet”, dan “Media Box”. Idenya adalah menambahkan satu baris HTML yang meminta Friendster memanggil dan menjalankan file CSS kita.

Salin baris kode berikut dan tempatkan di awal kotak “About Me”:



Seperti sebelumnya, ubah teks berwarna merah dengan URL file CSS Anda. Simpan profil Friendster Anda, dan lihat hasilnya.

Atikel ini didapat di http://www.bitaedukasi.com/mengganti-logo-friendster/

Tidak ada komentar: