20 de março de 2019

Perfil da Autora Personalizado


Quatro Modelos Diferentes para Perfil da Autora



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.









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 e cortar , 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.







Nos sites Icons  e Ícones sociais e logo você vai encontrar alguns 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.
Clique em demonstração para dar uma olhada em um dos modelos e eu também deixei mais alguns ícones que você pode estar baixando.

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 17/09/2019


Curta compartilhe ajude o blog a crescer.😉 






Nenhum comentário:

Postar um comentário

Gostou do Post , deixe seu comentário e sugestões .
Em breve responderei a todos.

Copyright © Blog de Variedades Baú da Dri Design by Adriana Bentim | Tecnologia do Blogger