- 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 desejarcolor: #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? !
Comente, críticas e sugestões, são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Inscreva-se e receba novidades.