pop! goes my heart

Designer's Comments

Look carefully for specific instructions

Layout looks best in Firefox or IE (IE has slightly different coloring, though -- it's not "seamless") with a 1280x1024-ish resolution.

Girl image is from deviantART stock and font used is kaileen.

Replace the "########" with the corresponding FriendID. The IDs in the "friends" div should be your friends; all others are your own.

If you remove the credit link from the heart, the heart will not show, and you'll be left with an odd blank space in your "about me box". Keep it there :).

Using This Layout

For specific instructions read designer's comments

This is a div overlay layout, html knowledge required!
1. Log into myspace.com
2. Click on Edit Profile (Profile 1.0)
3. Copy (ctrl c) and paste (ctrl v) code to the specified fields

Update Friend ID

Input Friend ID to automagically update code

Layout Code

Copy and paste to About Me

Help

<p><a href="http://www.createblog.com/myspace-layouts/" title="Grab Myspace Layouts and Myspace Codes"><img src="http://www.createblog.com/images/link1.gif" border="0" alt="Myspace Layouts" style="position:absolute;top:0px;left:0px;width:10px;height:27px;" /></a></p><style type="text/css">
table, tr, td {background-color: transparent;}
table table table table, table table table table td.text, table.contactTable, .whitetext12, .nametext, td.text td.text table, div b font font, div font font u {display: none;}
td.text table, .orangetext15 {visibility: hidden;}
td.text table table {display: inline; visibility: visible;
}
body{
background-color: 66CCCC; 
margin: 0px;
}
b, strong {color: 006633;
}
i, em {color: FF6666;
}
a, a:link, a:active, a:visited {
color: FFFFFF;
text-decoration: none;
font-weight: normal;
font-family: Comic Sans MS;
font-size: 7pt;
text-transform: lowercase;
background-color: transparent;
}
a:hover {
color: FF99CC;
cursor: crosshair;
text-decoration: none;
}
.cover {
background-color: 66CCCC;
position: absolute;
left: 50%;
top: 0px;
width: 800px;
margin-left: -400px;
}
.navigation {
width: 275px; 
height: 380px; 
position: absolute;
top: 440px;
left: 50%; 
margin-left: 40px; 
}
.content {
width: 240px; 
height: 145px; 
position: absolute; 
top: 205px; 
left: 50%; 
margin-left: 0px; 
overflow: auto;
}
.content, div, .content div {
font-family: Comic Sans Ms, 
sans-serif; 
font-size: 7pt; 
text-transform: lowercase;
color: 000000;
scrollbar-arrow-color: FF99CC;
scrollbar-face-color: 66CCCC;
scrollbar-track-color: 66CCCC;
scrollbar-3dlight-color: 66CCCC;
scrollbar-highlight-color: 66CCCC;
scrollbar-shadow-color: 66CCCC;
scrollbar-darkshadow-color: 66CCCC;
}
.heart {
width: 71px; 
height: 62px; 
position: absolute; 
top: 275px; 
left: 50%; 
margin-left: -90px; 
}
.friends {
width: 125px; 
height: 165px; 
position: absolute; 
top: 465px; 
left: 50%; 
margin-left: -95px; 
overflow: auto;
}
.comment {
width: 200px; 
height: 145px; 
position: absolute; 
top: 150px; 
left: 50%; 
margin-left: -235px
}
a img {border: 0px;}
.navimg a img {
width: 181px; 
height: 40px; 
background-position: top left; 
background-repeat: no-repeat; 
background-color: white;
}
.navimg a:hover img {background-position: bottom left;}
a.nav1 img {background-image: url('http://cbimg9.com/layouts/07/07/10/19328ae.png');}
a.nav2 img {background-image: url('http://cbimg9.com/layouts/07/07/10/19328af.png');}
a.nav3 img {background-image: url('http://cbimg9.com/layouts/07/07/10/19328ag.png');}

a img {border: 0px;}
.heartimg a img {
width: 71px; 
height: 62px; 
background-position: top left; 
background-repeat: no-repeat; 
background-color: white;
}
.heartimg a:hover img {background-position: bottom left;}
a.heart1 img {background-image: url('http://cbimg9.com/layouts/07/07/10/19328ah.gif');}

</style>

<div class="comment">
<center><form method="post" action="http://comments.myspace.com/index.cfm?fuseaction=user.ConfirmComment"><input name="friendID" value="########" type="hidden"><textarea name="f_comments" style="width: 175;

height: 75px;" cols="10" rows="7" style="border-width: 0px; border-style: solid; border-color: 000000; font-family: Comic Sans MS; text-transform: lowercase; letter-spacing:1pt; font-size: 9px; color: 000000; background-color: ffffff;"

style="overflow:auto;">pop! goes my heart (and the balloon) ...</textarea> 
<br> <input value="pop!" style="border-width: 0px; border-style: solid; border-color: 000000; width:75px; font-family: small fonts; text-transform:uppercase; letter-spacing:1pt; font-size: 7px; color: 000000; background-color: ffffff;"

type="submit"> <input value="nooo! ;_;" style="border-width: 0px; border-style: solid; border-color: 000000; width:75px; font-family: small fonts; text-transform: uppercase; letter-spacing:1pt; font-size: 7px; color: 000000;

background-color: ffffff;" type="reset"></form></center>
</div>

<div class="friends">
<marquee direction="up" style="text-align: center; height: 100%">
<a href="http://www.myspace.com/########">Friend #1<br>
<img src="http://cbimg9.com/layouts/07/07/10/19328ad.png" /></a><br><br>
<a href="http://www.myspace.com/########">Friend #2<br>
<img src="http://cbimg9.com/layouts/07/07/10/19328ad.png" /></a><br><br>
<a href="http://www.myspace.com/########">Friend #3<br>
<img src="http://cbimg9.com/layouts/07/07/10/19328ad.png" /></a><br><br>
<a href="http://www.myspace.com/########">Friend #4<br>
<img src="http://cbimg9.com/layouts/07/07/10/19328ad.png" /></a><br><br>
<a href="http://www.myspace.com/########">Friend #5<br>
<img src="http://cbimg9.com/layouts/07/07/10/19328ad.png" /></a><br><br>
<a href="http://www.myspace.com/########">Friend #6<br>
<img src="http://cbimg9.com/layouts/07/07/10/19328ad.png" /></a><br><br>
<a href="http://www.myspace.com/########">Friend #7<br>
<img src="http://cbimg9.com/layouts/07/07/10/19328ad.png" /></a><br><br>
<a href="http://www.myspace.com/########">Friend #8<br>
<img src="http://cbimg9.com/layouts/07/07/10/19328ad.png" /></a><br><br>
</marquee>
</div>

<div class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed faucibus mauris a nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Donec vel

quam vel nunc congue commodo. Morbi dolor tortor, pulvinar at, nonummy eu, dictum eget, neque. Integer et lorem. Vestibulum vel odio. Aenean arcu lorem, lacinia pellentesque, posuere nec, auctor vitae, neque. Cras consequat.

Suspendisse pede ante, pretium non, volutpat quis, tempor id, nunc. Aliquam erat volutpat. Vivamus cursus. Etiam diam orci, tempus id, venenatis quis, posuere non, urna. Fusce tempor, massa ac hendrerit congue, neque nulla

ultricies elit, in venenatis neque sem eu sapien. Integer imperdiet, eros vel fringilla tempor, turpis ligula mollis orci, nec lacinia pede ipsum et leo. Etiam tempus eros.
<br><br>Sed sagittis, nisl sit amet dapibus egestas, felis mi faucibus orci, sed tristique mi odio et turpis. Mauris dictum nulla ut lectus feugiat ornare. Maecenas sodales, lacus eu ultrices adipiscing, massa neque condimentum

justo, ac iaculis augue sem a nulla. In fermentum lectus quis lacus. In vitae risus. Integer ac dolor. Aliquam rutrum fringilla dui. Phasellus in neque. Donec ipsum orci, sollicitudin vel, tristique et, faucibus condimentum, nunc. Proin

convallis dolor vitae felis. Duis lobortis turpis id eros. Aliquam tortor. In semper ullamcorper libero. Maecenas non lorem. Maecenas dui enim, fermentum iaculis, cursus vitae, ultrices at, elit. Aliquam erat volutpat.
<br><br>Donec et libero sit amet felis vulputate accumsan. Aliquam adipiscing hendrerit lorem. Vestibulum at quam sit amet dolor dictum pharetra. Integer ac lorem at libero varius laoreet. Aenean sed augue sit amet neque

hendrerit blandit. Praesent pellentesque posuere sapien. Phasellus vitae augue quis pede eleifend consectetuer. Vivamus condimentum lorem sed purus. Etiam ipsum ante, vehicula eu, malesuada sed, dictum sit amet, velit.

Cras ultricies. Nam risus magna, posuere vel, laoreet imperdiet, aliquet quis, nisl. Suspendisse eget massa. Integer felis. Morbi lobortis. Nullam egestas massa nec lectus.
<br><br><b>Bold</b>
<br><i>Italics</i>
<br><u>Underlined</u>
<br><a href="#">Hyperlink</a>
</div>

Layout Comments

Showing latest 10 of 25 comments

it's interesting.

By Butterface89 on Sep 11, 2010 4:44 pm

This sorta looks like it was made on paint >.

By hthr95 on Jun 30, 2009 8:01 am

This is very nice. Good job. :)

By Mikeplyts on Apr 7, 2009 1:13 am

Really nice layout!!
shouldnt the background colour code be #5BC6C6 ? x

By CLAZii3 on Sep 9, 2007 2:33 pm

there's a link to home,add and message but none for pictures? Am i missing soemthing?

By miiszfreaky on Aug 29, 2007 8:38 pm

thank you cikayelle. it finally worked [:

By annuhhvuux3 on Jul 21, 2007 3:19 pm

Okay...erm...first, ahhnuhh, copy the code, and paste it into Notepad, or some other similar text editor. I find it easier to read/edit code in fullscreen mode rather than a little form box.

Once there, look for "div class='navigation'". Within that div, there should be two "########," and replace those with your Friend ID. Right under that navigation div is the div for comments. There's only one "########" in it.

That should be all you touch, unless you want to edit your friends, but until you get real comfortable with being able to recognize code, I'd put that off for later.

If you're only touching what you're supposed to, there should be no problem, unless you're getting the wrong FriendID. Some tutorials tell you to go to "Home," and your Friend ID should be at the end of that, but for me, it doesn't show up sometimes, so what I do is go to my page (with everything cleared, or copied to another blank Notepad, so you have the original MySpace layout) right click any function on the contact table (except for IM/Chat) and click either "Copy link location" or "Properties," depending on which browser you have. Once you have the address copied, paste it into Notepad again, and look for the last eight digits after it says Friend ID.

Sorry if it's a little confusing, but I hoped that helped. Please tell me if it's still not working :x.

By cikayelle on Jul 20, 2007 11:51 pm

this certain layout is really nice. somehow, I think I'm doing something wrong with the friend id thing. people can't add comments/message me. HELP? please&thankyou

By annuhhvuux3 on Jul 20, 2007 9:32 pm

reminds me of that film music and lyrics cause hugh grant sings a line pop goes my heart

By lilaznyume on Jul 13, 2007 9:22 pm

This looks very weird, but nice.

By YourSuperior on Jul 11, 2007 11:10 pm

View all »

Layout Details

Designer	cikayelle
Submitted on	Jul 10, 2007
Page views	50,368
Favorites	240
Comments	25
Reviewer	freeflow
Approved on	Jul 10, 2007