Perfil da autora com ícones sociais personalizado

em 18/05/2021

Tempo de leitura:
Perfil da autora com ícones sociais personalizado



  • 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.



  • 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.

Nenhum comentário , comente também!

Postar um comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.