28 July 2007

Back to Nature

Dengan berbagai macam cara yang bisa digunakan untuk meng-hack profile fs, ternyata masih banyak juga yang "nyasar" ke blog ini dengan keyword background fs, fs transparant background, dan lain sebagainya. untuk itu saya memberi judul tulisan ini dengan back to nature, kembali ke cara primitive. saya akan coba menjelaskan beberapa property valid yang memang bisa dirubah dengan css.

Pertama untuk background halaman, anda bisa menggunakan syntax body { } biasa. Menurut pengalaman hingga saat ini biasanya saya hanya menggunakan 5 syntax dasar untuk mengatur background halaman profile friendster. Berikut adalah contoh penggunaannya:


body {

background-color: #000;

background-image: url(http://i205.photobucket.com/albums/bb144/thezaoldyeck/fs/killua.jpg);

background-position: center center;

background-repeat: repeat;

background-attachment: fixed;

}

Background-color tentu saja digunakan untuk menyatakan warna latar halaman, lalu background-image adalah alamat dari file gambar untuk latar. Karena friendster tidak mengizinkan untuk mengupload background berukuran besar, anda perlu mencari "tempat" lain untuk menyimpan gambar background anda. Bagi yang menggunakan photobucket, anda bisa menemukan alamat gambar milik anda di textbox url pada bagian bawah masing-masing gambar.

Lalu background-position digunakan untuk menempatkan gambar latar sebelum di ulang, dan background-repeat adalah adalah "alat" pengatur pengulangan gambar latar tadi, syntax ini bisa diisi dengan repeat, repeat-x, repeat-y, dan no-repeat. Dan terakhir background-attachment menyatakan apakah gambar latar akan ikut tergulung ketika halaman di-scroll atau tidak, dan tentu saja nilainya bisa diganti dengan scroll ataupun fixed.

Hal kedua yang sering dicari orang adalah cara mengganti background dari tiap-tiap panel yang ada di profile friendster. Untuk itu anda bisa menggunakan kode yang hampir sama dengan diatas dengan sebelumnya mengganti selector body dengan .commonbox ataupun .controlpanel. Namun yang perlu diperhatikan adalah, syntax-syntax css panel yang berhubungan dengan background hingga saat ini yang diizinkan hanyalah background-color yang bisa diisi dengan kode warna ataupun transparent. Dan bila anda ingin membuat panel berlatar belakang gambar, maka anda harus menggunakan teknik CSS Injection.

24 July 2007

The Module

Kelebihan dari teknik overlay layout untuk friendster adalah anda bisa menambahkan element-element standar seperti control panel, testi, photo, dan lainnya. Untuk itu anda memerlukan kode "pengganti" untuk element-element tambahan tadi, kode ini hanya terdiri dari beberapa baris dan memanfaatkan JavaScript sebagai engine utamanya. Yang perlu anda lakukan hanyalah menempatkan kode dari masing-masing element ke kode halaman HTML buatan anda. Berikut adalah kode-kodenya:


  1. Control panel:


    <div id="content_controlpanel_1_1"></div>

    <script language="javascript">

    module0="yes";

    </script>




  2. Auto photo update:


    <div id="content_photos_1_2"></div>

    <script language="javascript">

    module1="yes";

    </script>




  3. Auto blog update:


    <div id="content_blogs_1_3"><div class="boxcontent center">loading...<br><img src="http://images.friendster.com/images/loading.gif"></div></div>

    <script language="javascript">

    module2="yes";

    </script>




  4. Auto more about me update:


    <div id="content_moreabout_1_5"></div>

    <script language="javascript">

    module4="yes";

    </script>




  5. Auto comments update:


    <div id="content_publiccomments_1_7"></div>

    <script language="javascript">

    module5="yes";

    </script>




  6. Auto mediabox update:


    <div id="content_scrapbook_1_8"></div>

    <script language="javascript">

    module6="yes";

    </script>




  7. Auto friends update:


    <div id="content_friends_2_2"></div>

    <script language="javascript">

    module8="yes";

    </script>




  8. Auto Groups update:


    <div id="content_groups_2_5"></div>

    <script language="javascript">

    module11="yes";

    </script>



Sekali lagi, cara menginject element-element ini sangatlah mudah, yang perlu anda lakukan hanyalah memasukkan kode dari element yang anda inginkan ke kode HTML anda dan setelah di-generate maka kode-kode tadi akan berubah wujud seperti kode element standar yang ada di profile fs asli, dan andapun tetap masih bisa memodifikasi tampilannya seperti ketika anda menggunakan teknik CSS Injection.

21 July 2007

Overlay Layout

Friendster adalah salah satu jaringan perteman online yang sudah sangat terkenal di dunia sekarang ini. Friendster memberikan "kebebasan" untuk para anggotanya untuk memodifikasi halaman profilenya sendiri, ada banyak cara yang bisa dilakukan untuk itu. Mulai dari yang paling sederhana yaitu memilih template yang telah disediakan, lalu menuliskan kode css-nya sendiri, dan yang pernah saya sebutkan di blog ini, yaitu teknik "meng-inject" paksa kode css kedalam halaman profile.

Namun kelemahan dari teknik inject adalah, element yang bisa dimodifikasi sebenarnya masih terbatas, yaitu element yang memang sudah ada di halaman profile anda, jadi anda tetap tidak bisa memasukkan element tambahan lain yang sebenarnya cukup menarik, seperti iframe, JavaScript, ataupun shoutbox. Untuk itu anda memerlukan teknik terbaru, yaitu friendster overlay layout. Menurut Kaito Kid di forumnya, dengan teknik ini kemungkinan manipulasi atau pengembangan halaman profile fs adalah tidak terbatas.

Secara sederhana konsep dari overlay adalah "melapisi" halaman profile dengan halaman baru buatan anda. Halaman baru ini akan terload setelah halaman profile sebenarnya telah benar-benar terload oleh browser anda. Hal ini sekaligus menjadi kelemahan, karena bila waktu load profile anda lama atau terjadi kegagalan load, maka otomatis halaman profile "bayangannya" akan tertunda atau bahkan tidak muncul sama sekali.

Untuk memuat overlay layout, yang perlu anda siapkan adalah sebuah halaman web buatan anda sendiri. Di halaman ini anda bisa memasukkan apa saja semau anda. Dan setelah halaman web berhasil dibuat, kunjungi website ini, www.markyctrigger.com, lalu klik pada link OG Standard. Copy paste kode HTML halaman web yang telah anda buat sebelumnya ke kotak atas di halaman OG standard tadi, dan klik tombol generate. Buka halaman edit skin di friendster lalu klik tombol revert. Copy code yang anda dapat dari OG standard tadi(kotak bawah), lalu paste pada mediabox di friendster anda. Klik tombol save, dan profile baru andapun siap disajikan.

12 July 2007

Webdesign

Bagi saya dunia webdesign yang baru saya pelajari kurang dari 1 tahun ini sudah menjadi hobi yang cukup menyenangkan. Kepuasan tiada tara akan didapat ketika desain web saya dikomentari baik oleh orang lain. Begitu juga kekecewaan akan datang bila pengunjung yang datang hanya sedikit apalagi sampai tidak puas. Hal yang paling penting dari sebuah website menurut saya adalah content, karena apa yang dicari oleh pengunjungukanlah tampilan ataupun aksesoris dari blog tersebut, namun content conten yang ada didalamnya.

Namun bukan berarti tampilan bisa dikesampingkan. Apa yang pertama dilihat oleh pengunjung adalah tampilan dari situs itu bukan kontennya, memang bertentangan dengan pernyataan sebelumnya, namun hal ini memang benar adanya. Dan hal yang menurut saya penting dari tampilan website adalah, daya tarik, kecepatan load, dan fungsionalitas. Bila kesan pertama yang ditampilkan oleh suatu website sudah membuah pengunjungnya terkagum-kagum, otomatis ia akan senang berlama lama di situs itu. Lalu waktu load halaman, situs yang menurut saya paling menjengkelkan adalah situs yang dilengkapi dengan flash, terutama yang menggunakan flash pada bagian-bagian pentingnya. Karena tidak semua web browser di semua komputer di dunia ini telah dilengkapi dengan flash player. Coba saja anda bayangkan bila anda mengunjungi sebuah website yang ada flash didalamnya dan kebetulan anda tidak memiliki flash player dikomputer anda, maka anda akan diharuskan untuk membuang banyak waktu untuk mendownloadnya. Dan saya yakin, kebanyakan dari anda pasti akan memutuskan untuk meninggalkan situs itu.

Dan unsur yang terakhir adalah fungsionalitas. Ada satu blog yang menurut isinya cukup menarik namun sayangnya blog itu terlalu memuakkan untuk dipandang, terlalu banyak element di sidebarnya, semua element saling tumpang tindih, banyak diantaranya yang tidak terlalu penting, dan yang paling mengesalkan adalah fixed footernya. Sebaliknya website yang sudah cukup banyak memberikan ilmunya untuk orang lain justru tampil dengan keadaan yang teramat polos, diantaranya, www.cosaaranda.com, www.gudanginfo.web.id, dan tentunya www.ilmukomputer.com. Tampilan sederhana ini tentunya sangat membantu karena konten-konten didalamnya memang cukup berbobot dan kadang cukup "memberatkan", jadi meskipun postingan cukup panjang namun waktu loadpun tidak terlalu lama. Bandingkan dengan blog yang disebutkan diawal tadi, ketika saya mencoba menyimpan salah satu halamannya dengan format html only, yang saya dapatkan adalah "seonggok" file berukuran 220kb.

11 July 2007

Indonesian

Beberapa waktu yang lalu blogger menambahkan fitur tambahan baru di sistemnya, tentu saja yang paling mengejutkan adalah ditambahkannya bahasa indonesia kedalamnya, jadi sekarang anda tidak perlu repot-repot membuka kamus untuk mencari arti tombol yang ada di blogger. Tapi seperti yang kita tau, blogger sudah lama diakusisi oleh Google, jadi penambahan bahasa di blogger ini tidak lepas dari "kakak" nya ini. Dan ternyata benar, belum lamanya Adsense, raksasa iklan milik google juga mengupgrade interface nya dengan bahasa indonesia.

The Offset Machine

Offset adalah salah satu sistem cetak yang banyak digunakan saat ini. Alasannya karena dengan mesin tipe ini cetakan dapat dibuat dengan sangat cepat, hasilnya baik, dan pembuatan acuan cetak juga lumayan cepat. Mesin offset termasuk kedalam sistem cetak datar. Begini maksudnya, pernah anda perhatikan stempel manual? Di stempel bagian yang mencetak selalu lebih tinggi daripada bagian kosongnya (tidak mencetak), jadi ketika stempel dimasukkan ke bak tinta maka bagian mencetak akan terkena tinta dan bagian lainnya tidak, sedangkan di mesin offset bagian bergambar (image area) dan bagian tidak bergambar (non image area) berada pada posisi yang sama tingginya. lalu mengapa bagian tidak bergambarnya tidak ikut terkena tinta?

Mesin offset menggunakan pelat khusus sebagai acuan cetaknya, di atas pelat itu semua bagian gambar, teks, ataupun bagian kosong dari cetakan sama-sama datar. Hanya kedua bagian itu (image & non image) terbuat dari bahan yang berbeda.

Pada proses pencetakan bagian tidak bergambar dari pelat pertama-tama akan dilapisi oleh air, sedangkan bagian bergamar yang lebih licin tidak akan terlapisi oleh air, karena sejatinya air mustahil untuk melekat pada bagian yang licin. Pada proses berikutnya pelat akan dilapisi oleh tinta. Tidak seperti air, tinta mampu melekat pada bagian licin di image area, namun karena non image area telah terlapisi oleh air, maka mustahil tinta yang berbahan dasar minyak tersebut melekat diatasnya. Karena hal itulah, sistem cetak datar (offset) tetap mampu memisahkan bagian bergambar dengan bagian tidak bergambar, meskipun tinggi keduanya sama.

09 July 2007

Your Amazing Profile

Friendster allow you to write down css code for costumize your profile, but friendster limiting the css code can be use. So you need a special trik for do that. You must make a css rel from your profile page to your css file on the other hosting, so friendster team can't modified your css code. Firstly you must have "style.css" file on your own hosting, and remember the url of the css file.

Put this code on your about me section, <link rel="stylesheet" type="text/css" href="your css file url">, example: <link rel="stylesheet" type="text/css" href="http://www.mydomain.com/directory/style.css">, and than, you can fill out the css code on your costumize box.

Color and Colors

Apalah artinya sebuah komputer tanpa adanya sistem pewarnaan didalamnya, pasti akan jadi seperti sistem kuno yang masih menggunakan DOS. Namun tahukah anda bahwa kebanyakan warna di sistem komputer dibuat berdasarkan sistem RGB (Red, Green, Blue), dimana setiap warna yang muncul adalah gabungan dari tiga warna dasar tadi. Dalam sistem warna RGB, bila dalam suatu campuran warna yang didalamnya tidak mengandung warna apapun maka hasilnya adalah warna hitam, sedangkan bila ketiga warna dicampurkan secara utuh, maka akan menghasilkan warna putih sempurna. Dalam webdesign sendiri umumnya para webmaker menuliskan warna RGB ini menggunakan hexa code, contohnya kode #000000 untuk hitam, #ffffff untuk putih, #00f untuk biru, dan lain sebagainya.

Sedangkan di dunia grafika warna dibuat berdasarkan sistem CMYK (Cyan, Magenta, Yellow, Key), sistem ini sebenarnya hampir sama dengan RGB namun di sistem ini, bila semua warna dicampurkan justru akan menghasilkan warna hitam, dan sebaliknya bila tidak ada warna sama sekali maka akan muncul warna putih yang pada dasarnya adalah warna dari kertas cetak yang digunakan. Bila di sistem RGB hanya menggunakan 3 warna maka di sistem ini akan ditemui warna keempat yaitu "key". Awalnya hanya ada 3 warna yang digunakan yaitu cyan, magenta, dan yellow, namun masalahnya bila hanya ketiga warna ini yang dicampurkan maka "mustahil" untuk mendapat warna hitam yang sempurna, melainkan hanya warna hitam kecoklat-coklatan. Maka dari itu ditambahkan warna keempat atau disebut juga kunci warna (key), karena warna tambahan ini akan menghasilkan warna campuran yang murni hitam, karena pada dasarnya warna "kunci" ini memang warna hitam.

Dalam proses pencetakan, setiap warna akan dipisahkan kedalam pelat-pelat cetak yang berbeda, jadi gambar yang dicetak akan "dipecah" menjadi empat bagian yang berbeda. Dimana setiap pelat/acuan dicetak sesuai urutan CMYK (tidak bersamaan), karena bila warna hitam dicetak lebih awal, maka resiko cetakan kotor akan semakin besar. Untuk mengasilkan cetakan yang baik, setiap warna harus berada di posisi yang benar benar tepat, karena bila tidak maka hasil cetakan akan berbeda dengan model aslinya. Di mesin cetak disediakan alat untuk mengatur hal tersebut, hingga satuan micron, namun tetap harus disesuaikan secara manual. Sedangkan di dunia webdesign yang saya geluti ini, satuan terkecil hanya berupa piksel, karena itu menurut saya mendesain web jauh lebih mudah bila dibandingkan menghasilkan cetakan yang baik.

08 July 2007

Not Important but Interesting

Pernahkah nonton serial anime Rockman exe atau Digimon? Dalam cerita kedua anime tersebut, diceritakan bahwa dimasa depan, setiap anak memiliki sebuah konsol handled canggih yang bisa terhubung ke internet dan didalamnya hidup sebuah mahluk digital, baik netnevi maupun digimon. Dan dengan sebuah kartu, kekuatan dari mahluk tersebut bisa meningkat. Namun apakah hal itu mungkin terjadi? Bagi saya mungkin!!

Kenapa? karena teknologi yang ada sekarang ini sudah mendukung terjadinya hal tersebut. Contohnya sekarang sudah banyak bermunculan perangkat mobile yang bisa terkoneksi ke internet baik yang berupa konsol game seperti NDS dan PSP maupun handphone biasa. Dengan semakin majunya teknologi jaringan seperti 3G, WIMAX dan yang lainnya, hal itu akan sangat mungkin terjadi.

Lalu dari sisi gamenya sendiri, sudah sejak lama game rockman exe dan digimon ini diterbitkan, baik game yang membuat kita dapat mengontrol pemain dari netnevi/digimon tersebut maupun yang membuat kita langsung sebagai pengendali netnevi/digimon itu sendiri. Namun sayangnya game game itu hanyalah game sederhana yang hanya bisa dimainkan oleh beberapa orang saja, offline dan tidak mendukung interaksi antar pemain, sehingga tidak tidak sama dengan yang dialami tokoh-tokoh di anime tersebut.

Tapi coba anda lihat game game seperti Ragnarok maupun Gunbound, pada game jenis ini, anda dapat berinteraksi dengan ribuan bahkan jutaan pemain lain dari seluruh dunia. Masalahnya game ini hanya ada di konsol besar, PC, jadi tetap tidak sama. Lalu pemecahannya adalah membuat sebuah game yang membuat anda memiliki sebuah karakter yang bisa anda kembangkan sendiri secara offline, dapat dimainkan di konsol handled, dan konsol itu dapat dihubungkan ke komputer anda lalu ia akan menghubungkan diri ke server game melalui internet, untuk bermain dengan pemain lain di seluruh dunia.

Jadi sebenarnya ini tidak jauh berbeda dengan meng-online-kan tamagochi sehingga anda bisa membuat makluk didalamnya bertarung dengan makluk milik orang lain. Pastinya hal itu akan sangat menarik, mudah-mudahan tulisan ini sampai ke programmer maupun publisher game di tanah air, sehingga hal ini dapat terwujud.

New Comment Sistem

Saya termasuk orang yang suka mendesain sesuatu, termasuk layout, baik layout blogger, friendster maupun website biasa, dan tanpa bermaksud sombong, saya cukup ahli melakukannya, karena pada dasarnya saya senang melakukan pekerjaan tersebut. CSS adalah alat utama bagi saya untuk memodifikasi setiap layout, dan lagipula beberapa hal memang hanya bisa dilakukan dengan CSS, contohnya friendster. Seperti yang kita ketahui, CSS memiliki teknologi yang satu tingkat lebih maju dari pentabelan yang menggunakan HTML. Karena hal itulah kenapa saya pernah menganggap remeh friendster, karena ketika saya "membelah" halaman profile saya menggunakan notepad, saya menemukan beberapa tag-tag <table> disana. Namun ternyata saya salah, tag-tag "kuno" itu justru cukup menyulitkan saya ketika ingin memodifikasinya, karena ada beberapa bagian yang tidak bisa dipindahkan hanya dengan teknik floating biasa.

Lepas dari friendster, masalah lain juga menunggu saya di blogger, beberapa tag tidak lazim saya temui disana, contohnya <blogger>, </blogger>, dan lain sebagainya. Dan tag-tag yang paling membingungkan saya adalah yang ada pada bagian komentar, karena tag-tag yang ada disana justru lebih banyak dari yang ad di postingnya sendiri, dan semuanya tidak saya kenal. Beberapa layout sudah saya buat, dan ketika dicoba secara online justru layout-layout itu gagal, karena tag-tag "aneh" tadi salah penempatannya. Karena hal itulah saya memutuskan mengganti sistem komentar di blog ini menggunakan tools dari pihak lain, yaitu haloscan, dengan bantuannya, layout sayapun menjadi lebih sederhana dari segi kode dan akan lebih mudah untuk dipelajari dan dimodifikasi nantinya. Tapi di blog milik orang lain, sistem comment yang seperti ini juga terintegrasi dengan sistem avatar milik gravatar, dan sepertinya bagus, namun karena blog ini belum terlalu terkenal maka yang berkomentarpun masih sangat sedikit, jadi saya belum bisa melihat hasilnya.

07 July 2007

Explore Your Profile

Seperti yang pernah dijelaskan cosa aranda di blognya, bahwa halaman profile di Yahoo Profile serta Myspace bisa dimanfaatkan untuk memperoleh link ke situs anda, dan kali ini kita akan mencobanya di friendster. Lebih dari itu, anda juga bisa "menyulap" halaman profile anda menjadi seperti layaknya feed aggregator yang akan selalu mengumumkan update dari blog maupun situs anda. Namun masalah utama yang ada di friendster adalah, kita tidak diizinkan untuk memasukan kode-kode selain kode HTML standar, anda akan dilarang mengunakan JavaScript, PHP, maupun iframe, untuk itu anda terpaksa menulis setiap linknya secara manual.

Dengan layout yang telah dimodifikasi, saya mencoba menambahkan news aggregator tersebut kedalam halaman profile friendster saya, yang isinya hanyalah posting terbaru dari blog ini dan juga update layout friendster terbaru dari situs X-Lay Out milik saya. Hasilnya bisa anda lihat pada screen shoot berikut ini.


News Aggregator on Friendster Page

06 July 2007

Personalize Navigation Bar

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:



  2. #navrow {

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

    }



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



  4. #logo, #headersearch, #subnav {

    display: none;

    }



  5. Membuat navigasi utama memiliki latar belakang gambar serta transparan



  6. #mainnav {

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

    padding-top: 60px;

    }



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



  8. #mainnav_left, #mainnav_right, #navdivider, #marketing_bg {

    display: none;

    }



  9. Dan terakhir mengubah warna menu navigasi serta menghilangkan pembatasnya



  10. #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.

Friendster Layout Hack

Bila sudah mempelajari cara memasukan kode CSS secara "ilegal" kedalam account friendster anda, maka kini saatnya untuk belajar membuat file CSS-nya itu sendiri. Karena dengan cara ilegal ini tidak ada batasan untuk mengupgrade halaman profile anda, maka anda perlu mengetahui property-property apa saja yang perlu dirubah. Karena sangat banyak yang bisa anda modifikasi, maka saya tidak bisa membahasnya secara keseluruhan, untuk itu saya sarankan anda membaca source code dari halaman profile anda sendiri.

Kita akan mulai dari bagian header, yaitu elemen yang berada paling atas dari elemen-element lainnya. Di bagian ini pula ditempatkan logo friendster, search form, menu navigasi utama, serta link classifields milik friendster. Berikut adalah property-property yang berhubungan dengan header halaman profile friendster anda, berikut penjelasan singkatnya.



/* elemen tertinggi di bagian header */

#navrow { }



/* elemen dibawah #navrow, didalamnya berisi form search, link navigasi, logo fs, dan lainnya */

#navigation { }



/* logo friendster */

#logo { }



/* form search */

#Search { }



/* menu navigasi tambahan */

#subnav { }



/* menu navigasi utama */

#mainnav { }



/* menu utama kiri */

.primary_links { }



/* menu utama kanan */

.secondary_links { }



/* pemisah antara menu utama yang satu dengan yang lainnya */

.primary_links span { }



/* pemisah antara baris menu utama dengan baris link classifields */

#navdivider { }



/* baris tempat link classifields */

#marketing_bg {}



Semua property tersebut bisa anda berikan kode css apa saja agar tampilan profile anda menjadi mengagumkan, termasuk menghilangkan salah satu atau beberapa bagian yang tidak anda inginkan. Contohnya, untuk menghilangkan logo friendster, anda bisa menggunakan kode dibawah ini.




#logo { display: none; }

Property-property yang saya tulis diatas hanyalah yang berhubungan dengan header halaman profile anda, jadi untuk menghasilkan tampilan yang jauh lebih baik dan menyeluruh, anda masih harus banyak belajar lagi, membaca source codenya, dan terutama, sering-sering lah mampir ke blog ini. (^_^)

05 July 2007

Friendster Radical Layout

Bila di postingan sebelumnya disebutkan bahwa pihak friendster menolak kode css yang dianggap ilegal karena berpotensi "merusak" tampilan profile anda menjadi sangat berbeda dari situs friendsternya sendiri. Padahal beberapa property yang tidak diizinkan tersebut sebetulnya sangat berguna untuk membuat tampilan layout menjadi lebih istimewa. Untuk mengatasinya, anda bisa memasukan kode-kode css "terlarang" tadi secara ilegal, yaitu dengan cara membuat rel atau penghubung antara halaman profile anda dengan file CSS yang diletakkan terpisah.


Cara ini kemungkinan besar akan berhasil, karena kode penghubung ditulis dalamn bahasa HTML standar yang tidak dilarang oleh friendster. Dan karena kode-kode CSS yang diletakkan terpisah tersebut masuk secara ilegal, bukan melalui situs friendster, maka friendster tidak bisa memblokir ataupun mengedit kode-kode itu. Syarat satu-satunya adalah file CSS tambahan harus diletakkan di sebuah filehosting agar selalu bisa diakses, dan karena banyak sekali hosting gratisan diluar sana, maka akan mempermudah anda untuk menemukannya.

Langsung saja, buat sebuah file CSS dan simpan dengan nama style.css atau apa saja, tapi ekstensi tetap ".css", lalu upload ke hosting pilihan anda, dan catat alaman file CSS tadi. Lalu masuk ke bagian custumize di friendster, isi box css yang ada disana seperlunya saja, misal hanya untuk warna link atau background, save. Dan terakhir buka tab main pada halaman edit profile di friendster, cari bagian about me, dan masukan kode dibawah ini.


<link href="http://www.domain.com/folder/style.css" rel="stylesheet" type="text/css">

Ganti bagian "http://www.domain.com/folder/style.css", url tempat file style.css tadi disimpan. Kode-kode didalam file css tadi akan 100% berfungsi karena tidak akan ter-edit oleh friendster, jadi anda bisa memasukan code apa saja disitu termasuk menghilangkan iklan-iklan yang ada. Contoh sederhana adalah, anda tidak akan bisa membuat panel-panel di profile anda mempunyai gambar latar belakang, sedangkan dengan cara ini anda bisa melakukannya. Untuk membuktikannya, coba anda masukan kode dibawah ini kedalam file style.css buatan anda tadi, lalu terapkan cara-cara yang telah disebutkan diatas, niscaya setiap panel di halaman profile anda akan memuliki wallpaper bergambar.


.commonbox {
background: #fff url(http://zaoldyeck.1111mb.com/images/killua3.jpg) no-repeat center center;
}