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.

Rai's instagram

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by rai_Blogz08 (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 20 of 24 comments ( View all | Add Comment )

RAVEN(#1 CARL GRIMES FAN)	1728879843 Using Report Comment
B1LLY3P1C(🇧🇷)	1728780176 hi i rlly want 2 put this layout on my profile but i hav 2 problems 1-the images r so big and its not of my layout,im on mobile and it show on SpaceHey beginner layout too :/ i tried seeing the code 4 change but it doesnt work too,where is the code 2 change? :c 2- where do i put the code's layout? and that is it,idk sm english so ask me or say what i say wrong!! ^_^ Report Comment OMG this happened to me. I don’t recommend editing on the mobile app because it fucks up your code. Why? Because spacehey likes to compile all ur code into one box, but it doesn’t know what it is doing cuz that feature is absolute shit. It fucks up my code. Use the web version. by rai_Blogz08; 1729088413; Report
AVRP	1728444854 THANK YOU SO MUCH!!! REALLY HELPED - AVRP Report Comment You're so welcome! by rai_Blogz08; 1728631660; Report
*✧ cirqueclownz 🪬	1723334969 I've been trying to get it to work but nothing seems to show up at all except the hyperlink :') do you know what the issue could be? Report Comment maybe you need to just have a good read of the actual code before using it because that was the case for me. I had accidentally placed hyperlinks in the wrong places and had added the image hyperlinks in the wrong places too. It was a hot mess. by rai_Blogz08; 1726935225; Report
Ngoc🎀(wip!)	1723197899 using Report Comment
punkrockprincess	1722589963 using <3333 Report Comment one image looks kinda wonky tho... by punkrockprincess; 1722590335; Report
🩸pierce,,	1721435822 using!! ttthanks Report Comment You are so welcome! by rai_Blogz08; 1721844426; Report
ben10	1720500088 usin! :3 tysm Report Comment np by rai_Blogz08; 1721261029; Report
💥 jizzl ୨୧ 🫀 caseoh's #1 fan ~ 🎸	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_Blogz08; 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_Blogz08; 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_Blogz08; 1714936460; Report well thank you tons for the code! by 𝗮𝗱𝗶𝗮𝗻_𝘀𝘂𝗰𝗸𝘀; 1714936813; Report yw by rai_Blogz08; 1714936995; Report oop hello johnnie by 𝗮𝗱𝗶𝗮𝗻_𝘀𝘂𝗰𝗸𝘀; 1715229132; Report
Pointlessly clueless	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_Blogz08; 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_Blogz08; 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_Blogz08; 1703961742; Report
Rhad_Lies_Underneath	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_Blogz08; 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 Rhad_Lies_Underneath; 1703399161; Report how did u do that myspace music playlist thing above your interests. by rai_Blogz08; 1703439385; Report https://layouts.spacehey.com/layout?id=36600 Try this by Rhad_Lies_Underneath; 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_Blogz08; 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_Blogz08; 1702408123; Report spacehey images expire for storage reasons. Then they get restored. by rai_Blogz08; 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_Blogz08; 1701104486; Report
Cas	1701068363 Yeah ts broke Report Comment Taylor SWIFTIE? by rai_Blogz08; 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_Blogz08; 1700857298; Report