20 março 2019

Perfil da Autora Personalizado

🗨

Quatro Modelos Diferentes para Perfil da Autora

gadget perfil da autora personalizado


Demorei bastante para conseguir um código que funcionasse legal e os ícones das redes sociais não dessem problema , você pode variar bastante trocando os ícones em hover e as cores das personalizações , espero que gostem , no final da postagem tem alguns ícones de brinde , confiram.






Modelo Simples Perfil da Autora com Redes Sociais


Bom vamos ao perfil da autora personalizado  , adicione sua foto ( você pode adicionar redonda , quadrada não ultrapassando a medida doa sua sidebar)no local e descrição no local do texto em negrito , depois adicione o link das imagens das redes sociais que deseja , adicione um gadget html javascripit e cole o código abaixo :



<div id='PERFIL'>
<center><img src='sua imagem'/></center>
</div><center><div class='descricao'> Sua descrição</div>
<a href="http://www.twitter.com/" target="_blank"><img border="0"src=" Link da Imagem"style="text-algn:center;" /></a>
<a href="https://www.facebook.com/" target="_blank"><img border="0" src=" Link da Imagem" style="text-align: center;" /></a>
<a href="http://www.instagram.com/"target="balnk"><img border="0"src="Link da Imagem"style="text-align:center;"/></a>
<a href="https://www.pinterest.com/" target="_blank"><img border="0" src=" Link da Imagem" style="text-align: center;" /></a>
<a href="http://www.youtube.com/"target="balnk"><img border="0"src="Link da Imagem"style="text-align:center;"/></a>


Segundo Modelo
Perfil da Autora com Efeito na Foto

<style>
.profile-pic{
text-align:left;
font-style:Arial;
font-size:14px;
}
.profile-pic img{
height:auto;
  -webkit-filter:grayscale(60%);
filter:gray;
}
.profile-pic img:hover{opacity:0.6;}
</style>
<div class="profile-pic">
<img src='SUA FOTO '/>
<div class='descricao'>PEQUENA DESCRIÇÃO </div>
<div class="redes">
<a href="http://www.twitter.com/" target="_blank"><img border="0"src=" Link da Imagem"style="text-algn:center;" /></a>
<a href="https://www.facebook.com/" target="_blank"><img border="0" src=" Link da Imagem" style="text-align: center;" /></a>
<a href="http://www.instagram.com/"target="balnk"><img border="0"src="Link da Imagem"style="text-align:center;"/></a>
<a href="https://www.pinterest.com/" target="_blank"><img border="0" src=" Link da Imagem" style="text-align: center;" /></a>
<a href="http://www.youtube.com/"target="balnk"><img border="0"src="Link da Imagem"style="text-align:center;"/></a>




Terceiro Modelo
Perfil da Autora com Hover na Foto e nos Ícones


<style>
.profile-pic{
text-align:left;
font-style:Lobster;
font-size:14px;
}
.profile-pic img{
height:auto;
-webkit-filter: grayscale(60%);
filter:gray;
opacity:2
}
.profile-pic img:hover{opacity:0.9;}
</style>
<div class="profile-pic">
<img src='SUA FOTO'/>
 </div>
<div class='Descrição '>
SUA DESCRIÇAO ! <a href='LINK DA PAGINA SOBRE '>(+)</a>
</div>
<div class='redes'>
<center><a href="https://www.facebook.com " target="_blank">
<img src="ICONE 1 " onmouseout="this.src='REPETE ICONE 1 ';" onmouseover="this.src='ICONE 2 ';" />
</a>
<a href="https://twitter.com " target="_blank">
<img src="ICONE 1 " onmouseout="REPETE ICONE 1';" onmouseover="this.src='ICONE 2 ';" />
</a></center>
</div>

Para acrescentar mais redes sociais é só repetir o código:<a href=" ENDEREÇO DA SUA REDE SOCIAL" target="_blank"><img src="ICONE 1 " onmouseout="REPETE ICONE 1';" onmouseover="this.src='ICONE 2 ';" />



Para aparecer os ícones em hover você deverá escolher dois modelos diferentes , o que ficará aparecendo e o que aparecerá quando passar o mousse. O primeiro você colocarar onde está escrito ícone 1 , duas x e o segundo onde está ícone 2 .

Quarto ModeloPerfil da Autora com Redes Sociais em Hover e Gradiente


Essa personalização é um pouco mais trabalhosa mais fica muito bonita .
Primeiro código é praticamente igual aos outros .

<div id='perfil'> <div class='foto'><img src='SUA FOTO'/> </div><div class='Descrição '>TEXTO ! <a href='PAGINA SOBRE '>(+)</a></div><div class='redes'><a href="https://www.facebook.com/ " target="_blank"><img src="ICONE 1 " onmouseout="this.src=' REPETE ICONE 1 ';" onmouseover="this.src='ICONE 2 ';" /></a><a href="LINK REDE SOCIAL" target="_blank"><img src="ICONE 1" onmouseout="this.src='REPETE ICONE 1';" onmouseover="this.src='ICONE 2';" /></a></div></center></center></div>

O segundo código é para você inserir no HTML , então vá até tema editar HTML abra e primeiro verifique o ID do gadget perfil da autora ( ele tem que já estar instalado ) , pegue o id que deve ser html seguido por algum numero no meu caso é html6  , agora de um ctrl+f e digite ]]></b:skin> e acrescente o código abaixo antes do fechamento da tag.



#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;}



Sua personalização ficará assim :




Aqui tem alguns modelos de ícones que você pode estar usando estão todas em png   é só salvar a imagem no seu PC  , hospedar em uma pagina do seu próprio blog ,com o lado direito do mouse  click sobre a imagem copie o link coloca no local indicado teste estando certo salve.

brinde ícone png  rede social instagram preto e cinza

brinde ícone png rede social facebook preto e cinza

brinde ícone png  rede social pinterest preto e cinza

brinde ícone png  rede social twitter preto e cinza

brinde ícone png  rede social youtube preto e cinza

brinde ícone png  rede social facebook rosa

brinde ícone png  rede social instagram rosa

brinde ícone png  rede social pinterest rosa

brinde ícone png  rede social twitter rosa

brinde ícone png  rede social youtube rosa



Na página Freebies você encontrará mais modelos de ícones.

Você também acha muitos modelos gratuitos  que pode usar , é só escolher baixar , hospede em uma pagina do próprio blog , copie o link e coloque no local indicado confira e estando tudo certo , publique no seu blog.

Se tiver alguma dificuldade em executar algum dos códigos entre em contato pelos cometários que responderei o mais breve possível para ajudar.

Espero que gostem se sim deixem seu comentário se usarem alguns dos ícones deixem os créditos  ,se desejarem fazer algum pedido de tutorial e  ícones diferentes deixe seu pedido.

  • Atualizado em 13/04/2020


Não esqueça de deixar os créditos se repostar ou se usar os ícones , toda postagem é fruto de bastante trabalho e muito teste.😉 


Nenhum comentário:

Postar um comentário

Você leu uma postagem escrita com muito amor por mim Adriana autora do Baú da Dri . Gostou?! Deixe seu comentário , criticas e sugestões , ela são muito importantes para fazer o blog cada vez melhor . Curta , compartilhe ,ajude o blog a crescer .
Sua mensagem será respondida o mais breve possível .
Muito obrigada pela visita e volte sempre.

Confira também outras postagens aqui do Baú da Dri