18 maio 2021

Perfil da autora com ícones sociais personalizado

em 18 maio 2021

Tempo de leitura:
Perfil da autora na sidebar do blog personalizada com ícones sociais


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

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

    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.

    Confira também, outros artigos: