BREAKING NEWS

Minggu, 05 Oktober 2008

Friendster Tutorial

1. Tambah Teman

Sekarang kita akan mulai mencoba menambah teman. Setelah kamu mendapatkan alamat email dari seseorang, kamu udah bisa meng-Addnya sebagai teman. Gimana caranya? Check This Out !!

Kita akan menggunakan fasilitas Search Friendster :

Masukkan email teman di Friendster kita ke kotak isian. Untuk pilihannya, bisaja pake Name. Selanjutnya tekan tombol hijau atau enter. And kita lihat apa hasilnya. Kalo memang temanmu telah memiliki account di Friendster, maka dalam waktu sekejab kamu akan mendapatkan hasilnya seperti ini :




Nah, sekarang langkahnya makin mudah. Kamu udah bisa langsung menekan tombol add as friend (lihat lingkaran merah). Selanjutnya kamu akan dimintai konfirmasi apakah benar-benar ingin menjadi temannya.

Kalo memang ya, kamu bisa langsung mengklik tombol Add ..... as Your Friend, dengan demikian kamu udah memintanya menjadi temanmu. Tapi pekerjaan belum selesai. Kamu tetap harus menunggu dia menyetujui permintaan menjadi teman. Setelah disetujui, kamu akan mendapatkan seorang teman lagi di daftar temanmu.


2. dasar-dasar edit profile

Friendster mengijinkan kita untuk merubah tampilan sesuai keinginan kita. Sebelum kita membahas bagaimana cara merubah tampilan di Friendster, rasanya saya perlu menyamakan persepsi dulu tentang perangkat yang diperlukan serta fasilitas-fasilitas yang disediakan oleh Friendster untuk merubah penampilan profile kita. Sekarang mari kita memasuki halaman costumize Friendster.

Mengakses Halaman Costumize

Untuk mengakses halaman costumize, ikutilah langkah-langkah berikut. Mulailah dari halaman Home. Lalu kik tombol Edit Profile seperti ditunjukkan pada gambar berikut :

Setelah halaman Edit Profile muncul, selanjutnya adalah menekan tombol Costumize

Anda akan dibawa ke halaman Costumize. Disinilah kita akan melakukan berbagai macam hal untuk merubah dan mempercantik profile friendster kita. Silahkan lihat gambar berikut :

Berikut keterangan dua box diatas :

Media Box

Media box adalah tempat kita meletakkan kode HTML yang akan muncul di profile Friendster kita. Disini kamu bisa meletakkan kode untuk menampilkan gambar, musik, video atau animasi flash. Namum, di sini anda tak bisa memasukkan kode Javascript karena Friendster tak mengijinkan hal itu. Tapi di tutorial-tutorial berikutnya, kita akan mengakalinya sehingga kita masih tetap bisa memasukkan javascript bahkan Iframe.

CSS Box

CSS Box mengatur masalah tampilan Frienster. Disinilah desain induk tampilan friendster kita dibuat. Disinilah kita dapat memasukkan kode-kode CSS yang akan mengatur masalah background, warna dan huruf serta garis-garis yang akan kita pakai di friendster.

Di tutorial-tutorial berikutnya. Kita akan sering sekali mempergunakan 2 box diatas. Saya harap kamu bisa menghafalnya dan paham betul bagaimana cara mengakses halaman Costumize ini.


3. Modifikasi Komentar

Berikut ini kode yang mungkin kamu butuhkan untuk mengubah huruf testimonial, tanggal, dll.

Masukkan saja kode berikut kedalam CSS Box kamu.

/* STYLES FOR TESTIMONIALS */
/* #1 */
.left_column_testimonials_content a strong,
.left_column_testimonials_content a:active strong,
.left_column_testimonials_content a:visited strong,
{ font-size:10px; color:#000000 !Important; font-weight:normal;
font-style:normal; text-decoration:underline; }
.left_column_testimonials_content a:hover strong,
{ font-size:10px; color:#000000 !important; font-weight:normal;
font-style:normal; text-decoration:overline; }
/* #2 */
.left_column_testimonials_content .date
{ font-size:10px; color:#000000 !important; font-weight:normal;
font-style:normal; text-decoration:none; }
/* #3 */
.left_column_testimonials_content
{ color:#000000 !important; }
/* #4 */
.testimonialbody
{ font-size:10px; line-height:normal; border:none; color:#000000;
font-weight:normal; font-style:normal; text-decoration:none; }

Kode diatas berisi 4 bagian :

Bagian #1 mengontrol tampilan nama temanmu. Saat normal atau saat ada mouse diatasnya.
#2 untuk tanggal testimonial
#3 untuk warna divider antara nama dan tanggal
dan #4 untuk text testimonial.

Kamu juga bisa menempatkan kotak yang bisa discrolling pada testi. Caranya, tambahkan kode ini di bawah kode diatas :

/* TESTIMONIALS SCROLLINGBOXES */
div.testimonialbody{padding: 5px 2px 5px 2px;
overflow: auto; border:1px black solid; height: 80px; }

Untuk height bisa kamu ubah tingginya sesuka hati, misalnya 100px, 200px, dsb.

Ini ada kode lain yang bisa digunakan untuk memasang scroll pada testimonial box :

/* SCROLLABLE TESTIMONIALS BOX */
#testimonialsContent{height:250px; overflow:auto;}

Silahkan dicoba-coba sendiri yah,...

4. Memasang Komentar Rahasia

Ada kalanya kamu bikin website dengan kode yang panjangnya amit-amit dan sangat rumit. Dan ketika di jalankan ..eh..ternyata ada bagian yang nggak bisa nongol dengan sempurna. kamu lalu nyari di mana letak kesalahan..satu persatu..fuiiih capek khann ?? Hal itu nggak akan terjadi kalo kamu nempatin tag ini di setiap bagian web site :



Yup cukup ini aja, bisa pula kamu tambahin menjadi seperti ini biar jelas



Tempatkan di awal tabel menu, form isian atau bagian lainnya. Dan saat bagian itu tak berfungsi normal, kamu tinggal nyari komentar yang udah kamu sisipkan. Tag ini takkan muncul di browser, tapi ketika kamu melihat source code nya maka komentar ini akan muncul.

Biasanya komentar ini digunakan pada website yang memiliki script yang sangat panjang dan rumit.


4. Cara Jitu Punya Banyak Teman

Di Frendster Tutorial kali ini kita akan membagi cara jitu untuk mendapatkan banyak teman. Ya, walaupun banyaknya teman bukan ukuran pasti seseorang itu baik atau bukan, tapi jika kamu punya banyak teman, tentu aja kamu akan dianggap supel dan gaul. Nah, disamping sering-sering Add teman, ada cara yang lebih cepat dan mudah :

Chatting

Yup, dengan chating kamu akan punya banyak kenalan dan tentu aja bisa langsung mendapat teman yang sedang online. Kamu bisa minta email mereka dan merekapun bisa mendapatkan emailmu. Dengan melalui chatting kesempatan meraih teman akan terbuka luas.

Add Temannya Teman

Berikutnya kamu bisa menjelajahi profile teman-teman yang udah jadi temanmu. Lihat siapa aja teman mereka dan langsung aja Add mereka. Untuk meng-Add temennya temen kamu ndak perlu email, jadi kamu bisa memperbanyak Add.

Rubah Profile

Seperti kamu tahu, bahwa FS mengurutkan daftar teman berdasarkan nama kemudian umur. Nah, pertama kita perlu merubah nama dulu karena inilah menjadi ukuran pertama. Gunakan tanda petik diawal namamu ( ' ) Pasanglah 3 sampai 4 tanda petik. Insya Allah namamu akan selalu muncul di daftar nama teman-temanmu, dan peluang untuk dikunjungi makin besar. Contohnya : ' ' ' 'Bagio

Penggunaan tanda petik sudah sangat lazim, sehingga jika temanmu memiliki tanda petik juga di depan nama mereka, itu akan menyusahkan. Maka setelah tanda petik gunakan juga huruf A misalnya :' ' ' 'Aa Bagio

Gunakan Script Auto Add

Nah, dengan script auto add ini, setiap orang yang mengunjungi FS mu, akan menjadi temanmu. Kamu tinggal pilih aja mana yang di Approve dan mana yang di tolak..hehehe.. Bagaimanakah scriptnya? Pertama kamu kudu punya data FSmu sebagai berikut :

1. Friendster User ID
2. Emailmu

Cara mendapatkan Friendster User Id sangat gampang, lihatlah profilemu sendiri kemudian perhatikan URL profilemu (lihat gambar)

Tapi kadangkala alamat URLmu udah dirubah, maka gunakan cara yang kedua yaitu :

1. Lihat saja profile Friendstermu.
2. Di menu bar klik View > Source. Akan muncul source dari Friendster.
3. Tekan Ctrl + F lalu masukkan kata "pageViewerID" nanti akan ada angka yang merupakan ID mu

Selanjutnya masukkan UID dan Emailmu di kode berikut :

<font" color="#ff0000"><strong>User_ID</strong></span>&email=<span style="color:#ff0000;"><strong>emailmu</strong></span>&submit=1<br> WIDTH=40 HEIGHT=1>

Gantilah User_ID dan emailmu dengan milikmu sendiri. Setelah selesai, selanjutnya kamu perlu menggunakan Friendster Generator. Silahkan klik disini.

Masukkan kode diatas ke dalam kotak pertama yang tersedia. Lalu tekan Compile

Scroll ke bawah dan anda akan mendapatkan kode yang aneh, copylah kode tersebut lalu masukkan ke Media Box

Tekan save dan selesai. Tugasmu sekarang adalah membuat orang lain melihat profilemu, dan begitu mereka membuka profilemu, dia akan langsung jadi temanmu. Dan kamu tinggal memilih aja, mau menerimanya atau menolak...hehehe...

5. Mengganti Thema

Friendster telah menyediakan aneka Themes untuk profile kita. Dengan memakai themes2 ini, kamu tak perlu lagi pusing-pusing memikirkan kode-kode dan design profile Friendster. Namun, sesuatu yang mudah tentu punya kekurangan. Yaitu kamu ndak bisa merubah-rubah tampilan profile kamu. Kamu hanya menerima apa adanya. Jika memang ini yang kamu mau dan kamu siap menerima kekurangan yang ada, maka mari kita belajar menggunakan themes friendster yang udah siap pakai.

Pertama kamu kudu masuk ke halaman Costumize. Cara masuk halaman costumize udah dijelasin di pelajaran sebelumnya tentang dasar-dasar design profile friendster. Kalo lupa, langsung aja klik disini.

Setelah berada di halaman Costumize, kamu bisa langsung scroll ke bawah dan kamu akan mendapati aneka themes friendster yang siap pakai.

Langsung klik tanda lingkaran di bawah themes yang kamu inginkan. Setelah itu tinggal klik save dan beres. Jika kamu ingin membuat themes sendiri nantinya, maka pilihlah No Skin/Custom CSS seperti yang ditunjukkan pada lingkaran.



Sumber:gudanginfo.web.id




Tutorial Friendster Overlay



http://3.bp.blogspot.com/_nme-f6MhZA4/R3Bpiuq-WDI/AAAAAAAAAGo/37VU2pGc16Q/s200/friendster.jpgBagi anda yang sudah mulai jenuh dengan profil friendster anda yang biasa-biasa saja, kini anda dapat membuat tampilan profil friendster anda menjadi lebih menarik sesuai keinginan dan kreasi anda sendiri. Pada posting kali ini, saya akan mencoba sedikit menguraikan bagaimana langkah-langkah untuk membuat profil friendster overlay layout.

Pada dasarnya membuat profil overlay pada friendster ini prinsipnya sama dengan membangun halaman web sendiri. Dalam proses pembuatannya kita bisa menggunakan desain web HTML, XHTML, JAVASCRIPT, DHTML, atau bahkan kita bisa menyisipkan web FLASH yang ditanam dalam HTML, nyaris tanpa batasan! Kita pun bisa menggunakan media Dreamweaver, MS Frontpage, dan HTML editor lainnya dalam membuat desain profil friendster overlay tersebut, tergantung kemampuan kita…

Kemudian desain web yang telah kita buat tersebut akan tampil meng-cover-i halaman profil friendster semula, proses ini lebih umum dikenal dengan deface. Sehingga profil friendster yang akan muncul adalah halaman web yang telah kita buat tadi. (Keren bukan?)

Nah jika anda tertarik anda bisa memulai membuat desain profil friendster sendiri. Berikut ini adalah langkah-langkahnya:

Seperti yang telah dijelaskan pada uraian di atas, jelas sekali bahwa langkah pertama yang mutlak dan harus kita lakukan adalah membuat desain web sendiri sebagai tampilan halaman profil friendster kita nanti. Dan berikut ini adalah kode atau tautan yang terdapat pada halaman profil friendster asli yang bisa anda gunakan (sangat disarankan):

Navigasi Utama
Home -> http://www.friendster.com/home.php
My Profile -> http://www.friendster.com/user.php
My Friends -> http://www.friendster.com/friends.php
Explore -> http://www.friendster.com/explore.php
Search -> http://www.friendster.com/gallery.php
Video -> http://www.friendster.com/video.php
Review -> http://www.friendster.com/reviews/
Blogs -> http://www.friendster.com/blogs.php
Groups -> http://www.friendster.com/group/mygroup.php
Invite -> http://www.friendster.com/invite.php

Navigasi Lainnya
What’s New -> http://www.friendster.com/splash.html
My Messages -> http://www.friendster.com/messages.php
Settings -> http://www.friendster.com/editaccount.php
Help -> http://www.friendster.com/custhelp.php
Log Out -> http://www.friendster.com/logout.php

Navigasi Profil
Add As Friend -> http://www.friendster.com/addfriendrequest.php?uid=USERID
Send Message -> http://www.friendster.com/sendmessage.php?uid=USERID
Forward to Friend ->http://www.friendster.com/referafriend.php?refer=USERID
Add Testimonial -> http://www.friendster.com/testimonials.php?action=add&uid=USERID
Add Bookmark -> http://www.friendster.com/bookmarks.php?action=add&uid=USERID
Send a Smile -> http://www.friendster.com/sendmessage.php?uid=USERID&action=sendsmile
Invite to Group -> http://www.friendster.com/group/inviteone.php?uid=USERID
Add Comment -> http://www.friendster.com/publiccomments.php?uid=USERID

Lihat Semua
View All Comments -> http://www.friendster.com/publiccomments.php?uid=USERID
View All Testimonials -> http://www.friendster.com/testimonials.php?uid=USERID
View All Friends -> http://www.friendster.com/friends/USERID
View All Photos -> http://www.friendster.com/photos/USERID

Jangan lupa untuk memasang logo Friendster (http://images.friendster.com/images/logo-whitebg.gif) dan memasukkan kode original footer Friendster di bawah ini supaya tidak di banned dari Friendster, OK?


About Us |
Contact Us |
Promote My Profile |
Help |
Terms of Service |
Privacy Policy

Copyright 2002-2007 Friendster, Inc. All rights reserved. U.S. Patent No. 7,069,308 & 7,117,254

Catatan:
Ganti kode USERID yang dicetak tebal di atas dengan User ID Friendster anda yang berupa angka-angka. Misalnya URL Friendster anda http://www.friendster.com/99999999 maka User ID Friendster anda adalah 99999999.

Nah, bagi anda yang belum memulai membuat desain sendiri anda bisa mencoba dengan kode HTML yang sangat sederhana ini untuk awalan alias percobaan. (Tapi bagi yang sudah berhasil mendesain sendiri anda bisa memakai kode HTML dari web profil friendster buatan anda sendiri tersebut. Ini yang bener, bukan percobaan lagi!)






Kode Telah Berhasil!!!!!

Langkah selanjutnya adalah masuklah ke situs ini, dan akan tampil kotak-kotak dan petunjuk-petunjuk seperti gambar di bawah ini.

http://2.bp.blogspot.com/_KL7_V6HnzdI/Rvy_lH8HEsI/AAAAAAAAAa4/IBEFCY02Dnc/s400/friendster+overlay+layout.JPG

Step 1, masukkan kode HTML profil friendster desain kita sendiri tadi (atau bagi yang belum bikin, bisa kopi paste kode HTML yang sangat sederhana di atas untuk percobaan) ke dalam kotak yang paling atas pada gambar di atas, kemudian klik tombol GENERATE. Lalu, pada kotak yang di bawah akan muncul kode hasil generate. Copy paste semua kode tersebut ke dalam kotak Friendster Profile Customization bagian Add Media. Setelah itu klik Save untuk menyimpan. Setelah selesai tersimpan, cobalah melihat profil friendster anda, rasakan bedanya!

http://4.bp.blogspot.com/_KL7_V6HnzdI/ReRqTkCDS3I/AAAAAAAAAFI/jY7DA08X1-g/s400/friendster+edit+customize.JPG
Profil Friendster Overlay anda akan muncul segera beberapa detik setelah halaman asli friendster anda telah ter-load, dengan catatan browser anda tersupport dengan plugin flash. (Sepanjang saya mencoba, profil friendster overlay saya bisa muncul setelah kurang lebih 5 detik sampai 1 menit setelah halaman profil friendster yang asli muncul, tergantung kecepatan internet :D)

Oiya, berikut ini adalah daftar beberapa Overlay Add-Ons yang bisa anda gunakan untuk kelengkapan friendster overlay layout anda:

Auto Update Testimonials


Kode di atas akan menampilkan testimonial anda pada kode HTML anda, letakkan pada sebarang tempat dimana anda ingin menampilkan testimonial anda. Anda bisa mengedit bagaimana tampilan dari testimonial dengan menggunakan kode CSS. Berikut ini style CSS untuk testimonial yang saya gunakan: (Anda bisa merubah huruf, warna dan ukuran huruf dan gambar)

#aut{width:100%; font-size:8.5pt; font-family:Verdana; color:#333333; padding:0px 5px 0px 5px; overflow:hidden;}
/** pics **/
.imgblock75 img{width:50px; overflow: hidden; border:#586278 2px solid !important; margin-right:5px !important;}
.itd{vertical-align:top;}
/** testimonial contents **/
.dtd{padding-bottom:5px; margin-bottom:5px; font-size: 8.5pt; font-family:Verdana; color:#333333;}
/** names **/
.title a:visited{text-decoration:none; color:#003399;} .title a:link{text-decoration:none; color:#003399!important; font-size:8.5pt; font-weight: bold;}
.title a:hover{color:#FF0000!important; text-decoration: none; font-weight: bold;}
/** view all and add a testimonial links **/
.viewall a{padding-bottom:5px; text-align:center;}
.viewall a:hover{color:#FF0000;}
.viewall{text-align:center!important;}
h2{display:none;}
.data li{list-style-type:none;}
.data{padding:0; margin:0;}

Auto Update Comment:

Anda bisa merubah tampilan dengan menggunakan CSS juga.

Who Viewed Your Profile (Cbox mode)
Daftar di http://cbox.ws kemudian anda akan mendapatkan kode dari Cbox.
Contoh kode dari Cbox yang anda dapatkan adalah sebagai berikut:







Ubah kode di atas sesuai dengan warnanya:
merah = box id anda
green = box tag anda
blue = hapus kode yang berwarna biru, tidak terpakai
pink = ganti cboxmain menjadi cboxmainche

Tambahkan kode di bawah ini di sebarang tempat dalam tag anda

Sekarang pilih Module anda, ada dua module pada Cbox, yaitu pst dan cstr… Jadi jika anda mencoba melihat profil anda menggunakan account friendster yang lain kemudian jika ada kotak peringatan yang berbunyi “Enter a message”, maka yang harus anda lakukan adalah mengganti Module.

Auto Update Shoutout

Anda bisa merubah tampilan Shoutout dengan menggunakan CSS:


#AUSOid{ font-family:”Comic Sans MS”; font-size:18px; color:#999999}

Last Login Code/Profil Viewer Code

Auto Update Main Photo

Auto Update Friends

Anda bisa merubah tampilan dengan menggunakan CSS:
/** images **/
.ir img {height:75px; width:75px; overflow: hidden; border:#9bcfe7 2px solid;}
.ir a:hover img {filter:alpha(Opacity=50,FinishOpacity=0,Style=0);}
/** caption **/
.dr a {font-family: century gothic, verdana; font-size: 10px; text-align: center; text-decoration: none; color: black;}
.dr a:hover {font-weight: bold;}
.flogriditem {padding-bottom: 5px; padding-top: 5px;}

Featured Friends

Auto Update Groups

Sumber: http://anangku.blogspot.com

Tutorial CSS Friendster (Layout Profile)


My Profile lalu klik Customize Page lalu cari kotak dibawahnya tulisan ini:
Prefer to make the changes to the CSS directly?
No problem. Simply click the Download CSS file link below, edit and paste your new CSS in the input box below.
Download CSS file | Customize with CSS editor

Copy semua code dibawah ini dan Paste di tempat tadi.
------------------------------------------

/* PROFILE BACKGROUND */

body { background-image:url(http://i17.tinypic.com/4vn2j3p.jpg); background-attachment:fixed; background-position:center; background-repeat:repeat; background-color:#000000; }

/* GLOBAL FONTS */
.usercontent { font-family:Arial, Sans-serif; color:#ffffff; }

/* GLOBAL LINKS */
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:active { text-decoration:none; color:#ffffff; }
.data a, a.more, .commonbox .viewall { font-family:Arial, Sans-serif; color:#ffffff; }
.usercontent a:hover { text-decoration:none; color:#ffffff; }

/* GLOBAL HEADERS */
.commonbox h1, .commonbox h2 { font-family:Arial, Sans-serif; color:#ffffff; background-color:transparent; }

/* GLOBAL BOXES */
.commonbox { border-width:0px; border-color:transparent; border-style:solid; background-color:transparent; }

/* TESTIMONIALS EVEN ROW */
.commonbox .evenrow { background-color:transparent; }

/* PRIMARY PHOTO BORDER */
.controlpanel .imgblock200 { border-color:transparent; }

/* DATA / LABELS */
.data, .controlpanel .q { color:#ffffff; }

/* BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited { font-family:Arial, Sans-serif; color:#ffffff; border-color:transparent; background-color:transparent; }
#controlPanelButtons a:hover { color:#000000; border-color:transparent; background-color:#ffffff; }

/* PHOTO BLOCKS */
.commonbox .imgblock75, .ir { border-width:5px; border-color:#000000; border-style:groove; background-color:#000000; }

/* FRIENDS NAME BG */
.commonbox .dr { background-color:transparent; }

---------------------------------

Selanjutnya kita melangkah ke otak atik code tersebut...

Sebenarnya code dasar diatas adalah seperti dibawah ini:
body { %element }
.usercontent { %element }
.usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:active { %element }
.data a, a.more, .commonbox .viewall { %element }
.usercontent a:hover { %element }
.commonbox h1, .commonbox h2 { %element }
.commonbox { %element }
.commonbox .evenrow { %element }
.controlpanel .imgblock200 { %element }
.data, .controlpanel .q { %element }
#controlPanelButtons a, #controlPanelButtons a:link, #controlPanelButtons a:visited { f%element }
#controlPanelButtons a:hover { %element }
.commonbox .imgblock75, .ir { %element }
.commonbox .dr { %element }

Namun untuk memudahkan anda maka diberikan judul bagian (kelompok) pada tiap komponen. selain itu, pada bagian dalam tanda kurung tersebut, itulah yang akan kita masukkan code sesuai dengan keinginan kita.
pada bagain body { background-image: url(http://i17.tinypic.com/4vn2j3p.jpg); background-attachment:fixed; background-position:center; background-repeat:repeat; background-color:#000000; } ini kita dapat mengambil gambar apa saja pada URL yang ada atau gambar hasil upload kita dengan menentukan URL-nya. cara mudah adalah anda boleh menggunakan fasilatas google seacrh yang ada pada sebelah kiri atas atau pada bagain bawah telis sesuai content yang anda kehendaki lalu pilih image nantinya.
selanjutnya, background-attachment:fixed; itu artinya pemasangan backgroud disesuaikan
background-position:center; pada posisi tengah
background-repeat:repeat; artinya bila gambar tersebut kurang pass maka akan diulangi gambar tersebut hingga full ukuran dan apabila kita ganti dengan no repeat; maka satu aja gambarnya dan akan sesuai ukuran gambar tersebut.
-----
selanjutnya pada .usercontent { font-family:Arial, Sans-serif; color:#ffffff; } jenis huruf apa yang anda mau gunakan pada pda content kamu dan termasuk color:#ffffff; =f 6x artinya code untuk warna putih, bila anda ingin merubahnya dengan warna lain anda boleh melihat codenya di sini.
-----
selanjutnya pada .usercontent a, .usercontent a:link, .usercontent a:visited, .usercontent a:active { text-decoration:none; color:#ffffff; } ini merupakan pampilan link, yang dimaksud dengan pada profile friendster adalah seperti:

* Profile Viewed:82 times since 8/8/2007
* Location: Indonesia
* Hometown: Ga punya Kota
*

Your URL [edit]:
http://profiles.friendster.com/ID anda

Kalau kita ambil code di atas maka warna keseluruhan pada link itu nantinya akan sama, baik pada saat diklik maupun yang sedang aktif, nah bila kita ingin tampilnya beda, maka kita boleh pisahkannya seperti contoh dibawah:

a:link {
color: #1b2a6f;
}
a:hover {
cursor: HAND;background:url('http://img02.picoodle.com/img/img02/7/2/8/f_h2rbgm_0dbe996.jpg');
}
a:visited {
color: #1b2a6f;
}
----------
pada a:hover di atas, bila cursor menyentuh link maka akan tampil gambar, atau boleh juga dengan menggunakan warna saja.. itu terserah anda.
-------
saya nda perlu jelaskan semuanya karena saya yakin, dengan melihat dan mempraktekkan hal tersebut diatas. anda sudah mengerti.
paling yang membedakan langkah selanjutnya adalah seperti background-color:transparent;
nah itu adalah tanpa warna alias transparan, adapun selebihnya itu kan permainan warna saja.
ingat..!! setiap anda membuka dengan { maka jangan lupa menutupnya }, sebab kalau tidak pasti akan terjadi error.
salam .... dan bila ada yang kurang di pahami silahkan tanyakan dan berikan komentar anda... semoga membantu. eh tunggu dulu yang mau belajar CSS Multiply ada di sini

LIHAT CONTOH TAMPILANNYA SINI


Pasang Status YM di FS

Memang benar bahwa friendster adalah media untuk berkomunikasi antar friendsterholic. Namun apakah bisa friendster membuat suatu cara agar si pengirim pesan dapat berkomunikasi pribadi denga yag dikirimi pesan. Ada seehhhh.....tapi hany sekedar kirim pesan melalui menuadd message. Padahal para komunikator tersebut ingin berkomunikasi dengan cepat waktu itu juga. Salah satu fasilitasnya adalah chatting . Jika kedua komunikator sedang online dalam FS, mereka dapat berkomunikasi lebih private dengan chatting. Namun, bagaimana caranya agar kedua belah pihak mengetahui apakah lawannya onlie atau tidak?????


Permasalahan di atas dapat diatasi dengan menampilkan status Yahoo!Messenger (YM) di profil FS kita. Jadi, tidak hanya blogger saja yang dapat memasangnya. Ada beberapa style status YM.

http://2.bp.blogspot.com/_c-XFk4OciTE/R-w0H3lUhxI/AAAAAAAAAgI/XgVK4-A28Tc/s1600/icon-ym.jpg

Angka 1 sampai 9 adalah Style yang dapat dipilih.
Masing-2 mempunya alamat URL sendiri, yaitu:





Dari kode di atas, silahkan masukkan ID YM sobat dan nomor gambar/style status.

Copy kode di atas dan paste di tempat yang sobat kehendaki.

Silahkan mencoba, semoga berhasil.......
Saya punya satu pesan, mungkin beberapa hari ke depa saya tidak rutin mengisi artikel di blog ini. Alasannya sekarag saya sedang libjuran di rumah(mojokerto). Biasanya saya tiap hari onlie karena berada di kampus yang ada fasilitas wifi-nya. Berhubung di rumah ga' ada internet, saya harus pergi ke warnet. Tapi kalo sering ya tekor.
Mohon dimaklumi anak kos.....

Buat Tulisan Bergaya Web Online


Memang lebih baik kita buat tulisan yang bagus dengan software pengolahnya. Namun, bagi kita yang tidak memiliknya atau tidak bisa membuat sendiri (seperti saya) lebih memilih jalan pintas lewat internet untuk membuatnya. Hasilnya tidak begitu mengecewakan seperti di bawah ini :

http://3.bp.blogspot.com/_CLK_QGYy_40/SLonghgwk3I/AAAAAAAAAHg/cSopuasd7RY/s320/ramadhan.pngUntuk membuat tulisan seperti di atas, sobat hanya perlu kmputer dan koneksi internet saja tanpa memiliki software pembuatnya, seperti photoshop, coreldraw, dsb. Salah satu situs yang meyediakan layanan ini adalah web2.ostylr.com. Sobat hanya perlu menuliskan kata-kata yang diinginkan kemudian klik tombolnya. Masih bingung? OK deh saya jelaskan langkahnya satu per satu :

1. Silahkan kunjungi situsnya.

2. Tuliskan kata-kata yang ingin anda buat di bawah tulisan Logo Text. contoh :Marhaban Ya Ramadhan

3. Klik drop down menu di bawah tulisan Logo Font untuk memilih jenis dari huruf yang di inginkan.

4. Tulis alamat URL untuk gambar icon di bawah tulisan URL For Icon Image (Optional) jika mau.

5. Tulis alamat URL web atau blog anda di bawah tulisan Your URL Jika mau.

6. Pilih warna awal yang di kehendaki di bawah tulisan start gradient.

7. Pilih warna akhir yang di kehendaki di bawah tulisan end gradient.

8. Pilih Gradient Blend type nya di bawah tulisan Gradient Blend Type.

9. Pilih warna background yang di kehendaki di bawah tulisan bgcolor.

10. Klik tombol bertuliskan Web 2.0 Styl It!. Tunggu beberapa saat.

11. Klik kanan pada tulisan yang sudah jadi (di sebelah kanan), kemudian pilih Save Image As... jika anda memakai mozilla firefox browser atau Save Picture As... jika anda memakai internet explorer.

12. Simpan pada komputer anda.

13. Silahkan upload gambar tersebut (karena tulisan yang anda buat sebenarnya adalah sebuah gambar) pada image hosting yang biasa anda pakai bisa juga disimpan di album FS sobat.
14. Silahkan tampilkan di blog anda agar blog anda tampak lebih ciamik...

15. Selesai.

Gimana???mudah bukan. Sekarang sobat sudah punya tulisan bergaya web di FS. Tentang bagaimana cara menampilkannya pada prfil FS, di bawah ini caranya :

1. Buka gambar yang telah sobat simpan di image hostingan sobat atau di album pada FS sobat masing-masing.
2. Copy alamat URLnya.
3. Paste di bagian who i want to meet, about me, dan sebgainya yang penting dapat dimasuki kode HTML.
4. Paste alamat URL tersebut di dalam kode HTML gambar. Lupa???



5. Klik save
6. tunggu berapa saat dan lihat hasilnya...

Beres kan.....
Silahkan berkreasi dan jangan lupa kunjungi iklan-iklan di blog ini biar saya dapat terus memberi informasi baru tentang FS atau blog. Maklum kalau di warnet kan harus bayar, jadi harus butuh dana.

Oh ya hampir lupa, kalau mau berkomentar di blog ini saja ya jangan di FS biar rame.

Cara buat tulisan nge-blink (kedap-kedip)

Beberapa teman setelah melihat , tertarik dengan tulisan yang berkedip. Pertamanya sih aku sedikit malas membahasnya di sini, tapi koq semakin lama semakin banyak yang bertanya. Lama kelamaan aku juga capek menerangkan caranya satu persatu. Oleh karena itu, lebih baik aku tuliskan saja di sini. Untuk membuat tulisan berkedip seperti ini, kita membutuhkan kode HTML

tulisan sobat

. Gimana???sedikit kan kodenya. Inilah yang membuat saya malas untuk menerangkannya.

Namun, terasa kurang berseni jika membuatnya tanpa dihiasi atribut-2 lain. Kita dapat memodifikasinya dengan menyetting ukuran huruf, warna huruf, memasukkan link, dan memasukkan kode marquee (sebaiknya jangan dimodifikasi dengan marquee(tulisan berjalan) karena terlalu modif dan membingungkan pembaca).

Pertama kita akan memodifikasi tulisan blink dengan menyetting ukuran dan warna huruf agar lebih menarik. Cara menyetting hurf dapat dibaca di sini. Tapi okelah saya akan membahasnya sedikit.

1. Langkah pertama silahkan copy kode ini.

tulisan sobat

2. Silahkan ganti ukuran huruf pada size, warna pada color, dan tipe pada face. Untuk tipe harus ditulis dalam satu huruf, seperti times_new_roman. Banyak dari sobat blog ini yang tidak berhasil mengaplikasikan kode-2 termasuk kode ini. Hal ini disebabkan karena salah dalam meletakkan kode HTML, contohnya pada kode HTML di atas. Kode untuk setting huruf harus ditulis dahulu sebelum kode blink.
3. Paste kode tersebut pada profil sobat atau kirim pada komentar.
4. Beres kan...

Hasilnya : tulisan sobat

Modifikasi selanjutnya adalah memasukkan link ke dalam tulisan ngeblink tersebut. Cara nge-link tulisan dapat sobat baca di sini. Langkah-langkahnya sih tidak jauh berbeda dengan cara di atas, yang penting kita harus memperhatikan kode mana dulu yang harus ditulis.

1. Copy kode berikut

nama link

.

2. Kode di atas dapat diubah, seperti alamat URL-->isi dengan URL yang sobat kehendaki; jika sobat menginginkan menampilkan link pada window asli, hapus kode target="_blank"; link tersebut dapat sobat tampilkan dengan kata yang sobat kehendaki, caranya ganti tulisan nama link.
3. Paste kode tersebut di tempat yang seharusnya (masa' harus saya beritahu lagi tempatnya).

Contoh hasilnya jika saya memberi link alamat URL blog saya seperti ini friendster tutorial. Jika hasilnya seperti itu, maka kode harus diubah seperti berikut.

friendster tutorial

Untuk membuat tulisan nge-blink tersebut berjalan, silahkan tambah dengan kode marquee. Cara membuat tulisan berjalan juga dapat dilihat di sini atau di sini. Daripada kelamaan baca lebih baik copy kode ini saja

tulisan sobat

. Hasilnya seperti di bawah ini :


Otak-atik sendiri saja, kalau masih ada yang kurang paham silahkan tulis pada komentar blog ini. Kalau pesannya panjang, ya jangan ditulis pada shoutbox. Silahkan mencoba semoga berhasil. Kalau belum berhasil, harus ditingkatkan lagi amalnya he...he... :)


Membuat tulisan berjalan

Rasanya tangan saya gatal ketika beberapa hari tidak mempostingkan tulisan pada blog ini. Ya...maklumlah karena ini blog pertama saya, dan lagi pada tingkat mood yang tinggi untuk menulis artikel. Pada saat saya mempostingkan artikel ini, kalender menunjukkan tanggal 21 Juli 2008, yang artinya dua hari sebelum pilkada Jatim dilangsungkan. Yang menjadi masalah bagi saya adalah apakah saya ikut mencoblos atau tidak. Peristiwa ini menjadi menarik bagi saya karena ini adalah kali pertama saya ikut nyoblos. Memang seehh...beberapa teman kampus mengacuhkan hal ini, karena mereka merasa tidak diuntungkan dengan adanya pilgub. Beberapa ada yang ngomong kalau dirinya tidak akan dapat apa-apa dengan ikut mencoblos. Okelah...pendapat seseorang perlu dihargai. Namun saya bertekad untuk ikut nyoblos karena ini adalah pengalaman pertama saya. Selain itu, inlah yang membedakan mahasiswa dengan orang biasa yang putus asa. GOLPUT????ENGGAK LHA...

Banyak-banyak baca ternyata Ayub ini cuma curhat tho...

Sorry, friends.

Langsung saja deh kita mulai belajar lagi. Kali ini kita akan belajar memodifikasi tulisan berjalan atau marquee yang telah saya postingkan beberapa waktu yang lalu. Kalau lupa, silahkan acak-acak blog ini untuk menemukan caranya (waduh...jangan diacak-acak deh nanti rusak...kunjungi saja halaman ini).

Sebenarnya banyak cara yang dapat kita lakukan untuk mempercantik tulisan berjalan, seperti dengan menambahkan background, memasukkan link, dan mengubah tampilan hurufnya. Untuk membuatnya memang kita perlu beberapa kode HTML lain.

Langkah pertama copy kode di bawah ini :

TULISAN BERJALAN SEDERHANA


sehingga hasilnya adalah :


Sobat di depan PC juga dapat mengubah gaya hurufnya dengan mengganti beberapa kode di bawah ini :
size-->ukuran huruf
color-->warna huruf
face-->jenis huruf (times new roman, algerian, comic, dll), kalau lebih dari satu kata, harus dijadikan satu kata. Contoh:times_new_roman

Modifikasi berikutnya adalah dengan menambah background pada tulisan berjalan seperti




Untuk membuatnya silahkan copy kode di bawah ini :


DILARANG MEROKOK RUANG BLOG INI BER AC



Silahkan ganti dengan yang sobat suka kode berikut :
BGCOLOR-->warna backgroun
width-->lebar background (sebaiknya 100%)

Kemudian untuk membuat marquee yang didalamnya terdapat link, sobat harus menambahkan kode HTML yang dapat digunakan untuk memasukkanlink ke dalam tulisan tersebut.
Caranya copy kode di bawah ini :


Alumni Smage

Stikom

Greenpeace

Gusdur






Hasilnya adalah sebagai berikut :













Ganti URL dan nama tampilan dari link tersebut dengan yang sobat kehendaki.

Setelah meng-copy kode-kode di atas, paste ke tempat yang sobat kehendaki (yang jelas ya di FS, masa' di rumah)
Klik save

Semoga tutorial saya di atas dapat berguna dan bermanfaat. Terus berkreasi dan jangan lupa membayar uang kos bagi sobat yang ngekos :)

Pasang Emoticons pada Friendster

Sebelum saya memulai membahas judul di atas, saya harapkan teman-teman menggunakan browser mozilla firefox untuk melihat semua hasil dari kode-2 di blog ini. Alasannya karena browser tersebut lebih maksimal daripada IE.
Pernah ketika kita pasang komentar di shoutbox suatu blog kita menggunakan fasilitas emoticons. Tidak hanya di blog, tetapi fasilitas itu juga dapat dimanfaatkan di Yahoo Messenger (YM). Salah satu pengunjung setia blog ini,, pernah bertanya pada saya via FS tentang bagaimana cara nambahin emoticons pada FS. Emoticons itu apa sih yub??? Emoticons adalah semacam simbol yang dapat disisipkan pada postingan blog, YM, bahkan FS yang menyimpulkan perasaan kita(menurut saya). Masih ga' tau juga??? Contohnya seperti http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gifhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gifhttp://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif.

Sebelum ada pertanyaan seperti itu saya juga berpikir bisa ga' ya? Tapi setelah melewati masa pertapaan selama satu jam, puasa selama satu jam, dan dengan bercucuran air mata, memeras keringat (hiperbola banget), akhirnya dapat juga deh caranya. Pada intinya, simbol-2 tersebut ada yang membuat. Kita tinggal memanfaatkan jasa beliau yang membuat. Bagi blogger, untuk menyisipkan ikon-2 seperti itu tidaklah sulit karena tinggal memasukkan kode HTML di templatenya dan untuk memunculkan simbolnya tinggal ketik :), :] , atau :>.

Bagaimana dengan friendster? Mau ga' mau kita harus memasukkan kode HTMLnya satu per satu (sorry aku sementara bisanya sampai situ dulu). Langkah-2nya adalah sebagai berikut :

1. Login ke FS sobat.
2. Pilih tempat yang mau disisipin emoticons (profil/testimonial teman).
3. Copy kode-2 yang tertera di bawah.
4. Paste ke tempat yang sobat inginkan.
5. Klik save untuk profil dan submit untuk testimonial.
6. Lihat hasilnya

Jika kita mengirimkannya ke teman, lebih baik coba dahulu di testi sobat.

Kode emoticons :

http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/6.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/9.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/15.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/16.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/17.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/18.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/19.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/23.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/25.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/26.gif



http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif




http://emonizer.googlepages.com/drinking22.gif




http://emonizer.googlepages.com/drinking24.gif




http://emonizer.googlepages.com/drinking33.gif




http://emonizer.googlepages.com/smiley_beer.gif




http://emonizer.googlepages.com/breakpc2.gif




http://i307.photobucket.com/albums/nn293/emonizer/em1/ambulance.gif




http://i307.photobucket.com/albums/nn293/emonizer/em1/ass1.gif




http://i307.photobucket.com/albums/nn293/emonizer/em1/ass8.gif




http://i307.photobucket.com/albums/nn293/emonizer/em1/bolakbalik.gif




http://i307.photobucket.com/albums/nn293/emonizer/em1/hammered2.gif




http://i307.photobucket.com/albums/nn293/emonizer/em1/movingthem3.gif




http://i307.photobucket.com/albums/nn293/emonizer/em1/sick10.gif




http://i307.photobucket.com/albums/nn293/emonizer/em1/thefinger11.gif




http://i307.photobucket.com/albums/nn293/emonizer/em1/waiting.gif






Sementara itu dulu ya...kalau ada emoticons lagi nanti saya postingkan (kalau tidak lupa). Kalau kode di atas terbukti berhasil, SMS eh maaf salah ...maksud saya kirim komentar ke blog ini ya atau bisa juga mencobanya dengan mengirimkan. Selamat mencoba

bye...bye.... http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/27.gif

Memodifikasi nama pada profil FS

Kali ini kita akan belajar memodifikasi nama profil kita. Memang...trik ini sudah banyak yang pakai, tapi ada juga teman yang masih bertanya pada saya. Nama profil terletak di bagia kir atas pada profil kita. Biasanya tertulis nama pemilik/samaran. Namun, kadang-kadang kita menemui profil FS dengan tulisan Arab atau simbol. Untuk membuat trik ini diperlukan aplikas MS.Word dan Notepad/Wordpad. Bingung???lihat contoh di bawah ini :http://4.bp.blogspot.com/_CLK_QGYy_40/SHxk25buxTI/AAAAAAAAAD4/TGyPPlVJuGQ/s320/Untitled.jpgDalam contoh tersebut terdapat tulisan THE PRESIDENT dan Tulisan Arab. Langkah-langkah membuatnya adalah sebagai berikut :

Langkah 1 :
Buka aplikasi MS.Word, kemudian pilih menu insert-->symbol.
http://1.bp.blogspot.com/_CLK_QGYy_40/SHxmbxanzXI/AAAAAAAAAEA/fiU1m-YANIA/s320/Untitled.jpgSetelah mengklik symbol, anda akan menemui sebuah jendela baru dari menu symbol sebagai berikut :
http://2.bp.blogspot.com/_CLK_QGYy_40/SHxnWBXrAdI/AAAAAAAAAEI/e8J6S7jJ04o/s320/Untitled.jpgSetelah sobat memilih simbol, klik insert. Sobat dapat memilih lebih dari satu simbol.

Langkah 2 :
Copy tulisan yang sudah sobat buat di MS. Word, dan paste di notepad/Wordpad.
http://3.bp.blogspot.com/_CLK_QGYy_40/SHxovKWw5lI/AAAAAAAAAEQ/z5TS2Q21YpI/s320/Untitled.jpgBerikutnya, copy lagi tulisan pada notepad.
Login ke friendster.
Pilih settings.http://2.bp.blogspot.com/_CLK_QGYy_40/SHxp1F53vRI/AAAAAAAAAEY/f9DwTk_46Sw/s320/Untitled.jpg
Kemudian sobat akan masuk halaman seperti di bawah ini :
http://1.bp.blogspot.com/_CLK_QGYy_40/SHxqOZglA3I/AAAAAAAAAEg/F7RFVQZEI9k/s320/Untitled.jpgPaste tulisan tadi ke kotak isian first name/last name.
Scroll ke bawah dan klik save.
Tunggu beberapa saat, maka nama profil sobat akan berganti.

Waduh...lupa belum sholat asyar...sholat dulu ya...
silahkan coba tutorial di atas, semoga berhasil


sumber::http://friendster-etutorial.blogspot.com/

Share this:

4 komentar :

  1. waduh aku lama banget g buka friendster jadi jarang edit-edit gini.
    nih tutorial panjang banget keren yang buat, kok g dipecah pecah atau pake nextpage ya.
    semangat terus deh byme
    http://websitegue.co.cc

    BalasHapus
  2. ga jelas tuh cara2 cari temen banyak pas bagian scrip auto add.

    BalasHapus
  3. Artikelnya bagus kata-katanya juga menarik mudah di cerna Trims ya infonya saya tunggu artikel selanjutnya, O..iya Teman saya lagi ikut lomba Speedy Blogging Competition 2008, dimana criteria penilaiannya blog adalah harus banyak pengunjung, posting dan komentar. Boleh saya minta komentar dari teman untuk artikel di blog saya? Kalau Boleh Kunjungi blog saya, hari ini saya sudah posting artikel tolong komentarnya ya dan kalau bisa komentarnya harus berkaitan dengan artikel yang di pilih teman. Ini alamatnya blog saya : http://regedit.blog.telkomspeedy.com/2009/01/21/produk-telkom-indonesia-bag-1/
    terima kasih banyak.

    BalasHapus
  4. Kliatannya dah pernah baca tutor ni sebelumnya

    BalasHapus

selamat berkomentar, Bebas..... asal sopan....

 
Copyright © 2014 I'm Blogger, Facebooker and Kaskuser.... Designed by OddThemes | Distributed By Gooyaabi Templates