''Sobre mim'' personalizado: Pink Lines
Konnichiwaa fadinhas e elfos! Como vocês estão? Chegando com mais um modelo personalizado de perfil do autor, ou mais conhecido como, ''sobre mim'' do blog! É exatamente como a imagem acima, tem duas linhas de borda com foto redondinha e cores meigas, suaves (podendo ser alterada se preferir)! Enfim, vem ver como faz! É super simpleees, let's go!
[preview]
Vamos lá! Vá em Tema, Editar Html e procure por </b:skin> , ACIMA dele cole o seguinte css:
@import url(https://fonts.googleapis.com/css?family=Parisienne|Prata); .about-me { width: 250px !important; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/652/greyzz.png); /* imagem de plano de fundo */ border: 2px solid pink; outline: 5px solid pink; outline-offset: 10px; padding: 1em; margin: 12px; /* apague se quiser centralizado na sidebar*/ } .about-me h2 { font-family: 'Parisienne', sans-serif; /* fonte do titulo */ text-align: center; font-size: 3em; margin: 0; color: pink; /* cor do titulo */ text-shadow: 1px 1px 0px rgba(0,0,0, .2); } .about-me img { border: 5px solid pink; border-radius: 50%; box-shadow: 1px 1px 1px gray; display: block; margin: 0 auto; } .about-me p { text-align: justify; line-height: 1.5; font-size: 14px; /* tamanho da fonte de descrição */ font-family: 'Prata', serif; /* cor da fonte de descrição */ }
Agora vá em Layout e Adicione um Gadget HTML/Javascript e cole:
<link href="https://fonts.googleapis.com/css?family=Parisienne|Prata" rel="stylesheet" type="text/css" /> <div class="about-me"> <h2>Sobre mim</h2> <img src="https://imgur.com/mY2rEr1.jpg" /> <p>Olá! Eu sou Dorothy. Gosto de usar cercas como feixes de equilíbrio, sair com meu cachorro, Toto e andar de balões de ar quente.</p> <p>Meu blog está cheio de dicas & idéias para ajudá-lo a lembrar que não há lugar como nossa casa! </p> </div>
- Altere ao seu gosto! Substitua pela sua descrição, e a imagem do perfil em ''https://imgur.com/mY2rEr1.jpg''! Recomendo hospedar no imgur no tamanho 150x150.
- Gostaria de mudar a cor? Procure por ''pink'' substitua pela cor que quiser, (exemplo: black, lavanda, green) para saber os nomes de todas cores consulte esse site: https://htmlcolorcodes.com/color-names/
- Qualquer duvida é só perguntar nos comentários, ok?
Off: Aquela chuvinha gostosa depois de um dia abafado |
Créditos: Codepen | Por hoje é só! Espero que tenham gostado. Até mais e Kissus! Tem postagem toda segunda, quarta e sexta então segue o bloguinho e visite sempre! Redes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *