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!

17 comentários :

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

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

    ResponderExcluir
  3. 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. Amei o seu blog!
    Muito completo!
    Muito natural! Top !!!

    http://www.eunascidades.com

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

    ResponderExcluir
  6. 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
  7. Que tutorial bacana, serve pra muitas meninas modificar o layout delas, adorei parabéns.

    ResponderExcluir
  8. 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
  9. Você arrasa demais. E agora o meu também está lindo assim graças a vocês rsrs. <3

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

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

    ResponderExcluir
  12. 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
  13. Adoreeiii! Amanhã mesmo vou tentar incluir no meu. Big Beijos <3

    ResponderExcluir
  14. 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
  15. 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.

My Instagram

Copyright © Renata Massa. Made with by OddThemes