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!

Compartilhe nas redes

Tags:

Poderá gostar também de:

16 comentários

  1. Victoria Britto11 de novembro de 2016 às 07:03

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

    ResponderExcluir
  2. Josy Rezende11 de novembro de 2016 às 08:13

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

    ResponderExcluir
  3. Clara Lisle11 de novembro de 2016 às 12:30

    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. laiza abreu19 de novembro de 2016 às 11:42

    não consegui :(

    ResponderExcluir
  5. Daniella Loureiro.24 de novembro de 2016 às 04:10

    AMEEEEI O TUTORIAL ❤

    ResponderExcluir
  6. Polyana Roque24 de novembro de 2016 às 04:25

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

    ResponderExcluir
  7. Diorman Werneck24 de novembro de 2016 às 04:48

    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
  8. Lara Costtaa24 de novembro de 2016 às 08:59

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

    ResponderExcluir
  9. Taty Campos Blog24 de novembro de 2016 às 09:08

    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
  10. Encontrei Nas Entrelinhas24 de novembro de 2016 às 09:28

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

    ResponderExcluir
  11. Mulherzinhas SA24 de novembro de 2016 às 09:41

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

    ResponderExcluir
  12. Kalinny Alves Make Up24 de novembro de 2016 às 09:53

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

    ResponderExcluir
  13. Lu Perrone24 de novembro de 2016 às 09:53

    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
  14. Olhar de Garota24 de novembro de 2016 às 17:09

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

    ResponderExcluir
  15. Teka Almeida12 de dezembro de 2016 às 06:49

    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
  16. tania paula4 de março de 2017 às 16:03

    Como faço para hospedar as imagens?

    ResponderExcluir

Flickr Images

Subscribe