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 -
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
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!
ResponderExcluirBeijos
www.batom-veermelho.blogspot.com
Amandaaaaa, fico feliz que tenha gostado das imageeens <3 preparei com todo amor e carinho para minhas leitoras.
ExcluirEu que agradeço pelo seu comentário, lindooona >3
Amei esse tutorial, quando eu tiver mais tempo vou tentar lá no blog. Gostei de mais. Beijos coração <3
ResponderExcluirhttp://joicyrecco.blogspot.com.br/
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 :/
ResponderExcluirQuando eu coloquei as suas imagens deu certo. Mas as minha não dão.
Alguma dica?
Deyze, não era para elas ficarem sem qualidade. Que estranho isso :o
ExcluirRecomendo que você salve suas imagens como .PNG e em um tamanho pequeno, de 64px ou menos. Tomara que ajude
ADOREI! Fiz no meu blog e deu certinho, to apaixonada *-* Fico passando o mouse em cima o tempo todo agora NOJASNJOASNJOAS
ResponderExcluirObrigada pelo tutorial, Jaque <3
http://itsgeekly.blogspot.com.br
Weeendyyy, eu sou APAIXONADA por efeito hover hahahaha fico passando sempre o mouse pra ver esse efeito liiindo *o*
Excluirque bom que cê fez e deu ceeertooo <3
Olá!! Amei tudo!! Vc poderia fazer um tutorial para ensinar como faz para colocar a imagem da categoria acima da postagem? Brigaduuuu
ResponderExcluirque bom que gostooou <3
Excluirvou fazer, Éricaaa! Proximo tutorial será ele!
ADOREI
ResponderExcluir<3333
Excluir