PERFIL COM FOTO REDONDA, DESCRIÇÃO E REDES SOCIAIS

18 maio 2016

Perfil da blogueira personalizado

Quem acompanha o Manual da Blogueira sabe que quarta-feira é dia de aula da nossa série Layout dos sonhos, e hoje vou te ensinar a deixar uma imagem redonda da forma mais simples. Existem inúmeros tutoriais com esse tema na internet, e confesso que encontrei muitos artigos iguais, uma pena, pois quem precisa aprender acaba perdendo tempo, por acessar vários blogs e se deparar com o mesmo tutorial.

O perfil da blogueira é um gadget adicionado na lateral do blog, que tem como função apresentar a autora do blog ao leitor. Abaixo da foto é necessário que tenha uma breve descrição sobre a blogueira, como o nome ou apelido, idade, local onde mora e seus gostos pessoais. Além é claro, das redes sociais para se divulgar.


A primeira etapa será feita no site PicMonkey, um editor gratuito que possui várias funções e uma delas é deixar qualquer imagem arredondada. Vamos ao tutorial?


1° - Acesse o site PicMonckey, no topo da página procure por Edit, abrirá uma janela para que você possa escolher a foto que deseja editar.

2° - Com a foto escolhida exposta, clique em Frames, depois na forma arredondada. Agora clique em Apply e em seguida em Save. Siga as instruções da imagem abaixo. Salve a imagem em PNG para que ela fique com o fundo transparente.


Imagem redonda no Picmonkey


Terminada essa etapa, é chegada a hora de colocar as mãos na massa. 


No painel administrativo do seu blog, procure por: 

Layout - Adicionar Gadget - HTML/JavaScript 

Dentro da caixa, cole o código abaixo:

<center>
<img src="URL-DA-IMAGEM-DA-BLOGUEIRA" width:300px; height:auto;" />
<br/>Escreva aqui um breve resumo sobre você!<br/><a href="LINK DO FACEBOOK"> <img src="URL-DO-ÍCONE-DO-FACEBOOK " onmouseout="REPETE-A-URL-DO-ÍCONE-DO-FACEBOOK ';" /></a>
<a href="LINK DO TWITTER"> <img src="URL-DO-ÍCONE-DO-TWITTER " onmouseout="REPETE-A-URL-DO-ÍCONE-DO-TWITTER ';" /></a>
<a href="LINK DO INSTAGRAM"> <img src="URL-DO-ÍCONE-DO-INSTAGRAM " onmouseout="REPETE-A-URL-DO-ÍCONE-DO-INSTAGRAM ';" /></a>
<a href="LINK DO GOOGLE+"> <img src="URL-DO-ÍCONE-DO-GOOGLE+ " onmouseout="REPETE-A-URL-DO-ÍCONE-DO-GOOGLE+ ';" /></a>
<a href="LINK DO YOUTUBE"> <img src="URL-DO-ÍCONE-DO-YOUTUBE " onmouseout="REPETE-A-URL-DO-ÍCONE-DO-YOUTUBE ';" /></a>
</center>

Entendendo o código...

Vermelho: Centraliza todo o código, apague se quiser.
Rosa: É referente a url da imagem arrendondada.
Dourado: Largura da imagem. O tamanho deve ser compatível, ou seja, igual da imagem.
Azul:  Adicione a sua descrição.
Verde: Se refere ao link da sua rede social.
Roxo: É referente a url do ícone.


Preparei 3 modelos lindos de ícones em aquarela (Watercolor em inglês) para te presentear. Escolha a cor que combina mais com o seu layout atual!




ícones redes sociais png

Conclusão 

Eu segui um padrão na hora de compor a sequência dos ícones das redes sociais, mas não é uma regra, caso queira, pode muda-los de posição, por exemplo: Colocar o youtube e depois o facebook, e assim sucessivamente. Deixe do seu gosto.

Caso queira deletar, ou adicionar mais ícones, o código de cada um começa com a marca <a e termina com </a>. Acompanhe nossa série de Vinte e uma aulas. Confira abaixo o que já rolou por aqui:



O que achou da aula de hoje? Deixe a sua opinião! Não esqueça de seguir o blog e de nos acompanhar nas redes sociais. Um super beijo e até o próximo post!


9 comentários:

  1. Ai meu Deus, que blog maravilhoso! Eu também uso muito o PicMonkey pra editar, ele é ótimo, né?! Adorei as dicas e já segui pra ficar ligada nas próximas <3
    Um beijão,
    Gabi do likegabs.blogspot.com ♡

    ResponderExcluir
    Respostas
    1. Olá Gabriela =) Fico muito feliz em saber que gostou do meu cantinho. Espero que as minhas dicas te ajudem <3 Um mega bjo linda :*

      Excluir
  2. A M O seus posts, essas dicas ajudam muito <3 <3 Mas uma coisa que as vezes atrapalha é que a gente clica no link e direciona para a página aqui mesmo, muda pra abrir em outra guia pra ajudar a gente pra ficar mais prático <3 <3

    ResponderExcluir
    Respostas
    1. Adoreeeei sua dica Jéssica! Já vou providenciar essa mudança aqui pro Manual =) Obrigada minha linda <3 Bjão :*

      Excluir
    2. Ensina como colocar newsletter se você pagou, como que é, vou adorar saber sobre ;) <3

      Excluir
  3. Lorena qual é a sua plataforma?

    ResponderExcluir