They_Baby_Mama's profile picture

Published by

published
updated

Category: Web, HTML, Tech

A Blog For Beginners ๐Ÿ‘€

Welcome To A Blog For Beginners

Are You Completely New To SpaceHey? Then There's A Chance That You May Be Feeling Just As Lost As I Did. I Would Like To Show Beginners What I Have Learned So Far & Share Some Basics & Helpful Codes.

Layouts
Layouts Are Fairly Simple To Place Onto A SpaceHey Account, However Creating Them, Not So Much. If You're Not Familiar With How To Create Your Own Layout, Like Myself.. Then You Can Browse Through Layouts That Were Already Created By Going To The Top Of Your SpaceHey & Selecting The Layouts Tab. Once You Find A Layout You Like, Click On It, Scroll Down & Copy The Layout Code, Then Paste The Layout Code In Your 'About Me' Section On Your SpaceHey Account. Save Settings! View Your SpaceHey Account, The Selected Layout Should Be Displayed On Your Page.

Old MySpace Online Icon

If You Would Like To Bring A Piece Of Myspace To Your SpaceHey, Here's How You Can Do It! You Can Change Your Current Online Icon To The MySpace Version. You Can Follow The Directions Below To Change Your Online Icon. There Are Two Separate Codes Because There's Two Versions Of It. Version 1 Is A Smaller Icon, Version 2 Is A Bigger Icon.ย 

Use The Code Below On Your 'About Me' Section Of Your Page To Change Your Online Status To A Retro Look. Make Sure To Save The New Settings! The Retro Icon Should Now Appear On Your Page Where Your Online Status Should Be.

Version 1ย 

<style>


.online{content:url(http://www.myspacegens.com/images/online_now/onlinenow.gif);
ย  ย  width: 100px;
ย  ย  height: 25px;
}

</style>


Version 2

<style>

.online{content:url(https://cdn.discordapp.com/attachments/246769804554272778/909609118338285598/onlinenow_1.gif);
ย  ย  width: 80px;
ย  ย  height: 20px;
}

</style>

Music
To Add Music To Your SpaceHey Account Please Follow The Directions Below.

<iframe width="1" height="1" src="https://www.youtube.com/embed/######?&;amp;;autoplay=1&;loop=1" title="Youtube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;picture-in-picture" allowfullscreen=""></iframe>

Just Copy & Paste That Into Your 'About Me' Section On SpaceHey. Just Remove The Hashtags & Paste The Numbers & Letters From The Last Part Of The YouTube Link To The Song That You Would Like To Play. (Don't Remove The Question Mark!) & Make Sure You Save Your Settings! Song That You Selected Should Play In The Background Of Your SpaceHey Account. NOTE: It Only Plays On Laptops/Desktops. UNLESS You Change Your Mobile Browser To The Desktop Site. Oh & IT ONLY WORKS FOR 1 SONG! Trying To Add More Than One Music Code Will Only Make The Songs Play Over One Another .

Images

To Add Images Onto Your SpaceHey Account, Please Follow The Link & Steps Below.

Step1: Go to https://imgbb.com/upload

Step2: Upload Imagine From Phone

Step3: Under EMBED CODES select HTML FULL LINKED

Step4: (go to edit profile) COPY AND PASTE ANYWHERE (general, music, about me, etc.)

Save Your Settings! When You View Your Profile, Any Images You Added & Saved In Any Of The Sections Should Be Displayed.


Extra Links For Creativity ๐Ÿ”—

These Are Supposed To Be More Links To Help You Get Creative & Customize Your Profile Below:


https://www.glitter-graphics.com/

https://lionzlytz.ueuo.com/shiz

https://www.cursors-4u.com/

https://codepen.io/trending

https://www.w3schools.com/

https://htmlcheatsheet.com/

https://blog.spacehey.com/entry?id=3270

https://textanim.com/

https://fonts.google.com/

https://www.pimp-my-profile.com/

https://blingee.com/

https://www.quackit.com/myspace/myspace_profile_editor/

https://www.myspacegens.com/index.php

https://www.stylemyprofile.net/

https://imgflip.com/gif-maker

https://www.canva.com/

https://imgur.com/

https://www.freecounterstat.com/step_1.php


I Have Not Personally Used Any Of These Extra Links, But If You Do, Please Feel Free To Update & Comment If This Was Helpful. I Did Find These Tips Among Other Blogs & Have Given The Rightful Owners Kudos. Just Wanted To Pass Along The Knowledge & Put All Of The Helpful Information I Found Into One Place. Again, You Can Give Me Kudos Or Comment If This Way Helpful To You As A SpaceHey Beginner Please Let Me Know & I'd Like To Here Some Input On The Extra Links As Well If Anyone Tries Them. I Will Try To Update Any Future Tips, Links Or Codes I Learn & Find Helpful. Thank You!

UPDATE: December 2021

So SpaceHey Has Released Some Tips That I'd Also Like To Share With You.

Animated Falling Snowflakes
  • You can use the following code:
    <style>
    /* customizable snowflake styling */
    .snowflake {
      color: white;
      font-size: 1em;
      font-family: Arial, sans-serif;
      text-shadow: 0 0 5px black;
    }
    
    @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}
    </style>
    <div class="snowflakes" aria-hidden="true">
      <div class="snowflake">โ…</div>
      <div class="snowflake">โ†</div>
      <div class="snowflake">โ…</div>
      <div class="snowflake">โ†</div>
      <div class="snowflake">โ…</div>
      <div class="snowflake">โ†</div>
      <div class="snowflake">โ…</div>
      <div class="snowflake">โ†</div>
      <div class="snowflake">โ…</div>
      <div class="snowflake">โ†</div>
      <div class="snowflake">โ…</div>
      <div class="snowflake">โ†</div>
    </div>
Make Your Profile Picture Spin

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>
GIFS
  • You can easily embed a GIF on your profile with the following code:
<img src="GIF_URL" alt="alternative text">

Santa Claus Is Coming To Town... ๐ŸŽต
  • Add the following code to your profile for a special festive surprise :)

<style>
@keyframes flying-santa{
  from{ left:-400px; }
  to{ left:calc(100% + 20px); }
}
#santa{
  position: fixed;
  left: -400px;
  top: 200px;
  width: 200px;
  animation: flying-santa 7s infinite linear;
  pointer-events: none;
}
</style>
<img id="santa" aria-hidden="true" src="https://static.spacehey.net/img/special/santa-sleigh.svg"/>

Perfect Background Image
  • Many of you asked how they can set the perfect background image for their profile - full width, full height, not repeated (even on larger screens) and zoomed in if necessary. So today I want to share you a tiny snipped of code to archive exactly this:
<style>
body{
  background: url('https://source.unsplash.com/FN-cedy6NHA/1000') no-repeat center center fixed;
  background-size: cover;
}
</style>

Animated Santa Claus Hat


Why don't we all add an animated Santa hat to our profiles today? :)
<style>
.general-about{
  position: relative;
margin-top: 30px; } .general-about .profile-pic::before{ content: ''; background: url('https://media.giphy.com/media/rXyIg5TrQ3jYuZME1G/giphy.gif') no-repeat; background-size: cover; display: block; width: 100px; height: 100px; z-index: 999; position: absolute; top: -43px; left: -32px; } </style>



11 Kudos

Comments

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

stella

stella's profile picture

thxx!!


Report Comment



You're Welcome .

by They_Baby_Mama; ; Report

โ˜†๐““๐“ฒ๐”ƒ๐”ƒ๐“ต๐“ฎ๐“ฝ๐“ป๐“ธ๐“ทโ˜†

โ˜†๐““๐“ฒ๐”ƒ๐”ƒ๐“ต๐“ฎ๐“ฝ๐“ป๐“ธ๐“ทโ˜†'s profile picture

How do you move the gifs underneath the message that you write in general instead of them being next to the text?


Report Comment

Sharing Memories

Sharing Memories's profile picture

how do you add code to a gif so it can format it for mobile?


Report Comment

Co.u.ch

Co.u.ch's profile picture

omg thank you so much! This was very helpful :))


Report Comment



You're Welcome.

by They_Baby_Mama; ; Report

lilac

lilac's profile picture

neeeeeed this, ur awesome


Report Comment



You're Welcome, Glad I Could Help!

by They_Baby_Mama; ; Report