- ARCHIVES
- » Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
Pages: 12
Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
- 16th
- » FTalkGeek
1388
0
1969-12-31
Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
Hi. I decided to make a tutorial for those who were asking:
how can i use a premade overlay?
where can i generate the code?
what will i do next?
etc..
This is a step by step tutorial to answer your questions.. just follow the instructions properly..
Ok, let's start..
1. First, make sure you have a complete and working overlay code.. Some codes may require you to download it from a hosting site..
2. Paste it to a notepad, or you may save it from a hosting site like [url=www.ripway.com]this[/url]. But of course, you must register first. 
Note: I suggest you save your codes is a file hosting site like www.ripway.com to see a quick preview of your overlay when you want to check the changes you will make.
3. After uploading a file you'll see this:
[img]http://img169.imageshack.us/img169/7865/tutojs3.jpg[/img]
just click [b]open[/b] to see the preview of you overlay..
4. Edit some necessary texts or parts of you HTML code (overlay)..
Let's say your code is:
(Edited overlay of ?MaRkEd)
NOTE: Don't use this code because i deleted some of its contents..i'll just use it as an example.. Anyway if you want to see the preview of this overlay, click [url=http://h1.ripway.com/kulantro/layout/ninja/ninja.html]here[/url]
[quote]<HTML>
[color=violet]<HEAD>[/color]
[color=red]<TITLE>EDIT TEXT</TITLE>[/color]
<link rel="stylesheet"
type="text/css"
media="screen"
href="http://h1.ripway.com/kulantro/layout/ninja.css" />
<script language="javascript">
var repeat=1 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout("titlemove()",140)
}
if (document.title)
titlemove()</script>
<script language="JavaScript1.2">
//Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2
if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
</script>
[color=violet]</HEAD>[/color]
[color=blue]<BODY BGCOLOR=336633 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>[/color]
<!-- ImageReady Slices (ninja.psd) --><CENTER>
<TABLE WIDTH=1010 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="http://img375.imageshack.us/img375/9021/ninja01de6.gif" WIDTH=152 HEIGHT=220 BORDER=0
ALT="" USEMAP="#ninja_01_Map"></TD>
<TD>
<IMG SRC="http://img375.imageshack.us/img375/8647/ninja02eq5.gif" WIDTH=168 HEIGHT=220 BORDER=0
ALT="" USEMAP="#ninja_02_Map"></TD>
<TD>
<IMG SRC="http://img375.imageshack.us/img375/1411/ninja03lw9.gif" WIDTH=254 HEIGHT=220 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="http://img375.imageshack.us/img375/9808/ninja04lv3.gif" WIDTH=436 HEIGHT=230 ALT=""></TD>
<TD>
<IMG SRC="http://img374.imageshack.us/img374/5158/spacerpt8.gif" WIDTH=1 HEIGHT=220 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=2>
<IMG SRC="http://img374.imageshack.us/img374/1558/ninja05di3.gif" WIDTH=574 HEIGHT=380 BORDER=0
ALT="" USEMAP="#ninja_05_Map"></TD>
<TD>
<IMG SRC="http://img374.imageshack.us/img374/9351/ninja06dw3.gif" WIDTH=1 HEIGHT=10 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="http://img374.imageshack.us/img374/9351/ninja06dw3.gif" WIDTH=436 HEIGHT=370 ALT=""></TD>
<TD>
<IMG SRC="http://img374.imageshack.us/img374/5158/spacerpt8.gif" WIDTH=1 HEIGHT=370 ALT=""></TD>
</TR>
</TABLE></CENTER>
<MAP NAME="ninja_01_Map">
<AREA SHAPE="rect" ALT="" COORDS="38,177,122,198" HREF="http://www.friendster.com/logout.php" TARGET="_blank">
<AREA SHAPE="rect" ALT="" COORDS="30,143,133,163" HREF="http://www.friendster.com/editaccount.php" TARGET="_blank">
<AREA SHAPE="rect" ALT="" COORDS="30,106,123,127" HREF="http://www.friendster.com/friends.php" TARGET="_blank">
<AREA SHAPE="rect" ALT="" COORDS="36,69,121,90" HREF="http://www.friendster.com/user.php" TARGET="_blank">
<AREA SHAPE="rect" ALT="" COORDS="46,32,108,52" HREF="http://www.friendster.com/" TARGET="_blank">
</MAP>
<!------------------ USERID BEGIN HERE ------------------!>
<MAP NAME="ninja_02_Map">
<AREA SHAPE="rect" ALT="" COORDS="39,176,128,197"
HREF="http://www.friendster.com/usersearch.php?search=1&country=PH&usearch=YOUR EMAIL ADD HERE" TARGET="_blank">
<AREA SHAPE="rect" ALT="" COORDS="23,140,142,160" HREF="http://www.friendster.com/publiccomments.php?uid=USERID"
TARGET="_self">
<AREA SHAPE="rect" ALT="" COORDS="20,103,150,124" HREF="http://www.friendster.com/viewphotos.php?uid=USERID" TARGET="_self">
<AREA SHAPE="rect" ALT="" COORDS="27,69,146,91" HREF="http://www.friendster.com/sendmessage.php?uid=USERID&action=sendsmile"
TARGET="_self">
<AREA SHAPE="rect" ALT="" COORDS="32,33,133,53" HREF="http://www.friendster.com/sendmessage.php?uid=USERID" TARGET="_self">
</MAP>
<MAP NAME="ninja_05_Map">
<AREA SHAPE="rect" ALT="" COORDS="165,149,210,163" HREF="http://www.friendster.com/markedmund" TARGET="_blank">
</MAP>
<!-- End ImageReady Slices -->
[color=brown]<div id="about" style="position:absolute; overflow:auto; left:352px; top:28px; width:209px; height:184px; z-index:1">[/color]
<center>
<a href="http://www.friendster.com/URLPHOTOURL">
<img src="PHOTO URL HERE" HEIGHT="120" WIDTH="120" style="filter:alpha(opacity=20);-moz-opacity:0.2"
onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a></center></br>
<B><FONT COLOR="#336633">NAME:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">SEX:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">AGE:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">SCHOOL(S):</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">STATUS:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">LOCATION:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">COMPANIES:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">COUNTRY:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">MEMBER SINCE:</FONT></B> TEXT HERE <BR>
<BR>
<B><FONT COLOR="#336633">FAVORITE MUSIC:</FONT></B><BR>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<BR>
<B><FONT COLOR="#336633">FAVORITE BOOKS:</FONT></B><BR>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<BR>
<B><FONT COLOR="#336633">FAVORITE MOVIES:</FONT></B><BR>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<BR>
<B><FONT COLOR="#336633">HOBBIES AND INTERESTS:</FONT></B><BR>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<BR>
<B><FONT COLOR="#336633">WHO I WANT TO MEET:</FONT></B><BR>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
</div></div></div>
[color=brown]<div id="chatbox" style="position:absolute; overflow:hidden; left:291px; top:254px; width:121px; height:144px; z-index:2">[/color]
<iframe frameborder="0" width="121" height="88" src="http://www3.cbox.ws/box/?boxid=2857353&boxtag=q0hdpf&sec=main"
marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border: 0px solid;"
id="cboxmain"></iframe><br/>
<iframe frameborder="0" width="121" height="60" src="http://www3.cbox.ws/box/?boxid=2857353&boxtag=q0hdpf&sec=form"
marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border: 0px
solid;border-top:0px" id="cboxform"></iframe>
</div></div>
[color=brown]<div id="Myphotos" style="position:absolute; overflow:hidden; left:598px; top:25px; width:118px; height:191px; z-index:3">[/color]
<MARQUEE DIRECTION=down Scrollamount=5 onmouseover=this.stop() onmouseout=this.start()>
<a href="http://www.friendster.com" TARGET="_self"> <img src="PHOTO URL HERE" HEIGHT="90" WIDTH="110"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">
<img src="PHOTO URL HERE" HEIGHT="90" WIDTH="110" style="filter:alpha(opacity=20);-moz-opacity:0.2"
onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">
<img src="PHOTO URL HERE" HEIGHT="90" WIDTH="110" style="filter:alpha(opacity=20);-moz-opacity:0.2"
onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">
</a>
</MARQUEE>
</div>
</div>
[color=brown]<div id="Friends" style="position:absolute; overflow:auto; left:445px; top:261px; width:123px; height:296px; z-index:4">[/color]
<center>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
</center>
</div>
</div>
</div>
[color=brown]<div id="Mediabox" style="position:absolute; overflow:hidden; left:755px; top:30px; width:226px; height:191px; z-index:5">[/color]
<embed src="http://www.loudfusion.com/widgets/music/5" name="Loudfusion.com" quality="high" wmode="transparent"
flashvars="USERID=115894" width="224" height="187" type="application/x-shockwave-flash"></embed>
</div>
[color=brown]<div id="Testi" style="position:absolute; overflow:auto; left:610px; top:264px; width:375px; height:296px; z-index:6">[/color]
<div id="content_18"></div>
<script language="javascript">
module18="yes"; </script>
</div>
<!------------------------- Status Hide --------------------------------->
<SCRIPT language=JavaScript>
puchtit="]-[ welcome to my page 
]-[";
letrero2="·.¸¸.·´´¯·.¸¸.·´´¯·.¸¸.·´´¯·.¸¸.·´´¯";
letrero1="·.¸¸.·´´¯·.¸¸.·´´¯·.¸¸.·´´¯·.¸¸.·´´¯";ultimo1=letrero1.length-1;
ultimo2=letrero2.length-1;
tiempo=setTimeout("scroll()",.1);
function scroll()
{
aux1=letrero1.charAt(ultimo1-1);
letrero1=aux1+letrero1.substring(0,ultimo1-1);
aux2=letrero2.charAt(0);
letrero2=letrero2.substring(1,ultimo2+1)+aux2;
window.status="(" + letrero2 + puchtit + letrero1 + ")";
tiempo=setTimeout("scroll()",.1);
return true;
}
// -->
</script>
<!---------------------------END STATUS HIDE ------------------------------>
</div>
[color=blue]</BODY>[/color]
</HTML>[/quote]
let's divide the code in several parts:
[b]part 1[/b] = [color=violet]violet[/color]
The <HEAD></HEAD> tag.. This is where you can tweak the color, size, style, etc. of your fonts..
NOTE: Some profiles, doesn't the CSS part of the code where you can edit it.. It means the your font is in default.. In short, no need to edit..
Also, In this part, you may put some other tricks like page exit, moving or scrolling title etc.. You will surely understand this part if you understand the HTML codes..
[b]part 2[/b] = [color=red]red[/color]
This part will serve as the title of your overlay.. Just edit the part where you can see [b]EDIT TEXT[/b]..
[b]part 3[/b] = [color=blue]blue[/color]
The <BODY></BODY> tag.. This is the most important part of your overlay.. This will determine the position of the boxes or script in your page.. You can also put some tricks here..
NOTE: You might be confused because i mentioned above that between <HEAD></HEAD>, you can put the tricks you want.. The reason why i also mention it here is that some codes, scripts or tricks work in <HEAD> tag and don't work in <BODY> tag and vice versa.. But this rarely happen, if it happens to you, just do a trial and error..
Normally, in a premade overlay, the tricks are already in their proper place and work really fine..
[b]part 4[/b] = [color=brown]brown[/color]
This part will determine the exact position of your box or script..
For instance your chatbox:
[quote]<div id="chatbox" style="position:absolute; overflow:hidden; left:291px; top:254px; width:121px; height:144px; z-index:2">[/quote]
[b]left[/b] = The margin from the left of your screen.. This will serve as your x-axis..
[b]top[/b] = The margin from the top of your screen.. This will serve as your y-axis..
The [b]width[/b] and [b]height[/b] will resize your box..
NOTE: There are some words used by the overlay maker which stand for "[b]You Must Change This or Replace It With Your Personal Information[/b]".. Some of these words are "[b]BlahBlah[/b]", "[b]Text[/b]", "[b]Edit Text[/b]", "[b]URL[/b]", "[b]Photo URL[/b]", "[b]User ID[/b]",etc.. Anyway, it is very obvious in a Premade overlay to find these stuffs.. Just use you common sense.. 
[url=http://theftalk.com/t3499-Tutorial-Find-Userid%21%21%21.html]TUTORIAL ON HOW TO GET YOUR USERID[/url]
To get the URL of your pic, simply right click your picture and click properties.. Highlight the Address (URL): then press [b]Ctrl+V[/b]..
5. After editing, you must generate you code..
NOTE: There are several ways in generating your codes.. But i suggest, for beginners use the [b]OGstandard Version 11.0[/b] in markyctrigger.. It's a lot more easy to use than the other linker..
Copy your entire code and proceed [http://www.markyctrigger.com/OGvX.html?KeepThis=true&TB_iframe=true&height=400&width=600]here[/url]
Follow the instruction and paste the generated codes in your media box..
And finally hit the save button..
That's it!!
I hope this tutorial will help those people who want to use premade overlays..Though this is not a perfect tutorial, this will somehow give them an idea how to put a premade overlay in their Friendster Profile..
Note: I suggest you save your codes is a file hosting site like www.ripway.com to see a quick preview of your overlay when you want to check the changes you will make.
3. After uploading a file you'll see this:
[img]http://img169.imageshack.us/img169/7865/tutojs3.jpg[/img]
just click [b]open[/b] to see the preview of you overlay..
4. Edit some necessary texts or parts of you HTML code (overlay)..
Let's say your code is:
(Edited overlay of ?MaRkEd)
NOTE: Don't use this code because i deleted some of its contents..i'll just use it as an example.. Anyway if you want to see the preview of this overlay, click [url=http://h1.ripway.com/kulantro/layout/ninja/ninja.html]here[/url]
[quote]<HTML>
[color=violet]<HEAD>[/color]
[color=red]<TITLE>EDIT TEXT</TITLE>[/color]
<link rel="stylesheet"
type="text/css"
media="screen"
href="http://h1.ripway.com/kulantro/layout/ninja.css" />
<script language="javascript">
var repeat=1 //enter 0 to not repeat scrolling after 1 run, othersise, enter 1
var title=document.title
var leng=title.length
var start=1
function titlemove() {
titl=title.substring(start, leng) + title.substring(0, start)
document.title=titl
start++
if (start==leng+1) {
start=0
if (repeat==0)
return
}
setTimeout("titlemove()",140)
}
if (document.title)
titlemove()</script>
<script language="JavaScript1.2">
//Highlight image script- By Dynamic Drive
//For full source code and more DHTML scripts, visit http://www.dynamicdrive.com
//This credit MUST stay intact for use
function makevisible(cur,which){
strength=(which==0)? 1 : 0.2
if (cur.style.MozOpacity)
cur.style.MozOpacity=strength
else if (cur.filters)
cur.filters.alpha.opacity=strength*100
}
</script>
[color=violet]</HEAD>[/color]
[color=blue]<BODY BGCOLOR=336633 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>[/color]
<!-- ImageReady Slices (ninja.psd) --><CENTER>
<TABLE WIDTH=1010 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD>
<IMG SRC="http://img375.imageshack.us/img375/9021/ninja01de6.gif" WIDTH=152 HEIGHT=220 BORDER=0
ALT="" USEMAP="#ninja_01_Map"></TD>
<TD>
<IMG SRC="http://img375.imageshack.us/img375/8647/ninja02eq5.gif" WIDTH=168 HEIGHT=220 BORDER=0
ALT="" USEMAP="#ninja_02_Map"></TD>
<TD>
<IMG SRC="http://img375.imageshack.us/img375/1411/ninja03lw9.gif" WIDTH=254 HEIGHT=220 ALT=""></TD>
<TD ROWSPAN=2>
<IMG SRC="http://img375.imageshack.us/img375/9808/ninja04lv3.gif" WIDTH=436 HEIGHT=230 ALT=""></TD>
<TD>
<IMG SRC="http://img374.imageshack.us/img374/5158/spacerpt8.gif" WIDTH=1 HEIGHT=220 ALT=""></TD>
</TR>
<TR>
<TD COLSPAN=3 ROWSPAN=2>
<IMG SRC="http://img374.imageshack.us/img374/1558/ninja05di3.gif" WIDTH=574 HEIGHT=380 BORDER=0
ALT="" USEMAP="#ninja_05_Map"></TD>
<TD>
<IMG SRC="http://img374.imageshack.us/img374/9351/ninja06dw3.gif" WIDTH=1 HEIGHT=10 ALT=""></TD>
</TR>
<TR>
<TD>
<IMG SRC="http://img374.imageshack.us/img374/9351/ninja06dw3.gif" WIDTH=436 HEIGHT=370 ALT=""></TD>
<TD>
<IMG SRC="http://img374.imageshack.us/img374/5158/spacerpt8.gif" WIDTH=1 HEIGHT=370 ALT=""></TD>
</TR>
</TABLE></CENTER>
<MAP NAME="ninja_01_Map">
<AREA SHAPE="rect" ALT="" COORDS="38,177,122,198" HREF="http://www.friendster.com/logout.php" TARGET="_blank">
<AREA SHAPE="rect" ALT="" COORDS="30,143,133,163" HREF="http://www.friendster.com/editaccount.php" TARGET="_blank">
<AREA SHAPE="rect" ALT="" COORDS="30,106,123,127" HREF="http://www.friendster.com/friends.php" TARGET="_blank">
<AREA SHAPE="rect" ALT="" COORDS="36,69,121,90" HREF="http://www.friendster.com/user.php" TARGET="_blank">
<AREA SHAPE="rect" ALT="" COORDS="46,32,108,52" HREF="http://www.friendster.com/" TARGET="_blank">
</MAP>
<!------------------ USERID BEGIN HERE ------------------!>
<MAP NAME="ninja_02_Map">
<AREA SHAPE="rect" ALT="" COORDS="39,176,128,197"
HREF="http://www.friendster.com/usersearch.php?search=1&country=PH&usearch=YOUR EMAIL ADD HERE" TARGET="_blank">
<AREA SHAPE="rect" ALT="" COORDS="23,140,142,160" HREF="http://www.friendster.com/publiccomments.php?uid=USERID"
TARGET="_self">
<AREA SHAPE="rect" ALT="" COORDS="20,103,150,124" HREF="http://www.friendster.com/viewphotos.php?uid=USERID" TARGET="_self">
<AREA SHAPE="rect" ALT="" COORDS="27,69,146,91" HREF="http://www.friendster.com/sendmessage.php?uid=USERID&action=sendsmile"
TARGET="_self">
<AREA SHAPE="rect" ALT="" COORDS="32,33,133,53" HREF="http://www.friendster.com/sendmessage.php?uid=USERID" TARGET="_self">
</MAP>
<MAP NAME="ninja_05_Map">
<AREA SHAPE="rect" ALT="" COORDS="165,149,210,163" HREF="http://www.friendster.com/markedmund" TARGET="_blank">
</MAP>
<!-- End ImageReady Slices -->
[color=brown]<div id="about" style="position:absolute; overflow:auto; left:352px; top:28px; width:209px; height:184px; z-index:1">[/color]
<center>
<a href="http://www.friendster.com/URLPHOTOURL">
<img src="PHOTO URL HERE" HEIGHT="120" WIDTH="120" style="filter:alpha(opacity=20);-moz-opacity:0.2"
onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)"></a></center></br>
<B><FONT COLOR="#336633">NAME:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">SEX:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">AGE:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">SCHOOL(S):</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">STATUS:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">LOCATION:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">COMPANIES:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">COUNTRY:</FONT></B> TEXT HERE <BR>
<B><FONT COLOR="#336633">MEMBER SINCE:</FONT></B> TEXT HERE <BR>
<BR>
<B><FONT COLOR="#336633">FAVORITE MUSIC:</FONT></B><BR>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<BR>
<B><FONT COLOR="#336633">FAVORITE BOOKS:</FONT></B><BR>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<BR>
<B><FONT COLOR="#336633">FAVORITE MOVIES:</FONT></B><BR>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<BR>
<B><FONT COLOR="#336633">HOBBIES AND INTERESTS:</FONT></B><BR>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
<BR>
<B><FONT COLOR="#336633">WHO I WANT TO MEET:</FONT></B><BR>
BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH BLAH
</div></div></div>
[color=brown]<div id="chatbox" style="position:absolute; overflow:hidden; left:291px; top:254px; width:121px; height:144px; z-index:2">[/color]
<iframe frameborder="0" width="121" height="88" src="http://www3.cbox.ws/box/?boxid=2857353&boxtag=q0hdpf&sec=main"
marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border: 0px solid;"
id="cboxmain"></iframe><br/>
<iframe frameborder="0" width="121" height="60" src="http://www3.cbox.ws/box/?boxid=2857353&boxtag=q0hdpf&sec=form"
marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border: 0px
solid;border-top:0px" id="cboxform"></iframe>
</div></div>
[color=brown]<div id="Myphotos" style="position:absolute; overflow:hidden; left:598px; top:25px; width:118px; height:191px; z-index:3">[/color]
<MARQUEE DIRECTION=down Scrollamount=5 onmouseover=this.stop() onmouseout=this.start()>
<a href="http://www.friendster.com" TARGET="_self"> <img src="PHOTO URL HERE" HEIGHT="90" WIDTH="110"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">
<img src="PHOTO URL HERE" HEIGHT="90" WIDTH="110" style="filter:alpha(opacity=20);-moz-opacity:0.2"
onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">
<img src="PHOTO URL HERE" HEIGHT="90" WIDTH="110" style="filter:alpha(opacity=20);-moz-opacity:0.2"
onMouseover="makevisible(this,0)" onMouseout="makevisible(this,1)">
</a>
</MARQUEE>
</div>
</div>
[color=brown]<div id="Friends" style="position:absolute; overflow:auto; left:445px; top:261px; width:123px; height:296px; z-index:4">[/color]
<center>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
<a href="http://www.friendster.com/USERID OF UR FRIEND" TARGET="_blank"><img src="PHOTO URL HERE" HEIGHT="90" WIDTH="100"
style="filter:alpha(opacity=20);-moz-opacity:0.2" onMouseover="makevisible(this,0)"
onMouseout="makevisible(this,1)"></a></br><I>FRIENDS</I><br>
</center>
</div>
</div>
</div>
[color=brown]<div id="Mediabox" style="position:absolute; overflow:hidden; left:755px; top:30px; width:226px; height:191px; z-index:5">[/color]
<embed src="http://www.loudfusion.com/widgets/music/5" name="Loudfusion.com" quality="high" wmode="transparent"
flashvars="USERID=115894" width="224" height="187" type="application/x-shockwave-flash"></embed>
</div>
[color=brown]<div id="Testi" style="position:absolute; overflow:auto; left:610px; top:264px; width:375px; height:296px; z-index:6">[/color]
<div id="content_18"></div>
<script language="javascript">
module18="yes"; </script>
</div>
<!------------------------- Status Hide --------------------------------->
<SCRIPT language=JavaScript>
puchtit="]-[ welcome to my page ]-[";
letrero2="·.¸¸.·´´¯·.¸¸.·´´¯·.¸¸.·´´¯·.¸¸.·´´¯";
letrero1="·.¸¸.·´´¯·.¸¸.·´´¯·.¸¸.·´´¯·.¸¸.·´´¯";ultimo1=letrero1.length-1;
ultimo2=letrero2.length-1;
tiempo=setTimeout("scroll()",.1);
function scroll()
{
aux1=letrero1.charAt(ultimo1-1);
letrero1=aux1+letrero1.substring(0,ultimo1-1);
aux2=letrero2.charAt(0);
letrero2=letrero2.substring(1,ultimo2+1)+aux2;
window.status="(" + letrero2 + puchtit + letrero1 + ")";
tiempo=setTimeout("scroll()",.1);
return true;
}
// -->
</script>
<!---------------------------END STATUS HIDE ------------------------------>
</div>
[color=blue]</BODY>[/color]
</HTML>[/quote]
let's divide the code in several parts:
[b]part 1[/b] = [color=violet]violet[/color]
The <HEAD></HEAD> tag.. This is where you can tweak the color, size, style, etc. of your fonts..
NOTE: Some profiles, doesn't the CSS part of the code where you can edit it.. It means the your font is in default.. In short, no need to edit..
Also, In this part, you may put some other tricks like page exit, moving or scrolling title etc.. You will surely understand this part if you understand the HTML codes..
[b]part 2[/b] = [color=red]red[/color]
This part will serve as the title of your overlay.. Just edit the part where you can see [b]EDIT TEXT[/b]..
[b]part 3[/b] = [color=blue]blue[/color]
The <BODY></BODY> tag.. This is the most important part of your overlay.. This will determine the position of the boxes or script in your page.. You can also put some tricks here..
NOTE: You might be confused because i mentioned above that between <HEAD></HEAD>, you can put the tricks you want.. The reason why i also mention it here is that some codes, scripts or tricks work in <HEAD> tag and don't work in <BODY> tag and vice versa.. But this rarely happen, if it happens to you, just do a trial and error..
Normally, in a premade overlay, the tricks are already in their proper place and work really fine..
[b]part 4[/b] = [color=brown]brown[/color]
This part will determine the exact position of your box or script..
For instance your chatbox:
[quote]<div id="chatbox" style="position:absolute; overflow:hidden; left:291px; top:254px; width:121px; height:144px; z-index:2">[/quote]
[b]left[/b] = The margin from the left of your screen.. This will serve as your x-axis..
[b]top[/b] = The margin from the top of your screen.. This will serve as your y-axis..
The [b]width[/b] and [b]height[/b] will resize your box..
NOTE: There are some words used by the overlay maker which stand for "[b]You Must Change This or Replace It With Your Personal Information[/b]".. Some of these words are "[b]BlahBlah[/b]", "[b]Text[/b]", "[b]Edit Text[/b]", "[b]URL[/b]", "[b]Photo URL[/b]", "[b]User ID[/b]",etc.. Anyway, it is very obvious in a Premade overlay to find these stuffs.. Just use you common sense..
[url=http://theftalk.com/t3499-Tutorial-Find-Userid%21%21%21.html]TUTORIAL ON HOW TO GET YOUR USERID[/url]
To get the URL of your pic, simply right click your picture and click properties.. Highlight the Address (URL): then press [b]Ctrl+V[/b]..
5. After editing, you must generate you code..
NOTE: There are several ways in generating your codes.. But i suggest, for beginners use the [b]OGstandard Version 11.0[/b] in markyctrigger.. It's a lot more easy to use than the other linker..
Copy your entire code and proceed [http://www.markyctrigger.com/OGvX.html?KeepThis=true&TB_iframe=true&height=400&width=600]here[/url]
Follow the instruction and paste the generated codes in your media box..
And finally hit the save button..
That's it!!
I hope this tutorial will help those people who want to use premade overlays..Though this is not a perfect tutorial, this will somehow give them an idea how to put a premade overlay in their Friendster Profile..
 |
- RiEn1993
- » n00b
- 1
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
[align=center]kuya. san po ba makakakuha ng mga overlay na layouts. can u please tell me. please.[/align]
|
- 16th
- » FTalkGeek
- 1388
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
pls post in english..
anyway, [url=http://theftalk.com/t2421-%5BLAYOUTS%5D-OVERLAY-DIRECTORY.html]here[/url] is an example..
you can also find premade overlays in markyctrigger, and some other overlay related sites.. 
anyway, [url=http://theftalk.com/t2421-%5BLAYOUTS%5D-OVERLAY-DIRECTORY.html]here[/url] is an example..
you can also find premade overlays in markyctrigger, and some other overlay related sites..
|
- Dfamador
- » FTalkFreak
- 1698
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
Hehe. I've notived you in the Overlay section helping people who are stucked up with something. I must say, this tutorial helps.
|
- 16th
- » FTalkGeek
- 1388
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
thx.. i love overlay profs and i want to share my little knowledge about that.. 
|
- sprongky
- » FTalkManiac
- 752
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
Finally A Tutorial On how to use Overlay..
Thanks For Helping Newbies Like Me 
Thanks For Helping Newbies Like Me
|
- 16th
- » FTalkGeek
- 1388
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
ok no problem, you may also ask some questions if you find something hard in this tutorial..
|
- flint_hydz
- » FTalkGeek
- 1257
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
[b]Tip : [/b]
Don't forget to use <br /> tag to break a line..
This tag is useful in about me section in your overlay (Except If you are using Auto Update About Me)..
[b]To Prevent :[/b]
[img]http://i201.photobucket.com/albums/aa226/flint0131/toinksz.jpg[/img]
Here's how to use..
[quote]Hi My Name Is Inday, I am 16 years old. I have an ugly face and my friends call me Neanderthal[/quote]
use <br /> tag to break the line..
Here's how it's done..
[quote]Hi My Name Is Inday, I am 16 years old.<br /> I have an ugly face and my friends<br /> call me Neanderthal.[/quote]
and here's the result..
[quote]Hi My Name Is Inday, I am 16 years old.
I have an ugly face and my friends
call me Neanderthal.[/quote]
This will make your overlay neat.
[/b]
Don't forget to use <br /> tag to break a line..
This tag is useful in about me section in your overlay (Except If you are using Auto Update About Me)..
[b]To Prevent :[/b]
[img]http://i201.photobucket.com/albums/aa226/flint0131/toinksz.jpg[/img]
Here's how to use..
[quote]Hi My Name Is Inday, I am 16 years old. I have an ugly face and my friends call me Neanderthal[/quote]
use <br /> tag to break the line..
Here's how it's done..
[quote]Hi My Name Is Inday, I am 16 years old.<br /> I have an ugly face and my friends<br /> call me Neanderthal.[/quote]
and here's the result..
[quote]Hi My Name Is Inday, I am 16 years old.
I have an ugly face and my friends
call me Neanderthal.[/quote]
This will make your overlay neat.
|
- 16th
- » FTalkGeek
- 1388
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
feel free to ask if you find something unusual of hard to understand in this tutorial.. 
|
- ♥brains&beauty♥
- » FTalkManiac
- 626
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
Thanks so much for this! If only I could I would a give a +repu for you! Thanks so much for this tut.
EDIT: Is this compatible with FF?
EDIT: Is this compatible with FF?
Last edited by ♥brains&beauty♥ (2008-05-06 09:30:53)
|
- ♥brains&beauty♥
- » FTalkManiac
- 626
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
Thanks so much! I promise when I get my 100 posts, I will give you a +repu... =) :thumbsup: Keep it up!
|
- o0khimmy0o
- » n00b
- 16
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
[align=center][u][b]href="http://h1.ripway.com/kulantro/layout/ninja.css" />[/b][/u][/align]
[align=center][/align] i will change it ryt?
[align=center][/align] how wil i change it on my own layout?
[align=center][/align] i wil create my CSS frst den il download it in the ripway.com?
[align=center][/align] ggrr! im a new hir? and i want 2 lern mor things! 
[align=center][/align] but i cant get it! hayz! 
[align=center][/align] but i cant get it! hayz!
|
- 16th
- » FTalkGeek
- 1388
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
yea.. but only this part:
[b]http://h1.ripway.com/kulantro/layout/ninja.css[/b]
if you want to edit the CSS of your overlay, u should make a CSS file and upload it in a file hosting site..
then get the NEW url of you CSS..
finally, replace the old one with the url of your CSS..
|
- anoer
- » FTalkAddict
- 467
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
Before this i want say tengs 4 sare
i'm just [b]Newbie[/b] sorry if my english is so bad
can i ask u something 
can i put tracker in overlays? :idea:
i'm just [b]Newbie[/b] sorry if my english is so bad
can i ask u something can i put tracker in overlays? :idea:
|
- myparis
- » FTalker
- 118
- 0
- 1969-12-31
Re: Hi. I decided to make a tutorial for those who were asking: how can i use a premade overlay? where can i generate the code? what will i do next? etc.. This is a step by step tutorial to answer you
[b][color=red]BEWARE[/color][/b]
The [url=http://h1.ripway.com/kulantro/layout/ninja/ninja.html]LINK[/url] he provided in the overlay layout is infected with Trojan program.
We are using Kaspersky Anit-Virus here in the office.
Here's the evidence of the Trojan in his link:
[url=http://mark16.fileave.com/img/ss1.jpg]http://mark16.fileave.com/img/ss1.jpg[/url]
[url=http://mark16.fileave.com/img/ss2.jpg]http://mark16.fileave.com/img/ss2.jpg[/url]
|