Layout published by rai_Blogz08

published 1679179903
updated 1723224916

Add to Favorites

View Layouts

View Profile

Report Layout

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 38 comments ( View all | Add Comment )

phoenix_RAWR_X3	1741272425 Using!! Report Comment
PixieKannibal	1740337394 using!! Report Comment
♱༻CRZYANG4L༺♱	1740211637 using! Report Comment
♱༻CRZYANG4L༺♱	1740211632 using! Report Comment
˜”°•.˜”°• 4SH3R •°”˜.•°”˜	1739410725 using!! (having a bit of trouble figuring it out but i think i got it!!) Report Comment I'm glad it's working for you ️ by rai_Blogz08; 1741778990; Report
FrostyBeescuits	1738729908 Super cool but im having some trouble. I downloaded and uploaded my friends profile pictures to Imgur, and copied the link but it doesnt display the pfps. any idea what i did wrong? Report Comment Are you copying the "direct links"? It should be the direct image links because the CSS needs to display a hosted image file. It doesn't work with full web pages. Let me know if it works. by rai_Blogz08; 1741779085; Report cuz I opened the image links on ur profile and it says that the acces is denied or something like that. Try using plain direct links. Don't copy the embed iframe links because we already have a container to embed the images in the Top 8 code. by rai_Blogz08; 1741779189; Report
ARI [DO NOT BEND]	1737438837 this just isnt working, the link works fine, but the profile pictures arent working... can somebody tell me why that might be? i opened image in a new tab, posted into discord and copied the link from there. and put into "link to profile picture" i dont see why it wouldnt work?? Report Comment click on "copy image address" thats the only way it'll actually work by Roxi Razorblade; 1737925356; Report Heyyy. Discord stopped allowing images to be hosted permanently on their servers as hotlinks a while ago. Maybe a year. I recommend imgur. Discord temp ohotos expire on CDN. by rai_Blogz08; 1738179130; Report AH OH SHOOT! i see now, ILL GIVE IT A TRY... SORRY LMFAO TOT by ARI [DO NOT BEND]; 1738692932; Report NO WORRIES HAHAHAA! I used to use discord too! It's a shame they did that. by rai_Blogz08; 1741778951; Report
⦻Ezmir X3⦻	1735098659 tyring to use and have used before in the past but it just isn't showing up for me except the click to view code link :( Report Comment It might be something to do with the scripting that’s already on ur profile. Ur script might be interfering with my code. by rai_Blogz08; 1735935384; Report
Spencer Celebratiom (ONLY WORKS ON WEBSITE)	1734646453 i wanna use this but i don't understand how to use it, every time i put it on my profile without changing the code it just shows up as WAY too big for my profile, also i just...don't know how to set it up sigh i cant code at all Report Comment Aww, I recommend changing the container size. by rai_Blogz08; 1735935417; Report
Arishia~<3	1734175791 using! Report Comment
dearestceres	1733165895 using this! but for some reason the profile links are showing up instead of the names?? making the whole section blown up which is super weird Report Comment nevermind, the names are showing up but the text is super big?? by dearestceres; 1733166282; Report oh my god i figured it out by dearestceres; 1733166890; Report That was me for the first time coding the profile. I did eventually just make it simpler and labelled everything so that people would find it easier to work with. The original was by one of my friends on here but it was rlly clunky, though I liked the table system. I hope it helped and you were able to figure it out quicker with my revised version of the code. by rai_Blogz08; 1733245531; Report the labels in the code were super helpful! the part i was struggling with was i didn't see that the profile links were supposed to replace the hashtags for slot 3-8, and that the names went in between the ><. got it figured out in the end though! by dearestceres; 1733254844; Report Super glad to hear that it's going well for you. At the end of the day, just have a lot of fun with it. by rai_Blogz08; 1733334528; Report
xxXZombie_ZenXxx	1732910659 using Report Comment
V4MP!!	1732792105 Using!! Report Comment
N3ONGR33N.ZIP	1732759293 Using! Report 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🎀	1723197899 using Report Comment
punkrockprincess	1722589963 using <3333 Report Comment one image looks kinda wonky tho... by punkrockprincess; 1722590335; Report