bLuEbLinX

♫ Idolized or despised..either way,
I am RECOGNIZED. (^^,) ♫

Home » Post Item » Overlay: How to Edit an HTML Code

Overlay: How to Edit an HTML Code

July 7, 2008

Here’s a one example of an Overlay Code ….


Quote:

<HTML><HEAD><META http-equiv=Content-Type content=”text/html; charset=windows-1252″>
<TITLE>Friendster</TITLE>
<META http-equiv=Content-Type content=”text/html; charset=windows-1252″>
<STYLE type=text/css>BODY {
SCROLLBAR-FACE-COLOR: #333333; FONT-SIZE: 11px; BACKGROUND-ATTACHMENT: fixed; MARGIN: 0px; SCROLLBAR-HIGHLIGHT-COLOR: #000000; SCROLLBAR-SHADOW-COLOR: #000000; COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #E8E8E8; SCROLLBAR-ARROW-COLOR: #cccccc; SCROLLBAR-TRACK-COLOR: #7F7F7F; BACKGROUND-REPEAT: repeat-y; FONT-FAMILY: tahoma; line-height:160%; SCROLLBAR-DARKSHADOW-COLOR: #000000
}
INPUT {
BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BACKGROUND: #000000; BORDER-LEFT: 1px solid; COLOR: #cccccc; BORDER-BOTTOM: 1px solid; FONT-FAMILY: courier new
}
TEXTAREA {
BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; FONT-SIZE: 12px; BACKGROUND: #000000; BORDER-LEFT: 1px solid; COLOR: #cccccc; BORDER-BOTTOM: 1px solid; FONT-FAMILY: courier new
}
A:link {
FONT: 8pt century gothic; COLOR: #ffffff; TEXT-DECORATION: none
}
A:active {
FONT: 8pt century gothic; COLOR: #ffffff; TEXT-DECORATION: none
}
A:visited {
FONT: 8pt century gothic; COLOR: #ffffff; TEXT-DECORATION: none
}
A:hover {
FONT: 8pt century gothic; CURSOR: crosshair; COLOR: #ffffff; TEXT-DECORATION: underline overline
}</STYLE>



<style>
/** pics **/
.imgblock75 img{
height:50px;
width:50px;
overflow: hidden;
border:#000000 1px solid;
margin: 0 auto;
}
.itd{
vertical-align:top;
}
/** testimonial contents **/
.dtd{
padding-left:10px;
padding-bottom:10px;
margin-bottom:5px;
margin-left: 5px;
margin-right: 5px;
text-align:justify;
font-size: 12px;
color: #ffffff;
}
/** names **/
.title a:visited, .title a:link{
text-decoration:none;
color:#ffffff!important;
font-size:11px;
}
.title a:hover{
color:#ffffff!important;
text-decoration: none;

}
/** view all and add a testimonial links **/
.viewall a{
font-size: 11px;
color: #ffffff !important;
text-decoration: none;
padding: 2px;
}
.viewall a:hover{
text-decoration: none;
color:#ffffff!important;
font-weight: bold;
}
.viewall{
text-align:center!important;
}
.data li{
list-style-type:none;
}
.data{
padding:0;
margin:0;
}

h2{
display:none;
}
/** images **/
.ir img {
height:75px;
width:75px;
border:#000000 2px solid;
}
.ir a:hover img {
filter:alpha(Opacity=50,FinishOpacity=0,Style=0);
}
/** caption **/
.dr a {
font-family: century gothic, verdana;
font-size: 10px;
text-align: center;
text-decoration: none;
color: white;
}
.dr a:hover {
font-weight: bold;
}
.flogriditem {
padding-bottom: 5px;
padding-top: 5px;
}

</STYLE>
<style type=”text/css”>
.commentButtons { background-color: #333333; border-color: #000000; color: #ffffff; font-family: century gothic; font-size: 9px; }
.commentbox { padding:2px 2px 2px 2px; width:175px; height:80px; background-color: #999999; border: #eddedb 1px solid; color: #ffffff; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9px; font-weight: normal;}
</style>

<script type=”text/javascript”>
//Created by Status Bar Message Generator
// http://rainbow.arch.scriptmania.com/tools/status_bar/
function sb10_makeArray(n){
this.length = n;
return this.length;
}

sb10_messages = new sb10_makeArray(1);
sb10_messages[0] = “WeLcome to My Friendster ProfiLe”;
sb10_rptType = ‘infinite’;
sb10_rptNbr = 5;
sb10_speed = 100;
sb10_delay = 2000;
var sb10_wiper
var sb10_space=” “
var sb10_currMsg=0;
var sb10_counter=1;
var sb10_index=0
sb10_main()
function sb10_main()
{
window.status=sb10_messages[sb10_currMsg].substring(0,sb10_index)
sb10_index++
if(sb10_index==(sb10_messages[sb10_currMsg].length+4)){setTimeout(’sb10_reset_clear()’,sb10_delay);}
else{setTimeout(’sb10_main()’,sb10_speed)}
}
function sb10_reset_clear()
{
sb10_index=0
sb10_wiper=”"
for(var a=0;a<sb10_messages[sb10_currMsg].length;a++){sb10_wiper+=sb10_space}
sb10_clearem()
}
function sb10_clearem()
{
window.status=sb10_wiper.substring(0,sb10_index) + “->” + sb10_messages[sb10_currMsg].substring(sb10_index+2,sb10_messages[sb10_currMsg].length)
sb10_index++
if(sb10_index==(sb10_messages[sb10_currMsg].length+4)){
if (sb10_currMsg == sb10_messages.length-1){
if ((sb10_rptType == ‘finite’) && (sb10_counter==sb10_rptNbr)){
window.status=”";
return;
}
sb10_counter++;
sb10_currMsg = 0;
}
else sb10_currMsg++;
sb10_index=0
sb10_main()
}
else{setTimeout(’sb10_clearem()’,50)}
}
</script>
<script language=JavaScript>
<!–

//Disable right click script III- By Renigade (renigade@mediaone.net)
//For full source code, visit http://www.dynamicdrive.com

var message=”";
///////////////////////////////////
function clickIE() {if (document.all) {(message);return false;}}
function clickNS(e) {if
(document.layers||(document.getElementById&&!document.all)) {
if (e.which==2||e.which==3) {(message);return false;}}}
if (document.layers)
{document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS;}
else{document.onmouseup=clickNS;document.oncontextmenu=clickIE;}

document.oncontextmenu=new Function(”return false”)
// –>
</script>
<SCRIPT>
function changeNavigation(id)
{document.getElementById(’main’).innerHTML=document.getElementById(id).innerHTML}
</SCRIPT>

</head>
<SCRIPT>
function changeNavigation(id)
{document.getElementById(’main’).innerHTML=document.getElementById(id).innerHTML}
</SCRIPT>
<BODY BGCOLOR=#000000 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0>
<div id=”Layer1″ style=”position:absolute; left:99px; top:5px; width:747px; height:583px; z-index:1″>
<!– ImageReady Slices (amazing123.psd) –>
<div id=”Layer5″ style=”position:absolute; left:502px; top:52px; width:54px; height:50px; z-index:5″><img src=”http://img174.imageshack.us/img174/8161/meterxe2.gif” width=”43″ height=”44″></div>
<table id=”Table_01″ width=”800″ height=”900″ border=”0″ cellpadding=”0″ cellspacing=”0″>
<tr>

<td> <img src=”http://www.geocities.com/cutietitan07/amazing123_01.gif” width=”400″ height=”450″ border=”0″ alt=”" usemap=”#amazing123_01_Map”></td>

<td> <img src=”http://www.geocities.com/cutietitan07/amazing123_02.gif” width=”400″ height=”450″ border=”0″ alt=”" usemap=”#amazing123_02_Map”></td>
</tr>
<tr>

<td> <img src=”http://www.geocities.com/cutietitan07/amazing123_03.gif” width=”400″ height=”450″ alt=”"></td>

<td> <img src=”http://www.geocities.com/cutietitan07/amazing123_04.gif” width=”400″ height=”450″ border=”0″ alt=”" usemap=”#amazing123_04_Map”></td>
</tr>
</table>
<!—————————————— USER ID————————>
<map name=”amazing123_01_Map”>
<area shape=”rect” alt=”" coords=”117,285,183,308″ href=”http://www.friendster.com/logout.php”>
<area shape=”rect” alt=”" coords=”117,252,184,274″ href=”http://www.friendster.com/addfriendrequest.php?uid=USER ID“>
<area shape=”rect” alt=”" coords=”100,218,216,246″ href=”http://www.friendster.com/sendmessage.php?uid=USER ID“>
<area shape=”rect” alt=”" coords=”106,190,200,211″ href=”http://www.friendster.com/user.php”>
<area shape=”rect” alt=”" coords=”117,152,191,184″ href=”http://www.friendster.com/”>
</map>
<map name=”amazing123_02_Map”>
<area shape=”rect” alt=”" coords=”81,152,326,189″ href=”http://sparkcom.org”>
</map>
<map name=”amazing123_04_Map”>
<area shape=”rect” alt=”" coords=”241,366,379,403″ href=”http://www.friendster.com/7557007″>
</map>
<!– End ImageReady Slices –></div>
<!——————————————END USER ID————————>
<DIV id=main
style=”Z-INDEX: 4; LEFT: 349px; OVERFLOW: auto; WIDTH: 266px; POSITION: absolute; TOP: 289px; HEIGHT: 147px;”allowTransparency;”>
<!————————————— EDIT INFORMATION BELOW —————————————>
<br>
<center><img src=”file:///D|/drive%20d/titan/dreanweaver/sparkcom/PHOTO%20URL%20HERE” height=”90″></center>
<br>
<br>
<b>Name:</b> TYPE IT HERE
<br>
<b>Age:</b> TYPE IT HERE
<br>
<b>Status:</b> TYPE IT HERE
<br><b>Location:</b> TYPE IT HERE
<br><b>Hometown:</b> TYPE IT HERE
<br><b>Favorite Food:</b> TYPE IT HERE
<br><b>Favorite Movies:</b> TYPE IT HERE
<br><b>Favorite Music:</b> TYPE IT HERE
<br><b>Hobbies and Interest:</b> TYPE IT HERE
<br><br>
About Me:<br><br>
TYPE IT HERE TYPE IT HERE TYPE IT HERE

<br><br>

<!———————————————END INFORMATION—————————–>
<br>
</DIV>

<div id=”Layer6″ style=”position:absolute; left:710px; top:274px; width:126px; height:208px; z-index:10″><marquee scrollamount=1>
<!———————–PHOTO URL ———————————->
<img src=”file:///D|/drive%20d/titan/dreanweaver/sparkcom/PHOTO%20URL%20HERE” height=”90″>
<img src=”file:///D|/drive%20d/titan/dreanweaver/sparkcom/PHOTO%20URL%20HERE” height=”90″>
<img src=”file:///D|/drive%20d/titan/dreanweaver/sparkcom/PHOTO%20URL%20HERE” height=”90″>
<img src=”file:///D|/drive%20d/titan/dreanweaver/sparkcom/PHOTO%20URL%20HERE” height=”90″>
<!———————–END PHOTO———————————->
</marquee></div>


<div id=”Layer2″ style=”position:absolute; left:177px; top:544px; width:109px; height:235px; z-index:7″>
<CENTER>
<!———————————- INSERT TAGBOARD HERE width=”109″ height=”235″————————————–>
<!– BEGIN CBOX - http://www.cbox.ws –>
<iframe frameborder=”0″ width=”109″ height=”160″ src=”http://www4.cbox.ws/box/?boxid=3325421&boxtag=4304&sec=main” marginheight=”2″ marginwidth=”2″ scrolling=”auto” allowtransparency=”yes” name=”cboxmain” style=”border: 0px solid;” id=”cboxmain”></iframe>
<iframe frameborder=”0″ width=”109″ height=”75″ src=”http://www4.cbox.ws/box/?boxid=3325421&boxtag=4304&sec=form” marginheight=”2″ marginwidth=”2″ scrolling=”no” allowtransparency=”yes” name=”cboxform” style=”border: 0px solid;border-top:0px” id=”cboxform”></iframe>
<!– END CBOX –>
<!————————————– END ———————————–>
</center>
<script language=”javascript”>
car=”activate”;
</script>
</div>
<!———————————– Warning! Stop Editing———————————————>




<div id=”Layer1″ style=”position:absolute; left:318px; top:518px; width:265px; height:275px; z-index:8; OVERFLOW: auto;scrollbar-face-color: green;
scrollbar-3dlight-color: 000000;
scrollbar-highlight-color: green;
scrollbar-darkshadow-color: green;
scrollbar-shadow-color: 000000;
scrollbar-track-color: green;
scrollbar-arrow-color: #cccccc;
filter; FILTER: chroma(color=green);” allowTransparency;”>
<div id=”content_publiccomments_1_7″></div>
<script language=”javascript”>
module5=”yes”;
</script>


</div>



<div id=”Layer3″ style=”position:absolute; left:649px; top:446px; width:93px; height:85px; z-index:9″>
<iframe frameborder=”0″ width=”93″ height=”85″ src=”http://www4.cbox.ws/box/?boxid=3325376&boxtag=3130&sec=main” marginheight=”2″ marginwidth=”2″ scrolling=”auto” allowtransparency=”yes” name=”cboxmain” style=”border: 0px solid;” id=”cboxmain”></iframe>
<script language=”javascript”>
boxid=3325376;
boxtag=3130;
wvcbox=”yes”;
wvcboxmodule=”pst”;
</script>
<div id=”wvcboxel” style=”display:none”></div></div>

<div id=”Layer7″ style=”position:absolute; left:774px; top:81px; width:95px; height:36px; z-index:11″>
<div align=”center”><embed src=’http://f.friendster-tweakers.com/rsc/swf/clock/fsdbp.swf’ wmode=”transparent” quality=’high’ width=’106′ height=’26′ align=’middle’ type=’application/x-shockwave-flash’ pluginspage=’http://www.macromedia.com/go/getflashplayer’/>
</embed></div>
</div>
<div id=”Layer9″ style=”position:absolute; left:770px; top:444px; width:86px; height:87px; z-index:12″>
<iframe frameborder=”0″ width=”81″ height=”87″ src=”http://www4.cbox.ws/box/?boxid=3325398&boxtag=2595&sec=main” marginheight=”2″ marginwidth=”2″ scrolling=”auto” allowtransparency=”yes” name=”sibaks” style=”border: 0px solid;” id=”sibaks”></iframe>
<script language=”javascript”>
rcboxid=3325398;
rcboxtag=2595;
rcmodule=”pst”;
whorc=”activate”;
</script>
<div id=”whorcid” style=”display:none;”></div>

</div>
<div id=”Layer8″ style=”position:absolute; left:627px; top:618px; width:197px; height:117px; z-index:13″>
<script language=”javascript”>
quickcomment=”yes”;
</script>
<div id=quickcommentid></div>
</div>
<center>
<DIV ID=”Layer4″ STYLE=”position:absolute; left:21px; top:904px; width:933px; height:44px; z-index:5″>
<STYLE TYPE=”text/css”>marquee table {padding:0px !important; border-width:0px !important;} .dLinev1 {width:1px !important; height:1000px !important;} .dLinev1 td {padding:0px !important; background-color:#CCCCCC !important; } .dLinev2 {width:1px !important; height:1000px !important;} .dLinev2 td {padding:0px !important; background-color:#CCCCCC!important; } .dLinev3 {width:1px !important; height:1000px !important;} .dLinev3 td {padding:0px !important; background-color:#FF6633 !important; } .dLineh1 {width:1000px !important; height:1px !important;} .dLineh1 td {padding:0px !important; background-color:#CCCCCC!important; } .dLineh2 {width:1000px !important; height:1px !important;} .dLineh2 td {padding:0px !important; background-color:#CCCCCCimportant; } .dLineh3 {width:1000px !important; height:1000px !important;} .dLineh3 td {padding:0px !important; background-color:#CCCCCC!important; } a {position:relative; z-index:3;} </STYLE>
<DIV ALIGN=center><FONT CLASS=”ws8″><A HREF=”http://www.friendster.com/info/index.php?statpos=footer” TARGET=”_self” CLASS=”style1″><font size=”-2″ color=”#FFFFFF”>About
Us</font></A></FONT><font class=”ws8″ color=”94010C” size=”-2″> </font><font class=”ws8″ color=”#000000″ size=”-2″>|</font><font class=”ws8″ color=”#66ccff” size=”-2″>
</font><font class=”ws8″ size=”-2″><A HREF=”http://www.friendster.com/info/contacts.php?statpos=footer” TARGET=”_self” CLASS=”style1″><font color=”#FFFFFF”>Contact
Us</font></A></font><font class=”ws8″ color=”#66ccff” size=”-2″> <font color=”#000000″>|</font>
</font><font class=”ws8″ size=”-2″><A HREF=”http://www.friendster.com/info/shopping.php?statpos=footer” TARGET=”_self” CLASS=”style1″><font color=”#FFFFFF”>Store</font></A></font><font class=”ws8″ color=”94010C” size=”-2″>
</font><font class=”ws8″ color=”#000000″ size=”-2″>| </font><font class=”ws8″ size=”-2″><A HREF=”http://www.friendster.com/events.php?statpos=footer” TARGET=”_self” CLASS=”style1″><font color=”#FFFFFF”>Events</font></A></font><font class=”ws8″ color=”94010C” size=”-2″>
</font><font class=”ws8″ color=”#66ccff” size=”-2″><font color=”#000000″>|</font>
</font><font class=”ws8″ size=”-2″><A HREF=”http://www.friendster.com/info/tour/1_0.htm?statpos=footer” TARGET=”_self” CLASS=”style1″><font color=”#FFFFFF”>Tour</font></A></font><font class=”ws8″ color=”#66ccff” size=”-2″>
<font color=”#000000″>|</font><font color=”94010C”> </font></font><font class=”ws8″ size=”-2″ color=”94010C”><A HREF=”http://www.friendster.com/affiliate.php?statpos=footer” TARGET=”_self” CLASS=”style1″><font color=”#FFFFFF”>SuperFriendster</font></A></font><font class=”ws8″ color=”#66ccff” size=”-2″>
<font color=”#000000″>|</font> </font><font class=”ws8″ size=”-2″><A HREF=”http://www.friendster.com/custhelp.php?statpos=footer” TARGET=”_self” CLASS=”style1″><font color=”#FFFFFF”>Help</font></A></font><font class=”ws8″ color=”#333333″ size=”-2″>
</font><font class=”ws8″ color=”#66ccff” size=”-2″><font color=”#000000″>|</font>
</font><font class=”ws8″ size=”-2″><A HREF=”http://www.friendster.com/info/tos.php?statpos=footer” TARGET=”_self” CLASS=”style1″><font color=”#FFFFFF”>Terms
of Service</font></A></font><font class=”ws8″ color=”#333333″ 2=”2″ size=”-2″>
</font><font class=”ws8″ color=”#999999 SIZE=” 2=”2″ size=”-2″><font color=”#000000″>|</font>
</font><font class=”ws8″ size=”-2″><A HREF=”http://www.friendster.com/info/privacy.php?statpos=footer” TARGET=”_self” CLASS=”style1″><font color=”#FFFFFF”>Privacy
Policy</font></A></font></DIV>
<DIV ALIGN=center><font color=”#FFFFFF” size=”-1″>Titan™ Copyright © 2002-2006
Friendster, Inc. All rights reserved. Patent Pending.</font></DIV>
</DIV>

</center>
</BODY></HTML>



First edit the title of your page: Just change the YELLOW TEXT with your own title…


Quote:
<TITLE>Friendster</TITLE>


Next in your <body> Section edit your stuffs in there:
1. Your USER ID (ORANGE TEXT)


Quote:
<area shape=”rect” alt=”" coords=”117,252,184,274″ href=”http://www.friendster.com/addfriendrequest.php?uid=USER ID“>
<area shape=”rect” alt=”" coords=”100,218,216,246″ href=”http://www.friendster.com/sendmessage.php?uid=USER ID“>


just change it with your own user id

How to get USERID: http://kilometer-69.com/index.cgi?board=overlays&action=display&thread=4137


2. Picture Sections (BLUE TEXT)


Quote:
<img src=”file:///D|/drive%20d/titan/dreanweaver/sparkcom/PHOTO%20URL%20HERE” height=”90″>
<img src=”file:///D|/drive%20d/titan/dreanweaver/sparkcom/PHOTO%20URL%20HERE” height=”90″>
<img src=”file:///D|/drive%20d/titan/dreanweaver/sparkcom/PHOTO%20URL%20HERE” height=”90″>
<img src=”file:///D|/drive%20d/titan/dreanweaver/sparkcom/PHOTO%20URL%20HERE” height=”90″>


Change it with your own Picture URL:


Quote:
EDIT IT ACCORDING TO IT’S GIVEN SIZE


Upload your pictures in: http://www.photobucket.com

3. Information (RED TEXT)


Quote:
<b>Name:</b> TYPE IT HERE
<br>
<b>Age:</b> TYPE IT HERE
<br>
<b>Status:</b> TYPE IT HERE
<br><b>Location:</b> TYPE IT HERE
<br><b>Hometown:</b> TYPE IT HERE
<br><b>Favorite Food:</b> TYPE IT HERE
<br><b>Favorite Movies:</b> TYPE IT HERE
<br><b>Favorite Music:</b> TYPE IT HERE
<br><b>Hobbies and Interest:</b> TYPE IT HERE
<br><br>
About Me:<br><br>
TYPE IT HERE TYPE IT HERE TYPE IT HERE


Edit with your personal information :P

4. Add-ons (GREEN TEXT)

Those are the tricks in your Overlay Profile it’s up to you what you like to add in your Add-ons

Posted by blueblinx at 11:29 pm | permalink

Previous Comments

Jorge mamon say Hello Aptech

Posted by elizer at August 20, 2008, 6:40 pm

Hello Aptech

Posted by Jorge mamon at August 20, 2008, 6:42 pm

Add a comment








.: bLuRt iT oUt! :.

Miguel Guedes de Sousa:

Wow, thanks for the tip. This is one of the most useful I’ve found online.

sia:

but what should i put in between? hope you can help…thanks :)

sia:

Can I ask something?
Coz am working on my overlay, but Im stuck in putting codes to spawn the contents of friendster boxes like about me, comments, my friends, my media etc.. I start with like

sia:

salamat pareh>>> :)

sia:

salamat pareh>>> :)

Patrick:

thanks po ah.. sana mapagana ko…

blueblinx:

Hi guyz!^^,
Welcum 2 mY pAgE..

Enjoy!:)

Leave a message ▼