Formulário de contato

Nome

E-mail *

Mensagem *

Perfil na lateral do blog com imagem grande arrendondada e redes sociais

Para glória do Senhor Jesus!


Uma coisa que acho bem legal num blog e estão usando muito, é a apresentação do perfil do blogueiro no topo da barra lateral, com imagem grande arredondada (ou não) e links para suas redes sociais abaixo.



Bora saber como fazer.

Antes de tudo, faça backup do seu modelo/template.

Entre no seu painel Blogger em MODELO >> EDITAR HTML.

Dê um clique dentro da caixa de código e depois dê um Ctrl+F. No buscador que abrir dentro da caixa de código digite </head> e dê enter. 

Encontrando </head> cole uma linha ACIMA o seguinte:

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Essa linha de código contém as fontes dos ícones. Se já tiver em seu blog, fica a seu critério substituir ou não.

Salve o modelo.

Agora vá em LAYOUT, e na barra lateral adicione um gadget HTML/JavaScript. Nesse gadget cole o seguinte:

<center>
<img src="ENDEREÇO DA SUA IMAGEM DE PERFIL" style="-moz-border-radius: 200px; -webkit-border-radius: 200px; -o-border-radius: 200px; width:240px; heigh:auto;" />
<br />
<div style="text-align: center;">ESCREVA AQUI UM TEXTO CURTO SOBRE VOCÊ.
<div /> <a href="ENDEREÇO DA PÁGINA COM SEU PERFIL MAIS ELABORADO" style="text-decoration: underline;">Saiba mais &#8594;</a></div>
<br />
<ul class="socialweb">
<a href="ENDEREÇO DO SEU PERFIL NO FACEBOOK" target="_blank" title="Facebook"><li class="iconsocialweb"><i class="fa fa-facebook"></i></li></a>
<a href="ENDEREÇO DO SEU PERFIL NO TWITTER" target="_blank" title="Twitter"><li class="iconsocialweb"><i class="fa fa-twitter"></i></li></a>
<a href="ENDEREÇO DO SEU PERFIL NO GOOGLE+" target="_blank" title="Google+"><li class="iconsocialweb"><i class="fa fa-google-plus"></i></li></a>
<a href="ENDEREÇO DO SEU PERFIL NO PINTEREST" target="_blank" title="Pinterest"><li class="iconsocialweb"><i class="fa fa-pinterest"></i></li></a>
<a href="ENDEREÇO DO SEU PERFIL NO INSTAGRAM" target="_blank" title="Instagram"><li class="iconsocialweb"><i class="fa fa-instagram"></i></li></a>
</ul>

<style type="text/css">
ul.socialweb{
display: inline; 
margin-top: 5px; 
margin-left: -2px; 
padding: 0; 
list-style: none;
}
ul.socialweb li{

display: inline-block !important; 
padding: 4px; 
margin-left: 1px; 
margin-right: 3px;
}
li.iconsocialweb{

background: #f2f2f2; /* COR DO FUNDO DO BOTÃO */
width: 30px; 
height: 30px; 
line-height: 30px; 
border:1px solid #c6c6c6; /* TAMANHO, TIPO E COR DA BORDA */
border-radius:50%; 
text-align: center; 
color: #555555; /* COR DO ÍCONE DO BOTÃO */
margin: 8px 4px 0 auto; 
font-size: 20px; 
font-weight: normal; 
transition: color 0.7s ease-out; 
transition: all .3s ease-in-out;
}
li.iconsocialweb:hover{

background: #494949; /* COR DO FUNDO DO BOTÃO QUANDO CURSOR EM CIMA */
border:1px solid #555555; /* TAMANHO, TIPO E COR DA BORDA QUANDO CURSOR EM CIMA */
color: #ffffff; /* COR DO ÍCONE DO BOTÃO QUANDO CURSOR EM CIMA */
}
</style></center>


No local do código marcado de verde, cole o endereço da foto do seu perfil. Para isso você deve tê-la hospedado em algum site que forneça esse serviço.

No local do código marcado de laranja, escreva um texto curto de sobre você.

No local do código marcado de vermelho, cole o endereço do seu perfil mais elaborado.

Nos locais do código marcado de roxo, cole os respectivos endereços de suas redes sociais.

Nos locais do código marcado de azul, estão as cores em hexadecimais do fundo, da borda e do ícone do botão respectivamente. Altere se desejar.

Nos locais do código marcado de rosa, estão as cores em hexadecimais do fundo, da borda e do ícone do botão respectivamente, quando cursor em cima. Altere se desejar.

Encontre códigos seguros de cores na paleta de cores da web.

Depois de feito os ajustes, salve.

Sugiro que faça tudo primeiro em um blog de teste, e só depois no blog oficial.

Beijoka!
Gratidão
Author Image

Meri Pellens
Cristã, mãe e blogueira com necessidades físicas especiais. Busco viver cada dia como único, valorizando todos os momentos com olhos fitos no Senhor. Amo trabalhar com blogs e artes digitais.

Um comentário:

  1. Oi Rose,
    Gostei da dica, mas tenho medo de mexer sozinha na inteface do blog. Vamos ver se tomo coragem.
    Bjs

    ResponderExcluir