Perfil da Blogueira com Ícones das redes sociais em hover

02:18


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!

Você pode gostar também

16 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

Mande seu comentário, criticas, elogios ou sugestões.
Responderei o mais rápido possivel.
Um forte abraço a todos vocês!

Contrate o Blog

Meu blog faz parte do Modatrade


Renata Massa
Renata Massa
Modatrade | A vitrine dos blogs de moda
Modatrade | A vitrine dos blogs de moda