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.
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!
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!
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
ResponderExcluirUm beijão,
Gabi do likegabs.blogspot.com ♡
Olá Gabriela =) Fico muito feliz em saber que gostou do meu cantinho. Espero que as minhas dicas te ajudem <3 Um mega bjo linda :*
ExcluirFicou muito lindo, amei <3
ResponderExcluirObrigada Nathy <3 Bjão :*
ExcluirA 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
ResponderExcluirAdoreeeei sua dica Jéssica! Já vou providenciar essa mudança aqui pro Manual =) Obrigada minha linda <3 Bjão :*
ExcluirEnsina como colocar newsletter se você pagou, como que é, vou adorar saber sobre ;) <3
ExcluirPedido anotado =)
ExcluirLorena qual é a sua plataforma?
ResponderExcluirBlogger Aline =)
ExcluirObrigada Lory, deu certíssimo !
ResponderExcluirBeijos, Gi.
Blog About Girls
Ai que bom Giovana \0/
ExcluirBjos :*
Obrigadaaa! amei como sempre! queria que tivesse o pinterest :/
ResponderExcluirPode deixar que da próxima coloco o pinterest, Elayne <3
ExcluirUsei o código da redes sociais, pois estava procurando faz um tempo! Obrigada!
ResponderExcluirQue bom Regiane <3 Bjão :*
Excluiro post me ajudou muito, mas nao estou conseguindo salvar os icones, eles nao aparecem na minha pagina
ResponderExcluirBrunna, os ícones só vão aparecer depois que você COLAR A URL DE CADA ÍCONE nos lugares indicados. Primeiro, você vai baixar os ícones da cor que deseja, em seguida vai adicionar os ícones em uma postagem no blogger, como se estivesse criando um post, depois acesse o post que adicionou os ícones e com o botão direito do mouse clique em COPIAR ENDEREÇO DA IMAGEM, se você usa o navegador chrome será essa frase, mas basicamente aparece assim mesmo.
ExcluirO próximo passo é adicionar esse link no local indicado no código que eu publiquei nesse artigo, URL-DO-ÍCONE-DO-INSTAGRAM, e repita esse processo com todos os ícones até finalizar. Espero ter ajudado! Beijo grande e sucesso <3