*Novidade* Receba 40 Modelos de Mídia Kit Editável com 35% de desconto até domingo, dia 24 de Novembro Eu Quero

X


Follow Us

Participe da nossa comunidade de Mulheres Empreendedoras!

Cadastre-se para receber as novidades do blog direto do seu e-mail!

 

18 maio 2016

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

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!


18 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
  4. Obrigadaaa! amei como sempre! queria que tivesse o pinterest :/

    ResponderExcluir
    Respostas
    1. Pode deixar que da próxima coloco o pinterest, Elayne <3

      Excluir
  5. Usei o código da redes sociais, pois estava procurando faz um tempo! Obrigada!

    ResponderExcluir
  6. o post me ajudou muito, mas nao estou conseguindo salvar os icones, eles nao aparecem na minha pagina

    ResponderExcluir
    Respostas
    1. Brunna, 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.

      O 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

      Excluir

Topo
Todos os direitos reservados - Desenvolvido com
por Lorena Alves
Usamos cookies próprios e de terceiros que entre outras coisas recolhem dados sobre seus hábitos de navegação para mostrar publicidades personalizadas e realizar análises de uso de nosso site.
Se continares navegando consideramos que aceita seu uso. Entendi Mais informações