11 julho 2015

#TutoriaisDaJaque: Fazendo meu Layout #6

 Olááááá meus tesuuudos.

 Gente, meu teclado havia quebrado e fazer post de tutorial mexendo no teclado virtual NÃO DÁÁÁ! É horrível HAHA.
 Vamos para ao 6º tutorial de #FazendoMeuLayout. Tô bem feliz com o resultado que essa série está dando, tem muita gente curtindo e isso me deixa muito feliz, de verdade - me abraceeeem! - Hoje vou ensinar algo que requer MUITO a atenção de vocês. Assim como todos os outros códigos um e a mais o seu código buga todo :/


 Gente, percebi que no arquivo que disponibilizei para vocês eu apenas coloquei as imagens comum das Categorias, para ficar mais legal eu fiz Imagens para as categorias em Hover, ou seja, quando você estiver com o mouse em cima da imagem ela mudará de cor. Coloque o mouse em cima das Categorias aqui do Blog que você vai entender o que estou falando.


Dentro da caixinha de HTML/JavaScript você devera colar o código abaixo:


<div class='categoria'>
<a href="LINK DA CATEGORIA" target="_blank">
<img src="IMAGEM 1" onmouseout="this.src='IMAGEM 1';" onmouseover="this.src='IMAGEM HOVER';" />
</a>
</div>


Caso queira colocar mais imagem basta acrescentar mais códigos iguais a este:

<a href="LINK DA CATEGORIA" target="_blank">
<img src="IMAGEM 1" onmouseout="this.src='IMAGEM 1';" onmouseover="this.src='IMAGEM HOVER';" />
</a>

Para centralizar basta você ir em Modelo > Clique dentro da caixa de códigos e aperte CRTL+F > Pesquise por ]]>< > e acima disso cole:

/* Categoria
--------------------------------------*/
.categoria {
text-align:center;
}


Estou editando todos os posts de tutoriais aqui do OAB ♥ 04.01.2016


11 comentários:

  1. Jaque que super tutorial que apareceu pra mim em uma ótima hora! Adorei as imagens eu baixei e provavelmente irei colocar ainda hoje no meu blog! Obrigada e simplesmente adorei!
    Beijos


    www.batom-veermelho.blogspot.com

    ResponderExcluir
    Respostas
    1. Amandaaaaa, fico feliz que tenha gostado das imageeens <3 preparei com todo amor e carinho para minhas leitoras.
      Eu que agradeço pelo seu comentário, lindooona >3

      Excluir
  2. Amei esse tutorial, quando eu tiver mais tempo vou tentar lá no blog. Gostei de mais. Beijos coração <3

    http://joicyrecco.blogspot.com.br/

    ResponderExcluir
  3. O tutorial é excelente, Jaque, mas não consegui colocar no meu blog. Fiz novas imagens de categorias, mas sempre que hospedo em algum lugar, ela fica toda embaçada. Não sei mais o que fazer :/

    Quando eu coloquei as suas imagens deu certo. Mas as minha não dão.
    Alguma dica?

    ResponderExcluir
    Respostas
    1. Deyze, não era para elas ficarem sem qualidade. Que estranho isso :o
      Recomendo que você salve suas imagens como .PNG e em um tamanho pequeno, de 64px ou menos. Tomara que ajude

      Excluir
  4. ADOREI! Fiz no meu blog e deu certinho, to apaixonada *-* Fico passando o mouse em cima o tempo todo agora NOJASNJOASNJOAS
    Obrigada pelo tutorial, Jaque <3

    http://itsgeekly.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Weeendyyy, eu sou APAIXONADA por efeito hover hahahaha fico passando sempre o mouse pra ver esse efeito liiindo *o*
      que bom que cê fez e deu ceeertooo <3

      Excluir
  5. Olá!! Amei tudo!! Vc poderia fazer um tutorial para ensinar como faz para colocar a imagem da categoria acima da postagem? Brigaduuuu

    ResponderExcluir
    Respostas
    1. que bom que gostooou <3
      vou fazer, Éricaaa! Proximo tutorial será ele!

      Excluir