Tutorial

Perfil da Blogueira com Ícones das redes sociais em hover


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:

Descrição da Blogueira vem aqui,
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!

Renata Massa

You Might Also Like

17 comentários

  1. Victoria Britto11 novembro

    que babadeiraaaaa, ameei! passa essa inteligência pra mim, sou super lerda nisso :/ até tu explicando tão bem <3

    ResponderExcluir
  2. WWW.JOSYREZENDE.COM11 novembro

    Adorei Renata!
    Agora vou tentar fazer !
    Parabéns 🤗🤗🤗😚

    ResponderExcluir
  3. Clara Lisle11 novembro

    Renata eu realmente amo o seu blog! As suas dicas são maravilhosas e agora que voltei com o meu blog usei muitas delas para editar o meu layout. Admiro MUITO o seu trabalho!! Te desejo muito sucesso. Grande beijo.
    http://claralisle.blogspot.com.br/

    ResponderExcluir
  4. EU nas CIDADES!!12 novembro

    Amei o seu blog!
    Muito completo!
    Muito natural! Top !!!

    http://www.eunascidades.com

    ResponderExcluir
  5. Laiza Abreu19 novembro

    não consegui :(

    ResponderExcluir
  6. Daniella Goulart24 novembro

    AMEEEEI O TUTORIAL ❤

    ResponderExcluir
  7. Polyana Roque24 novembro

    Adorei o post!! É super útil e bem esclarecido. AMO icones com hover, deixa um aspecto mais bonito, sei la. Hahaha

    ResponderExcluir
  8. Diorman24 novembro

    Meu sonho é aprender mexer com HTML eu juro que já tentei mais sou uma negação.
    Eu tenho um layout lindo e não sei como instalar e nem configurar. :( Já assisti seu vídeo ensinando, mas eu sou uma negação mesmo!

    ResponderExcluir
  9. laracosttaa24 novembro

    Que tutorial bacana, serve pra muitas meninas modificar o layout delas, adorei parabéns.

    ResponderExcluir
  10. Taty Campos24 novembro

    Já falei que amo seus tutoriais e dicas Re?
    arrasou mais uma vez, eu acho uma fofura e super profissional perfil da blogger assim!
    arrasou lindona! ♥

    beijinhos
    Taty♥

    ResponderExcluir
  11. Unknown24 novembro

    Você arrasa demais. E agora o meu também está lindo assim graças a vocês rsrs. <3

    ResponderExcluir
  12. Erica Oliveira24 novembro

    Eu adoro esses seus tutoriais, acho bem fáceis de entender e eu lembro que já recorri a eles várias vezes rs

    ResponderExcluir
  13. Kalinny Alves Make Up24 novembro

    Eu amo seus posts Rê cada vez aprendo mais, continue trazendo novos post para nós, e depois vou tentar colocar os icones *-*

    ResponderExcluir
  14. Luciana Perrone24 novembro

    Oi, tudo bem?
    Primeira vez que comento aqui...Conheço o seu blog há alguns dias e me apaixonei...
    As dicas são muito interessantes pra quem está no início, como eu.
    Continue com esse capricho todo.
    Parabéns!
    Beijos

    ResponderExcluir
  15. Franciele Oliveira24 novembro

    Adoreeiii! Amanhã mesmo vou tentar incluir no meu. Big Beijos <3

    ResponderExcluir
  16. Teka Almeida12 dezembro

    Olá Reh, adoro o seu blog e parabéns pelo seu trabalho! Gostaria de fazer um pedido, você sabe como colocar os marcadores abaixo do titulo de postagem?

    Obrigada e beijos mil!
    Blog Teka Almeida

    ResponderExcluir
  17. Unknown04 março

    Como faço para hospedar as imagens?

    ResponderExcluir

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possível.
Um forte abraço.

instagram