10 abril 2018

Quem sou eu no blog, como posso personalizar?

perfil no blog
No tutorial de hoje ensinarei como colocar um "Quem sou eu" na sidebar do seu blog. Para quem não sabe, esse quem sou eu nada mais é do que um perfil resumido sobre quem posta no blog. Nele você vai se descrever brevemente e fazer com que as pessoas queiram te conhecer melhor quando se identificarem com sua personalidade e com os assuntos que você aborda.

 

Quem sou eu personalizado:

Primeiramente, você precisa ir em "Layout" e adicionar um "HTML/JavaScript" e logo em seguida, cole o seguinte código:

<div class="perfil">
<div class="foto">
<img src="LINK-DA-SUA-FOTO" />

<p>Seu nome</p>
</div>
<div class="texto">
<br />
Quem sou eu? ESREVA UM BREVE RESUMO SOBRE VOCÊ AQUI. FALE SOBRE  O MOTIVO DE VOCÊ TER CRIADO O BLOG, SOBRE OS ASSUNTOS QUE VOCÊ ABORDA...

<br />
</div>

<div class="social">

<a href="SEU FACEBOOK" class="fa fa-facebook" target="_blank"></a>

<a href="SEU INSTAGRAM" class="fa fa-instagram" target="_blank"></a>

<a href="SEU PINTEREST" class="fa fa-pinterest" target="_blank"></a>

<a href="SEU CANAL NO YOUTUBE" class="fa fa-youtube-play" target="_blank"></a>

<a href="SEU TWITTER" class="fa fa-twitter" target="_blank"></a>

<a href="mailto:SEU ENDEREÇO DO E-MAIL" class="fa fa-envelope-o" target="_blank"></a>

</div>
</div>
<style type='text/css'>



.perfil{
}
.social {
display: table;
margin: auto;
}
.social a {
font-size: 15px;
text-align: center;
background:#222;
color:#fff;
width: 33px;
height: 32px;
 line-height: 34px;
display: inline-block;
border-radius: 50%;
margin: 5px 5px 0px 5px;
transition: 0.5s;
text-decoration: none;
}
.social a:hover {
background:#ff1492;
color:#fff;
}
.foto img{
    border-radius: 50%;
    width: 290px;
}
.foto p{
font-family: Segoe Script;
font-size: 52px;
margin: -60px 0 0 -1px;
text-align: center;
color: #222;
text-shadow: -1px -2px 9px rgb(255, 255, 255);
line-height: 47px;
}
.texto{
text-align: justify;
padding: 12px;
font-size: 12px;
font-family: verdana;
}


</style>


Veja também: Layout Free - Minimal Base + Update + novidades no blog 
                       Postagem Popular personalizada no blogger 
                       Menu no topo com redes sociais e barra de pesquisa


quem sou eu no blog

 Personalize do jeito que você quiser e logo em seguida clique em "Salvar".
A minha personalização ficou como na imagem ao lado, mas você deve mudar de acordo com o seu gosto.
OBS: Não esqueça de adicionar o link das suas redes sociais onde está pedindo


 Se você quiser personalizar mais o seu blog, acompanhe os outros tutoriais que tem aqui.
Se você gostou desse breve tutorial, comente aqui abaixo e dê sugestões para o próximo!

28 comentários:

  1. Acho ótimas suas dicas.
    big beijos
    www.luluonthesky.com

    ResponderExcluir
  2. ah que bacana! já quero tentar colocar essa assinatura no final dos meus posts!

    www.tofucolorido.com.br
    www.facebook.com/blogtofucolorido

    ResponderExcluir
  3. Amei essa dica, favoritei a publicação para quando precisar mudar. Tutorial super necessário!

    Amei, beijos 😘
    http://meninaneemteconto.blogspot.com/

    ResponderExcluir
    Respostas
    1. Mudar as vezes é bom, mesmo sendo esses pequenos detalhes.
      Beijos ❤

      Excluir
  4. Achei sensacional a dica. Muito simples!
    Beijos

    https://glamour-02.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que gostou, é simples e muito fácil.
      Beijos!

      Excluir
  5. Que showww de dica! Vou tentar fazer, acho tão fofo blogs que tem <3

    Beijinhos
    tipsnconfessions.blogspot.com

    ResponderExcluir
    Respostas
    1. Tenta sim, é bem fácil e você vai conseguir.
      Beijos <3

      Excluir
  6. Adorei a dica!
    Fiquei até com vontade de mudar meu blog ❤
    www.blogsereiando.com

    ResponderExcluir
    Respostas
    1. Salva o tutorial pra quando você resolver mudar haha
      beijos

      Excluir
  7. Haaaa que dica maravilhosa! Parabéns por disponibilizar esses conteúdos. Bjos

    Faça-me uma visita -> LEH BLOG | INSTAGRAM

    ResponderExcluir
  8. Gostei muito dessa dica, mas tive um problema: os ícones das redes sociais ficaram totalmente pretos; não aparece o logo da rede. Você saberia o porquê?
    Abraços!

    https://garotadepersonalidades.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Provavelmente você não tem a fonte awesome instalada no seu blog, para instalar vá em TEMA > EDITAR HTML > abaixo de HEAD cole o seguinte código:
      link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/

      OBSERVAÇÃO: No começo do código coloque < e no final do código coloque >

      Caso não funcione me avise :) Obrigada pela visita!

      Excluir
  9. muito legal esse blog https://euleioabibliablog.blogspot.com/

    ResponderExcluir
  10. MULHER TU ARRAZA DEMAIS NOS CODIGOS, SUPER ME AJUDOU... CONTINUE ESCREVENDO QUE TEU BLO TÁ UMA GRACINHA..

    O MEU É: https://www.rulosviajeiros.com/ DÁ UMA OLHADA POR LÁ... É DICAS DE VIAGENS <3

    ResponderExcluir
  11. Olá! Eu sou nova nesse negócio de blog, hahaha Quando você diz "coloque aqui sua foto" com um link... De onde eu linko?

    ResponderExcluir
    Respostas
    1. Primeiramente você terá que hospedar sua foto em algum lugar, eu geralmente hospedo no Imgur ( é gratuito ). Logo em seguida você terá que pegar o link dessa sua foto e colar onde se pede no código. Espero que tenha entendido, qualquer dúvida pode perguntar <3

      Excluir
  12. oii, deu tudo certo, más a imagem não, aparece que está bloqueado :/, pode me ajudar? otimo post por sinal!

    ResponderExcluir
    Respostas
    1. Olá, Jean! Onde você hospedou sua foto? Observe se o final do link está como ".png"
      Recomendo que você hospede no Imgur, semore dá certo comigo.

      Excluir