Published by Rayanne

published 1761590056
updated 1763215092

Category: SpaceHey

View Blog View Profile Report Blog Entry

(EN & PT) Your SpaceHey, Your Way: A Beginner’s Guide to Basic Codes & Customization

💻 Guia Básico de Personalização do SpaceHey / Basic SpaceHey Customization Guide

Oi, eu sou a Rayanne e hoje quero mostrar algo que eu gostaria de ter encontrado quando comecei a mexer com códigos aqui.

Hi, I’m Rayanne, and today I want to show something I wish I had found when I first started experimenting with code here.

Eu aprendi tudo testando e quebrando layouts várias vezes kakakak, então se algo der errado, não se preocupe! Faz parte do aprendizado.

I learned everything by testing and breaking layouts many times, kakakak, so if something goes wrong, don’t worry! It’s part of learning.

Antes de começar, teste seus códigos neste site (SpaceHey CSS preview thingy) antes de colocar no perfil.

Before you start, test your code on this site (SpaceHey CSS preview thingy) before applying it to your profile.

💻 1. Entendendo o Básico / Understanding the Basics

O SpaceHey usa principalmente duas linguagens:

HTML → estrutura: caixas, textos, títulos, links / structure: boxes, texts, titles, links
CSS → aparência: cores, fontes, bordas, animações / appearance: colors, fonts, borders, animations

Você coloca seu código em: Editar Perfil → Sobre Mim ou diretamente nas postagens do blog.

You paste your code in: Edit Profile → About Me or directly in your blog posts.

Exemplo / Example:


      <div style="border:1px dashed pink; padding:10px;">

        Hello, SpaceHey! 🌸

      </div> <!-- cria uma caixa simples / creates a simple box -->

Isso cria uma caixa simples que você pode personalizar como quiser!

This creates a simple box you can customize however you want!

🎨 2. Criando Caixas Personalizadas / Creating Custom Boxes

As caixas ajudam a organizar o perfil ou postagem.

Boxes help organize your profile or post.

Exemplo / Example:


      <div style="margin-top:10px; padding:10px; border-top:1px dashed #814d5c; border-bottom:1px dashed #814d5c; background-color:#1a1a1a; border-radius:8px;">

        <h2 style="color:#ff4d6d;">Sobre Mim / About Me</h2>

        <p style="color:#d9a1b5;">Seu texto vai aqui! / Your text goes here!</p>

      </div>

✨ 3. Títulos e Textos / Titles and Text

Você pode alterar cores, tamanhos e adicionar efeitos fofos.

You can change colors, sizes, and add cute effects.

Exemplo / Example:


      <h2 style="color:#ff4d6d; text-shadow:0 0 10px #ff4d6d;">★ Meu Título Brilhante / My Shiny Title ★</h2>

🔗 4. Links Estilizados / Styled Links

Os links podem abrir em uma nova aba e combinar com as cores do seu tema.

Links can open in a new tab and match your theme colors.

Exemplo / Example:


      <a href="https://spacehey.com" target="_blank" style="color:#ff4d6d; text-decoration:none;">Visit SpaceHey!</a>

🖼️ 5. Molduras e Bordas / Frames and Borders

As bordas ajudam a destacar textos ou imagens.

Borders help highlight text or images.

Exemplo / Example:


      <div style="border:3px double #ff4d6d; padding:10px; border-radius:10px;">

        🌹 Moldura Simples / Simple Frame 🌹

      </div>

6. Criando Seus Próprios Selos / Making Your Own Badges

Os selos são pequenos gráficos que mostram sua identidade ou algo que você ama.

Badges are small graphics that show your identity or something you love.

Passo 1 Crie uma imagem (100x35px ou 150x50px funciona bem). /

Step 1:Create an image (100x35px or 150x50px works well).

Passo 2 : Hospede em algum site de imagem (ImgBB, Discord, etc.) e copie o link direto.

Step 2: Host it on an image site (ImgBB, Discord, etc.) and copy the direct link.

Passo 3 / Step 3: Adicione ao seu perfil ou blog com este código:

Step 3: Add it to your profile or blog with this code:

Exemplo / Example:


      <img src="link" alt="Selo / Badge" width="150" height="150"/>

Dica: você pode adicionar quantos selos quiser, alterar bordas, tamanhos e até adicionar efeitos com CSS!

Tip: you can add as many badges as you want, change borders, sizes, and even add effects with CSS!

Conclusão / Final Thoughts

Personalizar o SpaceHey é sobre se expressar não há jeito certo ou errado.

Customizing SpaceHey is about expressing yourself there’s no right or wrong way.

Teste, mude, cometa erros e tente novamente. O mais importante é que tudo tenha sua energia 💕

Test, change, make mistakes, and try again. The most important thing is that everything has your energy 💕

2 Kudos

Comments

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