Tutorial com código como configurar a imagem de perfil icons sociais no Blogger Ofertas Imagens de Ícones

setembro 23, 2019

Configurar no blogger perfil redes sociais (ALT)

Olá a todos, hoje trago mais tutorial, os tutoriais são sempre bem vindos para ajudar nas configurações de um blog assim como eu aprendo com outras blogueiras também deixo aqui um post com dicas para o seu blog espero que ajude.

O tutorial de hoje é como configurar a sua imagem de perfil personalizada mais os icons de redes sociais também personalizados na barra lateral do Blogger.

No final do artigo deixo também umas ofertas de icons no caso de querer usar icons sociais personalizados, é só fazer copy paste.

Se gostou deste artigo compartilhe nas redes sociais e faça uma pequena doação assim ajuda a melhorar a qualidade deste meu espaço, Obrigado 




Eu andei bastante tempo sem conseguir fazer a alteração da minha imagem de perfil e configurar os meus icons sociais as minhas redes sociais, até que encontrei no blog da Elaine Gaspareto Visite AQUI, um tutorial a explicar correctamente e com os devidos códigos, visto que eu uso as ofertas dos seus templates fiz a alteração da minha imagem e linkei os meus icons as redes sociais com o código da Elaine Gaspareto e correu tudo as mil maravilhas.

É super fácil fazer a configuração da imagem de perfil e as redes sociais no blogger:


Use uma foto de qualidade para a sua imagem de perfil:

Para arredondar a imagem eu usei o editor fotográfico Canva clique AQUI:

Para fazer esta alteração basta copiar o código que vou deixar abaixo:

Para remover o fundo use este editor Fotográfico super simples e muito util o o Site Remove.bg clique AQUI:


Visite a minha Pagina de Recursos Gratis clique AQUI:


Eu usei está foto para a minha imagem de perfil:

Imagem de perfil (ALT)

Aconselho a fazer primeiro a alteração num blog de teste como eu tenho o meu Visite AQUI Blog Testes and Blogger

Depois de ter a sua imagem criada e arredondada  vai abrir o Layout e adicionar um Gadget a barra lateral, nas opções que aparecem escolhe Adicionar HTML/JAVASCRIPT.

Código do perfil+redes sociais


Views:
1438

CÓDIGO DA FONTE DOS ÍCONES
(colar abaixo de <head>)

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



CÓDIGO CSS E HTML
(colar como gadget HTML/JAVASCRIPT)
<style>
.profile-pic {
text-align: center;
font-size: 14px; /*TAMANHO DA FONTE DO TEXTO*/
}
.profile-pic img {
width: 250px; /*LARGURA DA FOTO*/
height: auto;
border-radius: 1000px; /*GRAU DE ARREDONDAMENTO DA FOTO*/
-webkit-border-radius: 1000px; /*GRAU DE ARREDONDAMENTO DA FOTO*/
opacity:1
}
.profile-pic img:hover {opacity:0.7;
}
#socialmediaiconsside {
font-size: 25px; /*TAMANHO DA FONTE DOS ÍCONES*/
margin: 0;
padding-right: 10px;
text-align: center;
position:relative;
}
#socialmediaiconsside a {
color: #000000; /*COR DOS ÍCONES*/
display: inline-block;
line-height: 40px;
padding: 0 5px;
}
#socialmediaiconsside a:hover {
color: #FF9A4F; /*COR DOS ÍCONES EM ESTADO HOVER*/
}
</style>

<div class="profile-pic">
<img src="ENDEREÇO DE SUA FOTO AQUI" border="0" alt="profile"/>
<p align="center"> AQUI VOCÊ COLOCA UMA PEQUENA BIOGRAFIA SUA. </p>   </div>


<div id="socialmediaiconsside">
<a href="YOUR FACEBOOK URL" target="_blank"><i class="fa fa-facebook"></i></a>
<a href="YOUR TWITTER URL" target="_blank"><i class="fa fa-twitter"></i></a>
<a href="YOUR PINTEREST URL" target="_blank"><i class="fa fa-pinterest"></i></a>
<a href="YOUR INSTAGRAM URL" target="_blank"><i class="fa fa-instagram"></i></a>
<a href="YOUR BLOGLOVIN URL" target="_blank"><i class="fa fa-heart"></i></a>
<a href="mailto:YOUR EMAIL ADDRESS"><i class="fa fa-envelope"></i></a>
</div>



Onde está marcado no código a rosa é ai que vai alterar o URL da Imagem para a sua Imagem de Perfil.

Mesmo no final do código marquei a lilás vai alterar os links para os links das suas redes sociais e está pronto, fácil certo?

Eu coloquei na barra lateral é onde fica bem a imagem de perfil com os icons sociais agora é a sua escolha, se tem mais duvidas consulte o blog da Elaine Gaspareto clique AQUI.

Como prometido fica aqui as imagens dos icons sociais se quiser consultar mais icons visite o meu Pinterest clique AQUI


Icon personalizado Facebook

Icon personalizado Instagram
Icon personalizado Pinterest
Icon personalizado twitter


Se gostou deste artigo compartilhe nas redes sociais e faça uma pequena doação assim ajuda a melhorar a qualidade deste meu espaço, Obrigado 



Não se esqueça de fazer pin:


Configurar no blogger perfil redes sociais (ALT)



You Might Also Like

0 comentários

Popular Posts

Like us on Facebook

ads

Flickr Images