Perfil da autora com ícones sociais personalizado

By Adriana Bentim em 18/05/2021

Tempo de leitura:

• Um perfil da autora (o), na lateral (sidebar) do blog é uma boa pedida trazendo a sensação de maior proximidade entre o leitor e quem escreve o blog.
• 
  
• Um breve resumo sobre a pessoa que escreve os artigos, seguido pelo objetivo e finalidade, do blog que está visitando. 
• 
  
• Finalizando com um “leia mais” ou apenas o sinal (+), para que se desejar siga para se aprofundar na sua página 'sobre'(link da página), acompanhado de suas redes sociais incentivando a interação.

• Confira como deixar o perfil da autora mais atrativo chamando a atenção de seus leitores. 
• 
  
• 
  
• Você pode variar bastante trocando o formato dos ícones e as cores das personalizações, combinando com seu blog ou seguindo a cor de cada rede social espero que gostem.

• No blog modelo Any você pode conferir como fica uma das personalizações.
• 
  

Blog demonstração Any

• Para adicionar o perfil da autora personalizado, no painel do blog vá em layout e adicione um gadget HTML\Javascript insira o código abaixo, título e salve.
• 
  
• Simples assim!

• Código:

<style>

.profile-pic {

text-align: center;

font-size: 14px; /*TAMANHO DA FONTE DO TEXTO*/

}

.profile-pic img {

width: 250px; /*LARGURA DA FOTO*/

height: auto;

opacity:1

}

.profile-pic img:hover {opacity:0.7;

}

#socialmediaiconsside {

font-size: 22px; /*TAMANHO DA FONTE DOS ÍCONES*/

margin: 0;

padding-right: 10px;

text-align: center;

position:relative;

}

#socialmediaiconsside a {

color: #80ced6; /*COR DOS ÍCONES*/

display: inline-block;

line-height: 40px;

padding: 0 5px;

}

#socialmediaiconsside a:hover {

color: #618685; /*COR DOS ÍCONES EM ESTADO HOVER*/

}

</style>

<div class="profile-pic"> 

<img src="sua foto " border="0" alt="profile"/> 

<p align="center">Descrição<a href='link da ´pagina sobre '>(+)</a>

 </p> </div>

<div id="socialmediaiconsside">

<a href="https://www.facebook.com/suapágina " target="_blank"><i class="fa fa-facebook"></i></a>

<a href="https://twitter.com/seunome" target="_blank"><i class="fa fa-twitter"></i></a>

<a href="https://br.pinterest.com/seunome/ " target="_blank"><i class="fa fa-pinterest"></i></a>

<a href="https://www.instagram.com/seunome/ " target="_blank"><i class="fa fa-instagram"></i></a>

<a href="https://www.linkedin.com/seunome" target="_blank"><i class="fa fa-linkedin"></i></a>

<a href="mailto:e-mailcomercial "><i class="fa fa-envelope"></i></a>

</div>

<center>

<div style="display: inline;

width:auto;

background: transparent;

font-family:'Copse';

font-size: 20px;

color: #618685;

padding: 5px 5px;

margin-top: 0px;

text-align: center;">

• Onde você deve alterar?

font-size: 14px; /*TAMANHO DA FONTE DO TEXTO*/

width: 250px; /*LARGURA DA FOTO*/

font-size: 22px; /*TAMANHO DA FONTE DOS ÍCONES*/ aumente se desejar

color: #80ced6; /*COR DOS ÍCONES*/

color: #618685; /*COR DOS ÍCONES EM ESTADO HOVER*/

color: #80ced6; /*COR DOS ÍCONES*/

color: #618685; /*COR DOS ÍCONES EM ESTADO HOVER*/

• O Gadget também pode ser personalizado sozinho usando um background para diferenciar dos demais.

• Código para Gadget personalizado deve ser adicionado acima de ]]></b:skin>:

#ID do gadget{background:linear-gradient(to right,floralwhite,lightcyan,peachpuff);font-family:lobster; /*Fonte do título do Gadget Separado*/text-align:center;color : #708090 /*Cor do título do Gadget Separado*/font-size: 18px; /* Tamanho do título do Gadget Separado */}#ID do gadget a:hover {background:linear-gradient(to top,right,pink,lightcyan);color:ffedff;}

• Se desejar incluir mais alguma rede social é só acrescentar esse mesmo código trocando o nome da rede social e o ícone.
• 
  
• <a href="https://www.facebook.com/páginadoblog/ " target="_blank"><i class="fa fa-facebook"></i></a>

• Para saber mais como instalar os ícones sociais Font Awesome, para visualizar várias combinações e background para personalizar o Gadget confira a Tabela de cores.

• Dúvidas sugestões e pedidos deixe nos comentários abaixo, atenderei o mais breve possível.

CURTA, COMENTE, COMPARTILHE!