- Gerar link
- X
- Outros aplicativos
- Gerar link
- X
- Outros aplicativos
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 *
Comentários
Hello my friend! So cute! Eu coloquei no meu blog, ficou bem fofo, e já coloquei os créditos. Faz mais tutoriais deste género, assim personalizo melhor o meu bloguinho.
ResponderExcluirBjs! https://y-ukinoyume.blogspot.pt/
Oláa Inêes! Quanto tempo menina!
ExcluirEu vi que colocou, e combinou demais! * - *
Que bom que gostou, vou tentar trazer mais tutorias assim sim, já tenho outra em mente, quando postar te aviso! Kissus e até mais!