MY FRIENDSTER TUTORIAL

  Mzta kau mga tropa peps? Salamat sa pag daan d2 sa site ko...
Sandali nga bakit nga pla kau ndaan d2? hmmmm... may hinahanap kau noh!!!..
cge na nga umpisahan na natin....
pero bago tau mag umpisa may ilang tanong lang ako.
May alam kb sa html? how about s css? o kaya naman sa js?(java script)?
kong wala ok lang un...parho namn taung wlang alm..
Cge na nga tara na maxado na taung nag ttagal
unang una sa lahat gzto qng makita neo 2 Sample1,Sample2
Alm q na sa2bihin neo "PANGIT" ok lang yan atleast alam neo na kong anong style
ang pwdng kala2basan ng gagawin neong layout db??

Let's Do This!!!

 open your note pad
 Copy this code

SAMPLE 1



/* michael's friendster profile editor v4.1 */
/* http://www.editfriendster.com */




/* Hide White bar under navigation */
#marketing_bg {display:none!important;}



/* Hide banner ads on top */
.banner_ad_fix {display:none!important;}



/* Hide Google Search */
#search {display:none!important;}



/* Google Ads */
#content_14 {display:none!important;}



/* Hide sidebar google ads*/
#ads_2_3 {display:none!important;}



/* Hide Google Kulet */
#googleAdPlacement { display:none!important; }



/* Groups */
.groups {display:none!important;}



/* Hide Classifieds | Jobs | */
.secondary_links {display:none!important;}



/* Hide Recent Updates */
.user_tracker {display:none!important;}



/* Hide Navigation Language */
#navLang { display: none ! important }



/* Remove Find Friends Link */
#mainnav div div {display:none!important;}



/* SEARC SUBNAV Jam revive*/
#subnav_search #subnav{
color: #cc9900;
}
#subnav_search #subnav a{
color: #cc9900;
}
#subnav_search #subnav a:hover{
color:#cc9900;
text-decoration:;
}



/* main navigation*/
#mainnav {
margin:0 0 10px 0;
padding:0 0 2px 0;
width:100%;
font-size:9px;
font-weight:bold;
background: url(IMAGE URL) fixed no-repeat center; #000000;}



#mainnav div.links a:link, #mainnav div.links a:visited, 
#mainnav div.links a:active { color:#cc9900; text-decoration:none; }
}
#mainnav .left {display:none;}

#mainnav .right {display:none;}

#navdivider {display:none;background:transparent;}

#subnav {display:none;}




/* SHOUTOUT BOX From Jam*/
#cpShoutoutBox{
background-color: #a22b2b;
border: 2px solid #000000;
display: block;
color: #e88eae;
}
.sob{display:none;background:transparent;}
.sol{display:none;background:transparent;}



/* SCROLLBAR Jam*/
html{
scrollbar-arrow-color: #cc9900;
scrollbar-track-color: #4d4d4d;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #cc9900;
scrollbar-3dlight-color: #cc9900;
scrollbar-darkshadow-color: #cc9900;
scrollbar-shadow-color: #cc9900;
border-color: #cc9900; 
border-width: 25px; 
border-style:ridge; 
}
#meettrail .commonbox h2 .commonbox h2{
color: #cc9900;
text-transform: lowercase;
}
/* TRACKER Jam revive*/
.user_tracker{
background-color: #a22b2b;
border: 2px solid #000000;
color: #e88eae;
}

/* FRIENDSTER MAGIC */
#navigation {
background-image: url(http://i36.tinypic.com/eep9l.jpg);
height: 65px !important;
position: relative !important;
margin: 0;
padding: 300px 0 0 0;
background-attachment:scrobable;
background-repeat: no-repeat;
background-position: 50% 35%;
background-color:#000000;
border: 15px outset #cc9900;
}

/* FriendsterMagic - master links */
body {cursor: url(CURSOR URL);}
a:hover {
border-bottom-style:dotted; 
border-bottom-width:3px;
border-top-style:dotted; 
border-top-width:3px;
}

/* HOVER BACKGROUND EFFECT */
a:hover, a.navbar:hover {
  background-image:url
  (http://www.bestanimations.com/Nature/Fire/Explosions/Explode-05-june.gif);
  padding:10px,0,0,0;
  background-position:center; 
  background-repeat: no-repeat;

}
a:hover img {
  background-image:url
  (http://www.bestanimations.com/Nature/Fire/Explosions/Explode-05-june.gif);
  filter:none;
  padding:10px,0,0,0;
  background-position:center; 
  background-repeat: no-repeat;

}

/* PAGE BACKGROUND */
body {
  background-image: url(http://i34.tinypic.com/2m45bh1.jpg);
  background-attachment: fixed;
  background-position: center right;
  background-repeat: no-repeat;
  background-color: #000000;
  cursor: url(http://www.myspacecursor.net/gun/5.ani)
 ;
}
/* GLOBAL FONTS */
.usercontent {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #999999;
  text-transform: lowercase;
}
/* GLOBAL LINKS */
.usercontent a, .usercontent a:link, .usercontent 
a:visited, .usercontent
 a:hover, .usercontent a:active {
  text-decoration: overline;
  color: #cc9933;
}
.usercontent a:hover {
  text-decoration: overline;
  color: blue;
}
/* MASTER BOXES */

.commonbox {
  border-width: 10px;
  border-height:15px;
  border-color: #cc9900;
  border-style: outset;
  background-image: url
  (http://www.bestanimations.com/Nature/Fire/Explosions/Explode-05-june.gif);
  background-attachment:fixed;
  background-position:center center;
  background-repeat:repeat-x;
  background-color:transparent;
}
.commonbox .evenrow {
  background-image: url
  (http://www.bestanimations.com/Nature/Fire/Explosions/Explode-05-june.gif);
  background-attachment:fixed;
  background-position:30% 35%;
  background-repeat:repeat-y;
  border-color: #cc9900;
  border-style: outset;
  background-color:transparent;
}

/* MASTER HEADERS */
.commonbox h1, .commonbox h2 {
  font-family: Helvetica;
  color: #ffffff;
  text-align: right;
  text-transform: UPPERCASE;
  font-size: 10px;
  background-image: url
  (http://www.desicomments.com/dc/05/19551/195511.JPG);
  border-width: 8px;
  border-color: #cc9900;
  border-style: dashed;
  background-attachment:crobable;
  background-color:transparent;
  background-repeat:no-repeat;
  padding: 200px 0 0 0;


}
/* CONTROL PANEL: BOX */
.controlpanel {
  border-width: 6px;
  border-color: #cc9900;
  border-style: outset;
  background-color:transparent;
}
/* CONTROL PANEL: USER PHOTO */
.controlpanel .imgblock200 {
  border-color: #ff3300;
  border-style: inset;
  border-width: 5px;
}
/* CONTROL PANEL: DATA */
.controlpanel .data {
  font-family: Comic Sans MS, Geneva, Helvetica, sans-serif;
  color: #66ff00;
  text-transform: lowercase;
}
.data a {
  font-family: Comic Sans MS, Geneva, Helvetica, sans-serif;
  color: #66ff00;
  text-transform: lowercase;
  text-decoration: ;
}
/* CONTROL PANEL: MORE ABOUT ME LINK */
a.more {
  font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
  color: #cc0033;
  text-transform: lowercase;
  text-decoration: ;
}
/* CONTROL PANEL: BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, 
#controlPanelButtons
 a:visited {
  font-family: Arial, Sans-serif;
  color: #cccc33;
  border-color: #cc9900;
  border-style: dashed;
  background-color: #663300;
  border-width: 8px;
  text-decoration: ;
}
#controlPanelButtons a:hover {
  font-family: Arial, Sans-serif;
  color: #009900;
  border-color: #330000;
  border-width: 10px;
  border-style: dashed;
  background-color:transparent
  text-decoration:;
}

/* FOOTER Jam revive*/
#footer{
color: #cc9900;
background-color: #;
background-image: url
(http://www.bestanimations.com/Nature/Fire/Explosions/Explode-05-june.gif);
padding: 40px 0;
}
#footer a{
color: #cc9900;
text-decoration:Line-hrough;
}
#footer a:hover{
color: #009933;
text-decoration:Overline ;
}
/* BOX: MY FRIENDS */
.friends {
  border-width: 6px;
  border-color: #ff3333;
  border-style: inset;
  background-color: transparent;
}
/* MISC: SMALL PHOTOS */
.commonbox .imgblock75, .ir {
  border-width: 3px;
  border-color: #cc9900;
  border-style: groove;
  background-color: transparent;
}
/* MISC: SMALL PHOTO NAMES */
.commonbox .dr {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #ff0000;
  text-transform: capitalize;
  background-color: transparent;
}

/* CSS IMAGE EFFECTS - FRIENDSTER-TWEAKERS.COM */
img { opacity:1;filter:alpha(opacity=100) }
a:hover img { filter:fliph }

/* MORE ABOUT */
.usercontent .q{
background: url(http://img248.imageshack.us/img248/7267/1abu166wr1.gif)
 no-repeat left; 
padding: 0 0 0 10px;}

/* White Bacground bhind the picture */
.flogridp .flogriditem {background:none;}

/* THE RIGHT CLICK WINDOW SHAKE - FRIENDSTER-TWEAKERS.COM */
body {right:expr/**/ession(function fstweakersshake(){if (event.button==2){
self.resizeTo(960,700)
self.moveBy(15,17)
self.moveBy(-13,-17)
self.moveBy(13,19)
self.moveBy(-14,-16)
self.moveBy(14,23)
self.moveBy(-25,-20)
self.moveBy(24,22)
self.moveBy(-20,-17)
self.moveBy(24,16)
self.moveBy(-13,-20)
self.moveBy(20,20)
self.moveBy(-26,-27)
self.moveBy(15,17)
self.moveBy(-13,-17)
self.moveBy(13,19)
self.moveBy(-14,-16)
self.moveBy(24,16)
self.moveBy(-13,-20)
self.moveBy(20,20)
self.moveBy(-26,-27)
self.moveBy(15,17)
self.moveBy(-13,-17)
self.moveBy(13,19)
self.moveBy(-14,-16)
self.moveBy(14,23)
self.moveBy(-25,-20)
self.moveBy(24,22)
self.moveBy(-20,-17)
self.moveBy(24,16)
self.moveBy(-13,-20)
self.moveBy(20,20)
self.moveBy(-26,-27)
self.moveBy(15,17)
self.moveBy(-13,-17)
self.moveBy(13,19)
self.moveBy(-14,-16)
self.moveBy(14,23)
self.moveBy(15,17)
self.moveBy(-13,-17)
self.moveBy(13,19)
self.moveBy(-14,-16)
self.moveBy(14,23)
self.moveBy(-25,-20)
self.moveBy(24,22)
self.moveBy(-20,-17)
self.moveBy(-13,-20)
self.moveBy(20,20)
self.moveBy(-26,-27)
self.moveBy(28,17)
self.moveBy(0, 0)
alert("Ooppss!! WaG Ganyan!");}}document.onmousedown=fstweakersshake);}

/* GOODBYE ALERT BOX - FRIENDSTER-TWEAKERS.COM */
body{left:exp/**/ression(
function goodbye()
{alert('bye, '+pageViewerFName+' Salamat Sa Pag Daan');}
window.onunload=goodbye);}

 
/* CURSOR: LINKS */
a,a:link,a:visited,a:active,a:hover { cursor:url
("http://www.cursors-4u.com/cursors/cur-1/cur47.ani"),default; }



SAMPLE 2
 

/* michael's friendster profile editor v4.1 */
/* http://www.editfriendster.com */

/* Hide White bar under navigation */
#marketing_bg {display:none!important;}

/* Hide banner ads on top */
.banner_ad_fix {display:none!important;}

/* Hide Google Search */
#search {display:none!important;}

/* Hide sidebar google ads*/
#ads_2_3 {display:none!important;}

/* Hide Google Kulet */
#googleAdPlacement { display:none!important; }


/* SEARC SUBNAV Jam revive*/
#subnav_search #subnav{
color: #cc9900;
}
#subnav_search #subnav a{
color: #cc9900;
}
#subnav_search #subnav a:hover{
color: #009933;
text-decoration:;
}

/* main navigation*/
#mainnav {
margin:0 0 10px 0;
padding:0 0 2px 0;
width:100%;
font-size:9px;
font-weight:bold;
background: url(IMAGE URL) fixed no-repeat center; #000000;}

#mainnav div.links a:link, #mainnav div.links a:visited, 
#mainnav div.links a:active { color:#cc9900; text-decoration:none; }
}
#mainnav .left {display:none;}
#mainnav .right {display:none;}
#navdivider {display:none;background:transparent;}
#subnav {display:none;}

/* SHOUTOUT BOX From Jam*/
#cpShoutoutBox{
background-color: #a22b2b;
border: 2px solid #000000;
display: block;
color: #e88eae;
}
.sob{display:none;background:transparent;}
.sol{display:none;background:transparent;}

/* SCROLLBAR Jam*/
html{
scrollbar-arrow-color: #cc9900;
scrollbar-track-color: #4d4d4d;
scrollbar-face-color: #000000;
scrollbar-highlight-color: #cc9900;
scrollbar-3dlight-color: #cc9900;
scrollbar-darkshadow-color: #cc9900;
scrollbar-shadow-color: #cc9900;
border-color: #cc9900; 
border-width: 25px; 
border-style:ridge; 
}
#meettrail .commonbox h2 .commonbox h2{
color: #cc9900;
text-transform: lowercase;
}
/* TRACKER Jam revive*/
.user_tracker{
background-color: #a22b2b;
border: 2px solid #000000;
color: #e88eae;
}

/* FRIENDSTER MAGIC */
#navigation {
background-image: url(http://i36.tinypic.com/eep9l.jpg);
height: 65px !important;
position: relative !important;
margin: 0;
padding: 300px 0 0 0;
background-attachment:scrobable;
background-repeat: no-repeat;
background-position: 50% 35%;
background-color: transparent;
border: 15px outset #cc9900;
}

/* FriendsterMagic - master links */
body {cursor: url(CURSOR URL);}
a:hover {
border-bottom-style:dotted; 
border-bottom-width:3px;
border-top-style:dotted; 
border-top-width:3px;
}

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

body{right:expr/**/ession(
function rightclick() {if (event.button==2)
{alert('Walang Ganyan Tol!')}}
document.onmousedown=rightclick);}

/* PAGE BACKGROUND */
body {
  background-image: url(http://i34.tinypic.com/2m45bh1.jpg);
  background-attachment: fixed;
  background-position: center right;
  background-repeat: no-repeat;
  background-color: #000000;
  cursor: url(http://www.myspacecursor.net/gun/5.ani)
 ;
}
/* GLOBAL FONTS */
.usercontent {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  color: #999999;
  text-transform: lowercase;
}
/* GLOBAL LINKS */
.usercontent a, .usercontent a:link, .usercontent 
a:visited, .usercontent a:hover, .usercontent a:active {
  text-decoration: overline;
  color: #cc9933;
}
.usercontent a:hover {
  text-decoration: overline;
  color: blue;
}
/* MASTER BOXES */

.commonbox {
  border-width: 10px;
  border-height:15px;
  border-color: #cc9900;
  border-style: outset;
  background-image: url
  (http://www.bestanimations.com/Nature/Fire/Explosions/Explode-05-june.gif);
  background-attachment:fixed;
  background-position:center center;
  background-repeat:repeat-x;
  background-color:transparent;
}
.commonbox .evenrow {
  background-image: url
  (http://www.bestanimations.com/Nature/Fire/Explosions/Explode-05-june.gif);
  background-attachment:fixed;
  background-position:30% 35%;
  background-repeat:repeat-y;
  border-color: #cc9900;
  border-style: outset;
  background-color:transparent;
}

/* MASTER HEADERS */
.commonbox h1, .commonbox h2 {
  font-family: Courier New, Courier, Monaco, monospace;
  color: #cc3333;
  text-transform: lowercase;
  background-image: url(http://www.desicomments.com/dc/05/19551/195511.JPG);
    border-width: 8px;
  border-color: #cc9900;
  border-style: dashed;
  background-attachment:crobable;
  background-color:transparent;
  background-repeat:no-repeat;
  padding: 200px 0 0 0;


}
/* CONTROL PANEL: BOX */
.controlpanel {
  border-width: 6px;
  border-color: #cc9900;
  border-style: outset;
  background-color:transparent;
}
/* CONTROL PANEL: USER PHOTO */
.controlpanel .imgblock200 {
  border-color: #ff3300;
  border-style: inset;
  border-width: 5px;
}
/* CONTROL PANEL: DATA */
.controlpanel .data {
  font-family: Comic Sans MS, Geneva, Helvetica, sans-serif;
  color: #66ff00;
  text-transform: lowercase;
}
.data a {
  font-family: Comic Sans MS, Geneva, Helvetica, sans-serif;
  color: #66ff00;
  text-transform: lowercase;
  text-decoration: ;
}
/* CONTROL PANEL: MORE ABOUT ME LINK */
a.more {
  font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;
  color: #cc0033;
  text-transform: lowercase;
  text-decoration: ;
}
/* CONTROL PANEL: BUTTONS */
#controlPanelButtons a, #controlPanelButtons a:link, 
#controlPanelButtons a:visited {
  font-family: Arial, Sans-serif;
  color: #cccc33;
  border-color: #cc9900;
  border-style: dashed;
  background-color: #663300;
  border-width: 8px;
  text-decoration: ;
}
#controlPanelButtons a:hover {
  font-family: Arial, Sans-serif;
  color: #009900;
  border-color: #330000;
  border-width: 10px;
  border-style: dashed;
  background-color:transparent
  text-decoration:;
}

/* FOOTER Jam revive*/
#footer{
color: #cc9900;
background-color: #;
background-image: 
url(http://www.bestanimations.com/Nature/Fire/Explosions/Explode-05-june.gif);
padding: 40px 0;
}
#footer a{
color: #cc9900;
text-decoration:Line-hrough;
}
#footer a:hover{
color: #009933;
text-decoration:Overline ;
}



Then Paste it to your Note Pad after you paste it go to file then save as
 tapos ung file name neo dapat karugtong nya .css ganito ang sample (myfile.css) 
cguro naman hindi na kau mahhrapan umintindi nyan tagalog na nga yan hindi na english 
kc hindi ako marunong mag english hekehekhek... 

Mapapnsin neo.. ung comment sa pinaka unang line ng code 
/* michael's friendster profile editor v4.1 */ 
don q kc yan ginawa kay michael editor hehehe.. 
gzto mong malaman kong san un?? open your friendster..
Go to edit profile, coztomize then click the coztomize with css editor,
pero para hindi kana mahirapan   click here

 Kong gzto mong makita ung result ng code na pina copy ko sau..
paste mo un sa Friendster css editor sa pinaka baba ng page and clik "Preview Code" 
Wag ung "Generate Friendster Code" huh.. ung preview lang wag makulet.

 Ayan May kunti na kaung natutunan hehehe...;
Pero hindi pa tau tapos mahaba-haba pa taung mag uusap hahaha... kwentohan 
muna tau mga tsong... 
 
 Alm neo bang madaling mag edit don sa michael's editor??
korek!! ung code na binigay ko sau pwede mong palitan un... 
Ung background,ung border,background color,text color at pwede kang mag add 
ng kong anu-ano..

NOTE!!!
 All you have to do fallow everything wat i tell you ok?
Una copy mo ung code tapos punta ka  don sa Michael Editor 
paste mo ung code mo sa Friendster css Code ung box sa baba ng page 
tapos preview mo, makikita mo ung friendster layout ko 
pwede mo na kong invite sa friendster mo hehehehe... 
Joke lang sinabi ko un kc once na nag edit ka ng code 
pag clinik mo ung preview
Makikita mo agad ung result gzto mo ng sample??

 Cge halimbawa e2ng code na to eto ung navigtion mo 
kasama to don sa code na pina copy ko sau 
kahit tingnan mo pa.. e2 ung box sa taas ng
friendster mo ok.. Tapos gzto mong palitan ung background, 
border, position, attachment.

 Original

/* FRIENDSTER MAGIC */
#navigation {
background-image: url(http://i36.tinypic.com/eep9l.jpg);
height: 65px !important;
position: relative !important;
margin: 0;
padding: 300px 0 0 0;
background-attachment:scrobable;
background-repeat: no-repeat;
background-position: 50% 35%;
background-color: transparent;
border: 15px outset #cc0033;
}


 Ang code na nasa taas ung original tapos e2ng nsa baba papalitan natin ung border nya, 
Ung image background, padding, position,color, border. 
pag masdan mo ang code na to kong anong pinag kaiba nya sa unang code ok..

/* FRIENDSTER MAGIC */
#navigation {
background-image: url();
height: 65px !important;
position: relative !important;
margin: 0;
padding: 500px 0 0 0;
background-attachment:fixed;
background-repeat:repeat;
background-position: center center;
background-color: red;
border: 35px dotted green;
}

 Tapos ang gawin mo ngaun copy mo 2ng code ok tapos punta ka don kay michael, 
ung nilagay mong code don palitan mo ung code na nasa taas ung bang */FRIENDSTER MAGIC */ 
palitan mo nung bago mong na kopy ok! then click "preview code"... 
makikita mo ung diffence ngun at ung kaninang layout.. 
ganun lang edit mo ung mga code don tapo preview... madali lang db...
wag mo lang press yong "generate code" mawa2la ung code..
Kong gzto mo try mo then tell me what happened..


  Pero hindi pa tau tapos mga tsong tinuturo q plang sainyo 
kong pano mag edit ok... kala neo ganun lang un kadali hmmmppp... 
 
  Wala pa tau sa kalahati.... pag na edit mo na un.. tapos nakagawa ka ng
magandang layout na sa palagay mo maganda ung design mo... 
pero kong ok na ung code na binigay q sau wag munang baguhin un.. 
copy mo lahat un..tapos open mo ung "notepad mo"
tapos save as ung file name dpat may karugton na .css

  Pag na save mo na un punta ka sa http://www.hotlinkfiles.com
O kaya dito http://www.ripway.com 
tapos register ka don gwa ka ng account... 
Pag may account kana click mo ung upload tapos Browse
hanapin mo ung file na nasave mo ok!! tapos "upload" ulit.

  Pag na upload mo na un... click mo yong "just the direct URLs" 
kulay blue yata un.. tapos lalabas sa box ung
code... tapos copy mo un.....
ang gawin mo ngaun open your friendster... edit profile, coztomise, 
then sa Media box paste mo ung code... tapos lagyan mo ng code na ganito...


 <>
 style/
 @import url(lagay mo d2 ung code mo sa loob); 
 /style
 <>

NOTE!! 

Intindihin mabuti!!!

Ung style/" dapat nasa loob un n2 < > Ok.. basta ung dalawang style 
na nakikita neo jan ilagay neo sa loob n2 < > 
ung isa sa unahan ung isa naman sa huli para ma close ung style mo...
hidi ko ma type ng ganun kc hindi makita eh.. pacnxa na..


  Ayan tapos na hehehe....
Gud luck sana may magawa ka.. 

  qng meron kang tanong Punta ka d2 sa guest book ko lagay mo 

tanong mo don 
kong kaya kong sagutin re2ply kita ...