How to Make A Friendster Overlay Profile Part 3

Difficulty: Moderately Easy

Instructions

Things You'll Need:

Macromedia Dreamweaver 8
Notepad
A Web Host
Marky Trigger's Overlay Generator
Your brain and patience

Step 1

Open your layout’s HTML file. As you can see, It’s aligned on the left side of the screen. What we are going to do is place our layout in the center. Go to View > Source to view the HTML codes in Notepad.
Step 2

When already in Notepad, type CENTER after the /HEAD tag and /CENTER after the /BODY tag to make our layout centered. After that, press Ctrl + S on the keyboard to save the changes you’ve made (do not close the notepad yet! Just minimize it on the taskbar.) then Refresh your browser to view your now centered layout.
Step 3

You may want to change the background color of our page (currently in White) so that it will blend with our layout’s color.
Step 4

For this tutorial, we’ll also use Black to blend with our layout. To change the Background Color, just view your Notepad again (I told you not to close the notepad on Step 2 right?) then just change the value of BGCOLOR from #FFFFFF (white) to #000000 (black). This is called Hexadecimal Colors. You can also use words like Black instead of Hexadecimal but it is only used for Primary Colors such as Blue, Red, Green, Pink, Yellow, etc. After that, save the changes again by pressing Ctrl + S on the keyboard and Refresh your browser to view your work. You can now close the Notepad and your browser as we will now use Dream Weaver for the rest of our codes so get ready. =)
Step 5

To start editing in Dreamweaver, right-click your HTML file then click Edit with Dreamweaver 8. Or you can just run your Dreamweaver and open your HTML file there.
Step 6

First thing to do is to make layers for the whole layout then we’ll also do this on our boxes. Layering is where you place boundaries for the corresponding items and categorize them to help us view and edit our codes easily. You’ll understand more as we move on. To start making our first layer, select or highlight the whole body codes from BODY to /BODY. Then click on the Design tab to view our layout as if we’re viewing it on an internet browser.
Step 7

When you’re on the Design page, click Insert > Layout Objects > Layer.
Step 8

And this box will appear. Drag this box across your whole layout. Your whole layout is marked by the dotted lines. You can also see this dotted lines at the bottom as you drag down the layer box.
Step 9

After you’ve done placing the layer for the whole layout, set the Overflow setting to AUTO. This is our Layer 1. Click the Code tab as we’ll make a little editing for our codes.
Step 10

As you can see, a CSS or Cascading Style Sheet (If you don’t know what CSS is, look for it on the net.) and a DIV tag with a label or ID named Layer 1 was added in the upper and lower part of our code. It will be always like this as we create more layers.
Step 11

Remember that our Layer 1 should be the whole layout. So make a new line after the BODY tag by pressing Enter on the keyboard then cut the div id = ”Layer1” tag and paste it on the blank new line we’ve just created. Also, we can delete the CENTER tag now as we’ll not need this anymore because the layout is now fixed in the center by the use of our Layer.
Step 12

Now that you know how Layers work, we’ll now use it on our boxes (About Me, Comments, Chatbox, etc). Let’s start making a layer for our About Me box. Go to Design page . I hope you already know how to make a Layer Box, if still not, go back to Step 7. After you created another box, drag it to your About Me box and place it inside. Make sure to put a little allowance on all 4 sides and set the Overflow setting to AUTO. Then you can also change the name or ID of this layer, let’s change it by typing “AboutMe” so that we can easily find the layers if you plan to edit the codes for a layer in the future. When you’re done, go back to Code page again coz we’ll do another code editing here.
Step 13

On the Code page, notice that a CSS and a DIV tag we named “AboutMe” has been added in our codes, I already told you that it’ll be always like this right? (See Step 10) But this time, we don’t have to move the DIV tag. We just need to make a comment. What’s the use of this? Nothing. Really. Because it won’t do anything to your codes, but it helps you manage your codes easily when planning to edit again in the future. To make a comment, follow the format on the screenshot. Because this is the code section for our About Me, just type About Me for the comment. As you can see in the image, I make another comment at the end, which is End About Me. I recommend that always put a comment like this to help you determine the start and end of your code.
Step 14

For the remaining boxes, just repeat Steps 12 to 13. Still, make allowances for every Layer Box you’ll make and just change the name or ID for your layers. I suggest that follow the way I place the codes as it will help you save time to find and edit your codes. This is my outcome.
Step 15

Now we’re done Layering our boxes and layout, it’s time to put codes to spawn the contents of our boxes. Let’s start with the About Me box. Remember the file I told you to download? Open it and extract the files if you haven’t done it yet. Then open the text file named “About Me”, follow the instructions I gave you (copy and paste the code). If you still don’t know how to do this, refer to this image and read.
Step 16

Same procedure on applying the codes for your remaining boxes (Step 15). Further information on editing your codes is on the text documents included in the file you’ve downloaded. Just follow the instructions there. Make sure you put your codes correctly. When you’re done coding your layout (as in everything’s done), we’ll now upload the HTML and Image files to a web host of your choice! And I hope that you already have one. For this tutorial, I’ll show you how to upload on freewebtown.com. This is what I use on my files, but you can find another web host if you want. Signing up on this web host is free and it also has an online HTML editing feature. So to move on, Log In with your account and after the page loads, scroll down the page and click File Manager.
Step 17

You will then see this page. This is where you can manage and organize your files with the help of these control buttons. But we’re here to upload your HTML file and Images so we’ll just use the Single Uploader. But you can also use the other two uploader if you want.
Step 18

After you’ve clicked the Single Uploader button, you’ll go to this page. Locate your files by clicking the Browse button and when your ready to upload them, just click the Upload Files button to start saving. Uploading takes a minute or two depending on your connection so kindly wait for a moment.
Step 19

When the files has been saved to the web host, you will be returned to this page again to further edit your uploaded files. We’re almost done here but we need to do one last thing. Now go to the next step.
Step 20

What we’re going to do is put the URL of our images saved in this web host to our HTML codes. If we don’t do this, your images won’t show up when you view your page in Friendster. This is very simple, know your account’s URL, if you are using freewebtown.com like me, you can find your URL here. (please refer to the image)
Step 21

Now that you know your account’s URL, it’s time to add your Image’s file name to the address to make a full URL for our image. Here’s how to do it. (refer to the image) Of course do not copy this URL or my images will be the one who’ll show up to your page. =)
Step 22

OK, now that you’re already done with your URLs, we’ll now place them to our HTML codes. Open your HTML’s code by using the Dreamweaver, Notepad or by clicking the Edit button on your web host. Here I use Dreamweaver, the images we are going to change is located in the BODY tag. Change the URL of the images then save. IMPORTANT: If you used Dreamweaver or Notepad you will have to edit your HTML’s file code in your web host. So after you’ve saved the changes, copy the whole code then click the Edit button on your File Manager page to open the online HTML editing of your web host. Select all the contents, delete, then paste the new codes and click Save. Done! Remember that if you need to make changes to your codes, always save it to your web host or the changes will not take effect.
Step 23

We’re almost finished! We just have to generate our codes on Marky Trigger’s Overlay Generator. Go to www.marckyctrigger.com and select OGstandard in the list of generators. This page will show up, all you have to do is copy your whole HTML codes and paste it on the first box then click the Generate button. The generated code will appear on the second box and just waiting to be copied. So copy the generated code, go to your Friendster’s Media Box in the Edit page, save the generated code there and view your profile! Congratulations!!! You now have your Friendster’s profile overlaid!
Step 24

Now I’m done making this 3 part tutorial on how to make your own overlay profile. I hoped that you enjoyed reading and learning as well. I’m very happy that I have shared my knowledge to you guys. So, I thank you all for supporting my tutorials. Don’t forget to post a Thank You comment here or at my Friendster to receive the password for the file you’ve downloaded. I wish you good luck on your layouts, remember that you can add more effects to your layouts by using Javascripts and CSS on your codes. Please keep on viewing my articles as I will update the contents like providing download links for those who do not have the softwares used in my tutorials. Again, congratulations for finishing this tutorial and Thank You very much! See you again on my next projects!!! =)

Marc Hyde 078

Comments and suggestions are welcome.
Contact me: hyde_078@yahoo.com (Friendster and Yahoo!)

IMPORTANT!!!
After you finish your layout, make sure you have a credit links on it. Give credits to those who and what helped you to finish your layouts... Images, Chatbox, Overlay Generator, web hosts and of course, me and my tutorials. Because without them, especially Marky's generator, overlay profiles will not exist. Below are the ones you can give credits to, including mine, you can copy these to your profile's credits links. Thank you again!

Credits:
Marc Hyde's Overlay Tutorial
Part 1 - http://www.ehow.com/how_2255147_friendster-overlay-profile-part.html

Part 2 - http://www.ehow.com/how_2261401_friendster-overlay-profile-part.html

Part 3 - http://www.ehow.com/how_2261960_friendster-overlay-profile-part.html

My Friendster Profile - http://profiles.friendster.com/5523466
(NOTE: you can credit me by linking to my Friendster page or to all or just the Part 1 of my tutorial)

CBOX – www.cbox.ws

Markyctrigger’s Overlay Generator – www.markyctrigger.com

Free Web Town – www.freewebtown.com

---------------------------------------------------------------------
If you want to use my tutorials, please contact me first thru my Friendster or Yahoo! Thank You!

Technorati - nw3merusx2

Comments

ixkevzxi said

on 7/4/2009 i cant download it....can you send it to me??? please.. here's my e add ixzvekxi@rocketmail.com... thanks in advance... oh with the password please... tnx again

nve09 said

on 7/1/2009 how can i get the password pls.?

thank u.
ah,by the way, i added u up olredi in fs.

on 6/28/2009 when i click the link it said that the file was deleted by the uploader, how can i finish my work art fruit of your tutorials if i cant continue that with that problem...please help me i want to impress my friends..please

on 6/28/2009 hi,i'm a fan of yours,i was on th 3rd part of your tutorial but i can't download the overlay codes?can you help me please.do i have to sign in first using your account?can i have the info. email me at munwok@gmail.com tnxs..