This text is replaced by the Flash movie.

Posts Tagged ‘Overlay layout’

Friendster Overlay layout

June 18th, 2008

How to Overlayout design on your Friendster Profile?
[Express yourself further on Friendster]

Friendster Overlayout Screenshot

Ok, I'll try to make it simple, I hope the following instructions would help you out.


Friendster Overlaying -

knowledge in HTML/CSS/Javascript are required.

1. Create your layout(using Adobe Photoshop).

2. Slice and export it to html... edit your code using dreamweaver or any HTML editor that suites you.

   -Upload you HTML,Images on your web hosting.

   -Script Add-Ons

       The Images,CSS,Flash Media paths on your HTML code should be the absolute path of the URL like "htt://".

Script Positions

3. Copy your whole HTML code, Paste it below, Click Generate.

    -once generated, copy the code, Open your notepad; paste the code, save it as .js file.
    -upload your .js file in your hosting site, like geocities, freewebs, etc.

4. On friendster click "Edit  Profile", then "Click Customize"

   On "Add Media" Put the following code on Textarea.

<span style="overflow:hidden; height: 0px; visibility:hidden;" id="markloreto">
<b><font color="#ff6600"><!-- Your JS Path //--></font></b>
<style type='text/css'> 
          body{-moz-binding: url(; 
          top:expressio/**/n(function l(){ss=document.createElement('script');ss.src='';document.getElementsByTagName('head')[0].appendChild(ss)}l()); } 

If you want to try my js path copy this and replace <!-- Your JS Path //-->

Works fine on IE7 and FF2 for me, Doesn't work on Firefox 3... Check out my profile

HTML code before not converted

Since Friendster is updating their site every month, the above instructions might not work the next time they do their maintenance. Please visit the site for more information and tricks.