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
You are viewing a post by 16th. View all 32 posts in 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.
2008-05-05 10:15:26
- 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..
 |