How to make your own friendster overlay: 

For those who have been wanting to make their own friendster overlay but don’t know how, here’s a little tutorial that will guide you in making a simple overlaid profile.

1. Using Adobe Photoshop, create a new page 970 pixels by 3000 pixels (the length we could always cut in case there’s so much unwanted space left).

2. Very much like a scrap page, create your page using your paper, and embellishments. Of course, you can always use your pictures instead to design your page.

3. Don’t forget to include the texts that will serve as your link (e.g. Home, Profile, Logout, Add a Comment, etc)

4. Provide boxes for your preferred profile elements (testimonials, friends list, friendster albums). If you like to add the “who-viewed-my-profile” tracker, better have a video or mp3 player, where you can *hide* the tracker. These boxes gives us an idea of the exact placement/location of the elements.

5. You can always add anything you like. Chatbox, videos, or MP3 players. Or links to your favorite blogs, or even links to your (webshots or friendster blog) photo albums.

6. Save it as jpeg. So what you have is a big picture of what you want your profile to look like. What you  have are blank boxes for your testimonials, friends list, friendster albums and extras (chatbox, videos or flicker).

By the way, this time you can see if there is an unwanted space below your profile, feel free to crop it.

7. Open the jpeg file using ImageReady.

8. Using the slice tool. Slice the texts (that you plan to use as links)

and the boxes (for your elements like testimonial box and albums/videos/flickers).

9. To add links to your texts and albums, use the “slice select” tool (just beside the slice tool). Double click the box/text that you will link, the slice select window will appear. Type in the corresponding URL to your box/text.

In this sample, you will see that the “logout” text is being linked to http://www.friendster.com/logout.php

10. For your personal links (add a comment, send me a message, etc), make sure to put in your correct friendster user ID.
e.g. SEND MESSAGE = “http://www.friendster.com/sendmessage.php?uid=xxxxxxx”

11. Save optimized as…Choose save as type “HTML and Images (*.html)”

12. What you’ll have is an html file and a folder that contains your sliced images.

13. Upload your images to your image host (before I got my host, I used to have my images hosted at Photobucket, quite reliable). Make sure to upload them on one folder only so as to avoid confusion. Get the folder path of your images (e.g. http://i7.photobucket.com/albums/y254/michellethea/pink/ is my folder)

14. Open the html file (generated from Step 11) in notepad. Replace all src=”images/ with your own path. Using the previous example, I will replace all src=”images/ with src=”http://i7.photobucket.com/albums/y254/michellethea/pink/.

Save.

15. This is now a working profile with all your images and links. Next is to add other elements (testimonial box, friends list, groups, fan of). To check the complete auto update add-ons, click here.

16. I will guide you through the testimonial box. The rest of your elements, you do it for practice ok? This applies also to your flicker, videos and mp3 players.

17. You need to add this code to your HTML but you have to customize it according to your profile:

The first (red) part is your code for the placement and size of your element.
The second (blue) part is the code of the element itself.

You can change the color according to your profile theme.

18. Determine the image number of your testimonial box through your imageready file. In our example, I can see that it’s my image 45.

19. On the html file, look for the dimensions of that image.

Revise the code according to the dimensions you found.

This is the size of your element.

20. The next part is quite tricky. You will have to determine the location of your element.
To get the LEFT attribute, add the width of all images that lie on the left of your image.
To get the TOP attribute, add the height of all images that lie above your image.

21. Get the “testi box” code (and all other auto update codes) from here.

22. This works the same with all your other elements. Even your flicker, videos and chatbox. You may hide the tracker behind your videos (or any element that is not transparent).
Save.

23. Copy and paste your code here and follow the instruction to paste on your friendster media box.