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

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.

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!

Azul - Rosa - Lilás

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:

Baixe o layout base

Background personalizado

Cabeçalho com largura total

Categorias em imagem

Centralizando o título do post

Personalizando o rodapé do post

Postagem Relacionada

Títulos dos Gadgets Personalizados (5 Modelos)

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!