Top 8!

Tags: top 8, top eight, myspace, friends, friendspace, code, hyperlink, table

Description:

Add me to your friends list here

Make sure to credit me by linking my page on your profile or adding me to your top 8 😁.

This Top 8 will not have it's own fonts, so it will automatically change based on the styles you used on your page. This makes the code more responsive. Oh and it's supposed to squish when on mobile, just so that it doesn't go outside your page.

-----------------------------------------------------------------------------------------------------------

Copy and paste this text into a friend's comment section to persuade them to get a top 8! PS everyone should have a top 8 until it becomes a real feature like back in the day:

Hey! You should definitely get a top 8! I have one and you should have 1 too! It's really cool. It's just like MySpace's official feature back in the day, attach the plugin to your profile at https://layouts.spacehey.com/layout?id=27380 I hope you add me btw!

--------------------------------------

If my layout doesn't work, try this one instead

DO NOT use spacehey static profile direct links (Right clicking on a profile picture on spacehey and then copying the image url). Spacehey deletes images frequently, then recovers the ones in use to ease the load of storage needed for these pictures. Instead, open the images in a new tab and download them to your drive. After that, you'll need to host them online. You can use photobucket, imgur or my favourite (discord). Obtain each image URL and insert them where needed. I get this issue mailed to me alot, I noticed this ages ago and decided to just add this info to the code.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by rai-rai 😎 (https://layouts.spacehey.com/layout?id=27380) -->

<!-- rai's TOP 8 -->
<!-- If the Top 8 isn't working, contact rai at: https://spacehey.com/raidynamics -->
<div class="top-eight">
<div class="top-eight-header">
    <h2>Top 8 friends </h2>
  </div>

<!-- #1 -->
  <div class="person">
    <a href="https://spacehey.com/raidynamics"><!-- #1 Link to profile -->
    <p class="one-four">rai!</p></a><!-- NAME -->
    <a href="https://spacehey.com/raidynamics"><!-- Link to profile -->
        <img src="https://cdn.discordapp.com/attachments/1087104094847651900/1087104130767667321/EdTWc5LWoAYFSur.jpg"/><!-- Link to profile picture --></a>
  </div>
 
<!-- #2 -->
  <div class="person">
    <a href="profilelinkinserthere"><!-- #2 Link to profile -->
    <p class="one-four">Name</p></a><!-- NAME -->
    <a href="profilelinkinsert"><!-- Link to profile -->
    <img src="imageURLhere" alt="profile picture"/><!-- Link to profile picture --></a>
  </div>
 
<!-- #3 -->
  <div class="person">
    <a href="#"><!-- #3 Link to profile -->
    <p class="one-four">3-slot</p></a><!-- NAME -->
    <a href="#"><!-- Link to profile -->
    <img src="https://cdn2.iconfinder.com/data/icons/metro-ui-dock/512/myspace_alt.png" alt="profile picture"/><!-- Link to profile picture --></a>
  </div>
 
<!-- #4 -->
  <div class="person">
    <a href="#"><!-- #4 Link to profile -->
    <p class="one-four">4-slot</p></a><!-- NAME -->
    <a href="#"><!-- Link to profile -->
    <img src="https://cdn2.iconfinder.com/data/icons/metro-ui-dock/512/myspace_alt.png" alt="profile picture"/></a><!-- Link to profile picture -->
  </div>
 
<!-- #5 -->
  <div class="person">
    <a href="#"><!-- #5 Link to profile -->
    <p class="five-eight">5-slot</p></a><!-- NAME -->
    <a href="#"><!-- Link to profile -->
    <img src="https://cdn2.iconfinder.com/data/icons/metro-ui-dock/512/myspace_alt.png" alt="profile picture"/></a><!-- Link to profile picture -->
  </div>
 
<!-- #6 -->
  <div class="person">
    <a href="#"><!-- #6 Link to profile -->
    <p class="five-eight">6-slot</p></a><!-- NAME -->
    <a href="#"><!-- Link to profile -->
    <img src="https://cdn2.iconfinder.com/data/icons/metro-ui-dock/512/myspace_alt.png" alt="profile picture"/></a><!-- Link to profile picture -->
  </div>
 
<!-- #7 -->
  <div class="person">
    <a href="#"><!-- #7 Link to profile -->
    <p class="five-eight">7-slot</p></a><!-- NAME -->
    <a href="#"><!-- Link to profile -->
    <img src="https://cdn2.iconfinder.com/data/icons/metro-ui-dock/512/myspace_alt.png" alt="profile picture"/></a><!-- Link to profile picture -->
  </div>
 
<!-- #8 -->
  <div class="person">
    <a href="#"><!-- #8 Link to profile -->
    <p class="five-eight">8-slot</p></a><!-- NAME -->
    <a href="#"><!-- Link to profile -->
    <img src="https://cdn2.iconfinder.com/data/icons/metro-ui-dock/512/myspace_alt.png" alt="profile picture"/></a><!-- Link to profile picture -->
  </div>



<style>
.top-eight {
padding: 15px !important;
border: 1px solid white;
border-radius: 3px;
  display: grid;
  grid-gap: 7px;
  grid-template-columns: repeat(4, [col] auto ) ;
  grid-template-rows: repeat(2, [row] auto  );
  background-color: transparent;
  color: #444;
  margin: 0px;
  width: 100%;
  }
 
  .top-eight-header {
text-align: center;
border: 3px solid white;
border-radius: 3px;
    grid-column: col 1 / span 4;
    grid-row: row 1;
    background: transparent; 
    color: white;
    font-weight: semi-bold;
    padding: 0px !important;

  }
 
  .top-eight-header p {
    padding-bottom: 0px !important;
    margin-botton: 0px;
  }
 
  .one-four{
    grid-column: col 1 / span 4;
    grid-row: row 2;
  }
 
  .five-eight{
    grid-column: col / span 4;
    grid-row: row 3;
  }

.profile .top-eight .person img {
border: 1px solid white;
border-radius: 10%;
width: 100px;
height: 100px;
}
</style></div>
<div>
<a href="https://layouts.spacehey.com/layout?id=27380">Click here to view code</a>
</div>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 18 of 18 comments ( View all | Add Comment )

real pierce not clickbait!!1	1721435822 using!! ttthanks Report Comment You are so welcome! by rai-rai ; 1721844426; Report
ben10	1720500088 usin! :3 tysm Report Comment np by rai-rai ; 1721261029; Report
🦅 𝓕𝓻𝓮𝓪𝓴𝔂 Royce/Solly ! 🏳‍⚧	1719935647 using tysm Report Comment np by rai-rai ; 1721261039; Report
🎀 jizzl‧₊˚ ⋅ (layout always wip 💥)	1715485628 the images r either 2 small or 2 big Report Comment You may have an underlying code from your layout that is interfering with the processing of this stylesheet. Or you may need to change IMG sizes as necessary in the CSS part of the code. by rai-rai ; 1718375973; Report
𝗮𝗱𝗶𝗮𝗻_𝘀𝘂𝗰𝗸𝘀	1714440497 so where exactly do I imput my info? Report Comment I'm guessing at then end of the arrows, I'll mess around with it by 𝗮𝗱𝗶𝗮𝗻_𝘀𝘂𝗰𝗸𝘀; 1714440605; Report if you look in the code it should have CSS notes in there which start like this: . That's where you review the info and it directs you to the exact info needed. by rai-rai ; 1714935815; Report ohh thx, also i figured it out by 𝗮𝗱𝗶𝗮𝗻_𝘀𝘂𝗰𝗸𝘀; 1714936386; Report YES! I figured after checking out Ur profile! It looks great! It really fits your profile. It a shame that the top 8 can't just be in the friend space box. I don't know how to replace elements on a page with different ones so... by rai-rai ; 1714936460; Report well thank you tons for the code! by 𝗮𝗱𝗶𝗮𝗻_𝘀𝘂𝗰𝗸𝘀; 1714936813; Report yw by rai-rai ; 1714936995; Report well hello adian.. by DAZedandconfused ( sorta inactive ); 1715228881; Report oop hello johnnie by 𝗮𝗱𝗶𝗮𝗻_𝘀𝘂𝗰𝗸𝘀; 1715229132; Report
Pointlezzly cluelezz !	1712540541 Ty for this !! I've been looking for a top 8 code foreveeerr !!! Report Comment you're absolutely welcome! I couldn't either so I contacted a few of my friends who had one. I did have to adjust the code to make it more dynamic tho because my friends had theirs a little bit all over the place so I re-styled. And ofc. I wanted to be able to find the source code so that if I lose my layout, I have that top 8 and loads of others can use it too! by rai-rai ; 1714935968; Report
H3x._.Dr1nk5._.4c1d	1709746501 I tried to do it but for soe reason it comes out as this BIG icons without a name etc :(( Report Comment TFFFF by rai-rai ; 1711638572; Report
meer	1703640387 hi, can i know how to change the top 8 friends header to black.. its really confusing Report Comment Under the style tag U need to navigate the top 8 header title. Then change the hex colour of the background via hex number. by rai-rai ; 1703961742; Report
xXThe_Undead_KidXx	1703176923 It's rlly complicated and took me awhile to figur this out but I'm glad I did! Report Comment Well done! I hope it helps. Add ur fav people and get them to compete to get on to YOUR top 8. by rai-rai ; 1703370102; Report Yeah it was complicated at first, but that fact that I only get that right while others were struggling. Maybe try to properly explain it to them so they will figure that out aswell by xXThe_Undead_KidXx; 1703399161; Report how did u do that myspace music playlist thing above your interests. by rai-rai ; 1703439385; Report https://layouts.spacehey.com/layout?id=36600 Try this by xXThe_Undead_KidXx; 1703461637; Report
Cas	1701556804 Hey.. more issues i'm so sorry but idk why but a lot of it is super skinny and you said in another comment to use "css" ummm idk what that is but i'm pretty sure use html and um idk how to fix that also the gif i used for my about me is messed up and due to the spacehy update with the new category called code i can't find anything to change anything Report Comment TF! OMG YEH THEY DID ADD THAT NEW CATEGORY! Yeh that new update has seemed to combined all of that codes taken for each part of the profile and fused them together. I don't think it was a great idea. by rai-rai ; 1702408019; Report You have done it correctly mate! Just check the other comment of yours that I replied to earlier. That should be a quick fix. It's a backend issue. Just download the static spacehey profile images and upload them to photobucket or a discord server. Then get the Media Hotline URL and it should work better. by rai-rai ; 1702408123; Report spacehey images expire for storage reasons. Then they get restored. by rai-rai ; 1702408150; Report
Cas	1701068474 Tbh super broken nice concept but the images go away after time and sometimes even the whole top 8 disappears some of the photos looks super wonky and i love the concept and the wonky photos didn’t bug me too much but why did it completely disappear bruh Report Comment heyyyyy. omg add me. So basically you can't use images from spacehey. So if it's a spacehey profile image direct link, it will disappear. It works to keep refreshing. That's why you have to use an image hosting service. (What I do is download that profile image and then upload it to my discord server with permission of the user. Then I embed it into the top 8). You'll find that spacehey hosted images disappear after a while. Hope this helps! Profile looks awesome btw! by rai-rai ; 1701104486; Report
Cas	1701068363 Yeah ts broke Report Comment Taylor SWIFTIE? by rai-rai ; 1701104629; Report
gerard☆	1700661381 hay im not sure if mine worked o_O Report Comment also umm how do i add ppl to it srry im slow by gerard☆; 1700661461; Report Ohhhh! guys don't worry you just need to look at the code and you'll find some HTML note inserts (they look like this: ). It is supposed to be a visual for backend scripting. So read those and make sure to paste the right things. Direct links to profile pics, Hyperlinks to a profile, Usernames! Hope this helps guys! Check out my profile. I'm using it. by rai-rai ; 1700857298; Report
Murderdolly🎀🔪	1698101328 Thank you for this!!!! Question bc I'm stoopid how do I add ppl into my Top 8? Or does it happen automatically by interacting with others? Report Comment Well I could help you out. I checked ur profile and you seemed that you didn't know how put ur friends to Top 8 and I figured it out how to put ur friendz in Top 8. I'm not professional at HTMLs but I figured it out. If that's fine with you then Just DM me if you want to. Cuz I'm willing to help :D by xXThe_Undead_KidXx; 1698622481; Report You just look through the code and replace the placeholders with links to: images URLs, profile URLs, and the user name by rai-rai ; 1698765828; Report
aliceautopsie	1692735264 Usssinnnghh Report Comment
Milla	1679420760 thank u 4 the code!! but some of the profile pics got really skinny. how do i change it? Report Comment are you on mobile? It's supposed to squash on mobile so that it doesn't go out the page. It's supposed to add responsivity. Ofc if ur using a desktop then that's super weird. Maybe try resizing it or redoing the padding and margins to suit yours. by rai-rai ; 1679421078; Report OMG I JUST CHECKED IT AND IT LOOKS RLLY BAD! I'll change the code. Make sure not to hwavily tweak it tho. Keep the HTML the same and make sure that u are only styling it through CSS. Re-paste the code. I've just updated it. by rai-rai ; 1679421245; Report thanx. my layout is a little wacky when it comes to adding graphics and stuff. by Milla; 1679436288; Report now it's really big. by Milla; 1679437027; Report tf by rai-rai ; 1679488768; Report
rai-rai	1679255666 New ond Report Comment