Myspace Profile 2.0 - Top Banner With Clickable Links

Profile 2.0 - Top Banner With Clickable Links

Are you trying to do something like this?



Step 1: Create the Image

First, you need to create the image. It should be 960px wide, and it should also include the text at the bottom (or top) for the links you want people to be able to click. I'm not going to explain how to do that, other than tell you that you can use any image editing program to do it. It will require some skill in Photoshop or something else of your choice. Once you have the image created, you will need to host it somewhere. You can use Tinypic.com or Photobucket.com or your own host, it doesnt really matter, other than "free hosting sites" will have a bandwidth limit, so after a period of time, depending on how much traffic your site gets, it will eventually stop working, so it's best NOT to use a "free hosting site" to host it. Once it's hosted, you will need to copy the DIRECT LINK to the image. If you copy anything other than the DIRECT LINK, it will not work.

Step 2: Place the Image Into Your Profile

Secondly, you will need to get the image positioned above the profile. The easiest way to do that is to use the Profile 2.0 Background Image Generator.

Paste the DIRECT LINK URL into the top box, and select "Profile Containers - Above Content Div". Leave the "Additional Options" set to default (no tile, yes center). Copy the code it gives you, and paste it into the CSS BOX under "Customize Profile".

VERIFY THAT IT WORKED AS YOU EXPECTED BEFORE YOU CONTINUE!

Step 3: Create and Position the Links

Lastly, the hard part. This involves using absolute positioning, and if you have never done this before, it's a bit tricky, so take things slowly.

What we are going to do is position a DIV, and inside of the DIV will be a transparent GIF file that is clickable. This is a two step process for each clickable link, and positioning and sizing it is a tedious process.

So start by putting this into your About Me section:

<div class="link1">
<a href="URL">
<img src="http://x.myspace.com/images/clear.gif">
</a>
</div>


Where URL is where you want the user to go when they click the first link.

Save that, and then go back to your CSS BOX under Customize Profile and add this CSS

div.link1 {border:1px yellow solid;}
div.link1 {position:absolute; left:50%; margin-left:-300px; top:500px;}
div.link1 img {width:10px; height:10px;}



Now look at your profile. Assuming the CSS saved correctly, you should see a little yellow box somewhere near the top left part of your profile. If you dont see it, that means the CSS did not get saved properly. This is a common problem with myspace, so go back to your CSS BOX and double check to make sure it saved. If it didnt save, then add it again, and keep doing that over and over until the little yellow box appears.

Everything working so far? Because this is the part that is tedious and difficult.

Start by adjusting the TOP and MARGIN-LEFT values in the CSS code to position the top/left corner of the yellow box with the top/left of the first text in the image you created. Once you get the numbers correct for it, then start adjusting the height and width numbers in the CSS code so the yellow box fits perfectly around the text for the first link you want to create. Once you get this perfect, then remove this part of the CSS.

div.link1 {border:1px yellow solid;}

(That is the part that creates the yellow border, so removing it will remove only the border, and leave the clickable GIF where you positioned it.)

See now why it's so hard to get people to help you do this? It's not easy at all.

Now that you have link1 done, do the same thing for the rest of the links in your image.

Have Fun!



eXTReMe Tracker


http://abrax.us is in no way affiliated with Myspace.com
All references to Katamari™ are property of Namco Corp.