quinta-feira, 1 de março de 2018

Foto de Perfil Redonda com Redes Sociais

oi meninas, trouxe mais esse post tutorial voltado para blogueiras iniciantes, e hoje será a foto de perfil redonda com icones de redes sociais em baixo, eu amo esse modelo nos blogs, espero que gostem... vamos la ?

Para que o HOVER funcione, é necessario que voce tenha duas imagens IGUAIS porem de CORES DIFERENTES.
Precisa hospedar as imagens para ter a URL de todas elas, inclusive a foto do PERFIL.
Os creditos do codigo vão para o Blog Ó a Blogueira da minha Jaque Ferreira <3


Então vamos lá:


Copie esse codigo e cole na gadget lateral do layout:

<div id='perfil'>
<div class='foto'>
<img src='LINK_FOTO_PERFIL'/>
</div>
<center>
<div class='descricao'>
DESCRIÇAO DA BLOGUEIRA"
 <a href='LINK_DA_PAGINA_SOBRE'> Saber Mais...</a>
</div>
<center>
<div class='redes'>

<a href="  LINK_DO_FACEBOOK  " target="_blank">
<img src=" LINK_IMAGEM_FACEBOOK_NORMAL " onmouseout="this.src=' LINK_IMAGEM_FACEBOOK_NORMAL ';" onmouseover="this.src='LINK_IMAGEM_FACEBOOK_HOVER';" />
</a>


<a href="  LINK_DO_TWITTER  " target="_blank">
<img src=" LINK_IMAGEM_TT_NORMAL " onmouseout="this.src=' LINK_IMAGEM_TT_NORMAL ';" onmouseover="this.src='LINK_IMAGEM_TT_HOVER';" />
</a>


<a href="  LINK_DO_INSTAGRAM  " target="_blank">
<img src=" LINK_IMAGEM_INSTA_NORMAL " onmouseout="this.src=' LINK_IMAGEM_INSTA_NORMAL ';" onmouseover="this.src='LINK_IMAGEM_INSTA_HOVER';" />
</a>

</div>
</center></center></div>


Notem que para que o HOVER funcione, a imagem NORMAL usa-se duas vezes, e a HOVER apenas uma para cada icone, OK?

Caso voce tenha mais redes sociais, basta adicionar esse codigo para cada rede social:
<a href="  LINK_DA_REDE_SOCIAL  " target="_blank"><img src=" LINK_IMAGEM_NORMAL " onmouseout="this.src=' LINK_IMAGEM_NORMAL ';" onmouseover="this.src='LINK_IMAGEM_HOVER';" /></a>
Abaixo da descricao da blogueira, onde esta escrito LINK_DA_PAGINA_SOBRE voce substitue pelo link da sua pagina que fala mais sobre você e seu blog.

Bom pessoal espero que voces tenham gostado, deixe seus comentarios, e não esquecam de se inscrever no meu canal: Canal Poliana Rocha