Cuman sedikit tutorial sederhana memasang shoutbox di Friendster. Sebenarnya banyak sekali penyedia layanan shout box di Internet, kalian bisa googling aja. Shoutbox adalah kotak pesan otomatis seperti halnya yang ada di blog ini. Dalam tutorial ini kami coba gunakan shoutbox dari CBox (http://cbox.ws/). Sebenarnya kami cukup lelah juga kalo harus jelasin satu-satu mulai dari proses registrasi, so kami asumsikan kalian sudah cukup tau tentang bagaimana mendaftar di CBox, kalau sudah daftar dan punya account silahkan login dan setup tampilan shoutbox sesuai keinginanmu.
Jika setup telah selesai kamu akan diberi kode yang harus kamu letakkan di template tampilan layout (biasanya di Mysapce sich) tapi kalau di Friendster bisa juga diletakkan di Blog Friendstermu.
Berikut contoh kode yang diberikan oleh cbox:

Ada dua link url penting (selanjutnya kita sebut SRC saja ya..).
Yang pertama

Code :
http://www4.cbox.ws/box/?boxid=3116217&boxtag=4864&sec=main

src diatas merupakan src utama yang akan menampilkan semua pesan yang telah diposting di shoutbox mu.
Dan src yang kedua adalah:

Code :
http://www4.cbox.ws/box/?boxid=3116217&boxtag=4864&sec=form

src kedua ini merupakan src yang akan menampilkan kolom (form) yang harus diisi oleh pengunjung saat ingin meninggalkan pesan. Kedua src tersebut jangan sampai salah dalam meletakkan.
Read more | Baca lagi

Tutorial ini berguna untuk meletakkan icon, banner, atau gambar apapun di bagian bawah kolom kontrol panel profile friendster dengan menggunakan java script. Tentang bagaimana menambahkan JavaScript di Friendster silahkan lihat postingan berikutnya di blog ini dgn judul 'Cara Menggunakan JavaScript di Friendster'.

Cara penggunaannya adalah:
[1] Siapkan icon, banner, gambar, foto berukuran sedang. Sebaiknya tidak terlalu besar agar profile FS-mu tidak berat waktu di load di browser.
[2] Upload terlebih dulu file gambar tersebut (kalo memang belum di upload untuk mendapatkan kode htmlnya - gunakan Imageshack atau Dompetfoto.).
[3] Copy paste kode berikut di Notepad atau text editor lain yang simple.

[4] Ganti tulisan 'KODE ICON/GAMBAR DI SINI' pada kode di atas dengan kode html link gambar/icon mu. (Lihat contoh:)

Code :
var friendstermod; try {friendstermod = document.createElement("div");} catch (e) {friendstermod = document.createElement("<div>");} friendstermod.innerHTML = "<a href='http://dompetfoto.org/'><img src='http://dompetfoto.org/img/arg563536.jpg' alt='Dompetfoto Free image hosting' border='0' /></a>"; friendstermod.setAttribute("style","text-align:center;padding-top:10px"); document.getElementById("controlPanelButtons").parentNode.appendChild(friendstermod);}

[5] Kemudian simpan dengan ekstensi JavaScript '.js' (sekali lagi lihat postingan sebelumnya).
Kemudian update kembali di bagian customize profile di kolom 'Media Box'. Read more | Baca lagi

Berikut merupakan trick menambahkan background pada kolom foto utama (Main Photo). Secara default memang belum ada background yang menarik di bagian Main Photo tersebut. Nah sekarang kamu bisa menambahkan background baik menambahkan foto tau cuma sekedar gambar animasi. Oke langsung aja berikut caranya.
[1] Siapkan foto atau gambar yang akan kamu jadikan background di kolom Main Photo.
[2] Buka situs image hosting kesukaanmu, saya akan gunakan Dompetfoto. Kamu juga bisa menggunakan Imageshack, Quick Upload atau Photobucket.
[3] Klik Browse->tunjukkan lokasi foto->klik upload.
[4] Kemudian copy link url yang diberikan (simpan di notepad dulu). Pilih yang 'direct url' to image. Jangan yang BBCode atau thumbnail.
[5] Copy-paste kode berikut (di notepad juga dulu)

Selanjutnya tinggal ganti tulisan 'GANTI URL' dengan url yang telah kamu dapatkan dari uploading foto tadi.
[6] Selanjutnya tinggal copy-paste-kan saja di Customize-> CSS section. Login di Friendster dulu.
Selesai. Read more | Baca lagi

Bagaimana cara menambahkan ekstensi Java Script di Profile Friendster kamu? Selama ini banyak cara untuk mempercantik tampilan profil FS kamu tidak hanya menggunakan CSS saja. Kamu juga bisa menggunakan JavaScript Extension untuk menambahkan efek tampilan yang dinamis dan cantik.
Apakah kamu masih baru tentang extensi Java script (.js) ini ? Oh iya, sebelumnya agar lebih mudah maka selanjutnya kita akan menyebut ekstensi JavaScript ini dengan .js saja, oke. Untuk mempercantik tampilan Friendster biasanya digunakan kombinasi antara C.S.S dan .JS namun masih banyak orang (Indonesia umumnya) yang belum mengetahui hal ini. Kebanyakan masih menggunakan .css saja untuk merubah tampilan layout friendsternya. Tweak lay out apa saja yang bisa digunakan dengan JS ini? masih banyak sekali kode-kode JS yang bisa digunakan untuk layout profile friendster, namun adanya perubahan2 yang tidak menentu oleh pihak Friendster sendiri yang melakukan sortir kode-kode yang bisa diaplikasikan menjadikan semua kode yang pernah ada tidak semuanya bisa digunakan. Namun para coder selalu berusaha untuk terus membuat inovasi untuk melakukan tweak aterhadap tampilan lay out friendster, so kita gak perlu kuatir.
Yang penting adalah pengetahuan mendasar tentang bagaimana menambahkan kode JS ini di layout friendster? dan itu yang akan coba kami jelaskan di bawah ini.
Langkah-langkah menyertakan Java script di Friendster.
[1] Buka text editor sederhana seperti Notepad, Wordpad, atau AbiWord dan Kate text editor (untuk linux). Atau jika di windows pada jendela explorer bisa dengan klik kanan -> New text Document (sama saja keluarnya juga notepad koq) ihiks..
[2] Setelah jendela Notepad terbuka silahkan copy-paste kan kode JS mu di sana. Kalo belum ada kamu bisa cari (kalo gak nemu sering2 buka blog ini dunk!!). Apa gak nemu beneran?ya gak perlu nangis deh. Ini sengaja sekalian kita sertakan contoh JavaScript Code (kode JS) di bawah ini.

Kode java script untuk menambahkan pesan "Welcome" di status bar (work di I.E. gak tau kalo opera n firefox)

Code :
<!-- // puchtit="]-[MY PROFILE ENJOY]-["; letrero2="·?¸¸.·´´+`··._.··.¸¸.·´´+`··._.·"; letrero1="·?¸¸.·´´+`··._.··.¸¸.·´´+`··._.·";ultimo1=letrero1.length-1; ultimo2=letrero2.length-1; tiempo=setTimeout("scroll()",.1); function scroll() { aux1=letrero1.charAt(ultimo1-1); letrero1=aux1+letrero1.substring(0,ultimo1-1); aux2=letrero2.charAt(0); letrero2=letrero2.substring(1,ultimo2+1)+aux2; window.status="(" + letrero2 + puchtit + letrero1 + ")"; tiempo=setTimeout("scroll()",.1); return true; } // -->

Blok semua kode di atas lalu klik kanan -> copy trus paste-kan di Notepad ya..

[3] Setelah itu save file tersebut dalam format .js atau klik menu 'File -> Save as' trus setelah dialog save as muncul segera ganti pada kolom 'Save as type' menjadi 'All files' kemudian pada kolom file name ketikkan nama file disertai imbuhan (extension) .js contoh nih 'animasi.js'.

[4] Kalo langkah di atas sudah benar kemudian klik 'SAVE'.
[5] Kemudian upload file .js tersebut di hostingmu. Kalo belum punya hosting silahkan cari dengan keyword 'Free Hosting' atao kalo masih bingung berikut cara mudah mengupload file .js pada langkah selanjutnya.
[6] Kamu bisa gunakan File hosting yang ada seperti Quick Upload emoticonizer (silahkan register dulu trus login.) dan RipWay .
[7] Setelah mendaftar (register) silahkan Login dan pilih menu 'My Files' (contoh saya gunakan Ripway).
[8] Setelah mengklik 'My Files' maka seharusnya kamu akan melihat link menu 'Upload File'
[9] Setelah itu klik tombol 'Browse' dan tunjukan sesuai letak file .js mu tadi disimpan. Kemudian langsung upload aja (gak usah nunggu besok deh).
[10] Jika file .js tadi sukses ter-upload maka kamu akan mendapatkan sebuah 'link' yang mengarah pada lokasi penyimpanan di server hosting mereka. Jika kamu menggunakan Ripway maka link yang kamu dapat akan terlihat seperti ini 'http://h1.ripway.com/friendstermod/animasi.js'
[11] Kemudian hapus extensi .js di link tersebut (lihat contoh ya..) sebaiknya copy kan dulu link tsb di Notepad.

Code :
http://h1.ripway.com/friendstermod/animasi.js

menjadi seperti ini

Code :
http://h1.ripway.com/friendstermod/animasi

[12] Copy link url JS di atas dan paste-kan pada tengah-tengah kode berikut ini (ingat tanpa '.js' di belakang).

Code :
<%BCscript type="text/javascript" src=URL LINK JS TARUH DISINI.%BCjs><%BC/script>

Berikut contoh yang sudah jadi

Code :
<%BCscript type="text/javascript" src=http://h1.ripway.com/friendstermod/animasi.%BCjs><%BC/script>

[13] Setelah semua langkah di atas telah dilakukan dengan benar, copy-paste-kan kode JS total yang telah jadi di atas (sebaiknya buka notepad dan paste-kan aja di sana sementara).
[14] Sekarang buka Friendstermu dan Login terlebih dulu. (kalo belum punya account ya daftar dulu)
[15] Paste-kan hasil akhir kode JS yang telah jadi tadi pada bagian 'Media Box' (Customize -> Media Box).
[16] Oke.. langkah terakhir, Klik 'Save'.

Contoh jadi jalannya script di atas Nah gak usah memandang kalau langkah di atas sulit, saya sudah berusaha menjelaskan dengan cukup detail. Entar kalo sudah terbiasa pasti sangat amat gampang deh. Selamat mempraktekkan. Jangan lupa sediakan camilan secukupnya sebelum praktek. Pertanyaan dan komentar silahkan masukkan pada kolom comment jangan di shoutbox loh. Klik aja comment di bawah ini. Thanks.. Read more | Baca lagi