Olá meus amoreeees, hoje trago um post com tutorial simples, porem precisa de atençao já que iramos trabalhar com varias url de imagens.
Para quem não viu o TUTORIAL #1 : PERFIL COM IMAGEM ARREDONDADA E ÍCONES DAS REDES SOCIAIS vale a pena conferir!!!
No TUTORIAL #2: Vamos aprender a colocar icones das redes sociais em hover com a descricao da Blogueira e a opcao de "Leia mais" para saber mais sobre a blogueira.
como na demonstracao abaixo:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhc-vTAaEinDs8k5c7-q7KR1cOVa89q7ZxwGuj8Mfj5c_peziLYL8yrXqUdLhvPfZx5EEC12rFymZeKre_59nv0tnrWLQofr1qkkwAvbQYwfdiW9TJ4N86r1cO4ILuIwtGjQ16EtJxtLhE/s1600/%252C%252C%252C%252C%252C%252C%252Ca.png)
Descrição da Blogueira vem aqui,
com nome, idade, profissao e etc." Saiba Mais...
com nome, idade, profissao e etc." Saiba Mais...
Espero que voces gostem, 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 querida amiga 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:
Um forte abraço, e até o proximo post se Deus quiser!