sexta-feira, 23 de setembro de 2011

Título dos posts com efeito - movimento CSS3

blog-post-edit-iconQue tal deixar os títulos de suas postagens com um belo efeito CSS3? Praticamente tudo em nosso blog tem que ser interativo para que nossos visitantes tenham uma boa impressão, então nada melhor deixar interativo aquilo que seja mínimo. Devemos cuidar do nosso blog e se preocupar com seu designer nem que seja nos pequenos detalhes, e os títulos das postagens não podem ficar de fora.

O efeito trata-se de uma transição CSS3 que movimenta o título quando posicionamos o cursor sobre ele, um efeito hover.

Agora vamos aplica-lo em seu blog. Para isso, entre no painel principal do seu blog e acesse o “Editar HTML”. Já no HTML do blog, procure por:

.post h3 a, .post h3 a:visited, .post h3 strong {

Abaixo dessa linha cole o seguinte código CSS:

-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;

Agora procure por:

.post h3 strong,.post h3 a:hover {

Abaixo dessa linha cole o seguinte código:

-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);

Pronto! Agora é só deixar seus visitantes e seguidores desfrutarem da novidade em seu blog.

Marcadores: , , ,

31 Comentários:

Às 23 de setembro de 2011 12:25 , Blogger Roselia Lopes disse...

que legal , coloquei no meu blog, e nos pequenos detalhes, que faz toda diferenca achei lindo
brigada.

 
Às 24 de setembro de 2011 19:00 , Blogger Holtz disse...

massa

 
Às 24 de setembro de 2011 21:07 , Blogger Cruzeiro Sempre disse...

Entao eu tentei colocar esse efeito no meu blog, porém meu blog foi feito com o Attistter e nao achei os codigos

 
Às 24 de setembro de 2011 23:24 , Blogger Códigos Blogger disse...

@Cruzeiro Sempre Dai fica mais complicado, mas tente procurar por...

.art-post h2.art-postheader a.hovered

 
Às 29 de setembro de 2011 08:45 , Blogger Andson disse...

para que não conseguio desta forma procure por h3.post-title a:hover { e acrecente -webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);

 
Às 29 de setembro de 2011 12:52 , Blogger Caio disse...

Olá, no meu blog eu não encontrei .post h3 a, .post h3 a:visited, .post h3 strong { . poderia me ajudar

 
Às 29 de setembro de 2011 13:47 , Blogger Códigos Blogger disse...

Caio, tente colar o código abaixo antes de ]]></b:skin>

h3.post-title a {
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}

h3.post-title a:hover {
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
}


Se der certo, avise.

 
Às 29 de setembro de 2011 15:06 , Blogger Caio disse...

Olá, Cara, Não deu certo mas, estou organizando meu template e acho que agora dará certo, mas obrigado desde já.

 
Às 30 de setembro de 2011 13:30 , Blogger Caio disse...

Pronto! Estava organizado meu template, e deu certo, valeu pela a ajuda!

 
Às 1 de outubro de 2011 11:02 , Blogger Holtz disse...

Oi, no meu outro template não funcionou.. Não trem a tag , tentei por antes de ]]> más so que também #Fail
Pode me ajudar? Obrigado

 
Às 1 de outubro de 2011 21:26 , Blogger Códigos Blogger disse...

@Holtz Qual blog você quer aplicá-lo?

 
Às 5 de outubro de 2011 13:14 , Blogger Will disse...

dá maneira do tuto naum funfou e coloquei o


h3.post-title a {
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}

h3.post-title a:hover {
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
}

como havia mandado... porém não funfou também ..

http://uzumaki-extreme.blogspot.com

 
Às 5 de outubro de 2011 16:59 , Blogger Códigos Blogger disse...

Will, tente trocar
h3.post-title a {

por

h3.post-title {

 
Às 5 de outubro de 2011 18:42 , Blogger Holtz disse...

@Códigos Blogger Nesse http://www.universetransformice.blogspot.com/

 
Às 8 de outubro de 2011 20:22 , Blogger Waliff Bruno disse...

Muito legal.. eu tenho um blog e to tentando fazer de tudo pra alegrar os visitantes do mesmo.. De uma olha dinha la http://seumundosuavida.blogspot.com/.
BOA NOITE...!

 
Às 30 de outubro de 2011 14:26 , Blogger Adm. disse...

Adcionei no meu blog fico maneiro olhem http://www.atualizacoes.net/

 
Às 1 de novembro de 2011 00:17 , Blogger DDG-admin disse...

kkkkkkk consegui,só q no meu eu editei e num tinha esse codigo,mais eu axei onde colocar depois de muitos teste...
Bem legal o efeito...parabens pl tuto...

 
Às 11 de novembro de 2011 15:27 , Blogger Lucas Ornelas disse...

uso o modelo padrão do Blogger e bem simples vai ficar assim

É só tirar o a do final e substituir o "h3.post-title {" pelo código abaixo:


h3.post-title {
margin: 0;
font: $(post.title.font);
-webkit-transition:All 0.5s ease;
-moz-transition:All 0.5s ease;
-o-transition:All 0.5s ease;
}

h3.post-title:hover {
-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
-o-transform: rotate(0deg) scale(1) skew(1deg) translate(10px);
}

 
Às 11 de novembro de 2011 20:18 , Blogger Jonaz Lima disse...

Mano, como coloca isso em todos os links do blog?

 
Às 14 de novembro de 2011 23:01 , Blogger Códigos Blogger disse...

Jonaz,

Vá no editar HTML do seu blog e procure por:

a:link {

Abaixo dela cole o código da segunda caixa de código deste tutorial.

Agora procure por:

a:hover {

Abaixo dela cole o código da quarta caixa de código.

Salve e veja se funcionou.

 
Às 16 de novembro de 2011 18:53 , Blogger Jonaz Lima disse...

Meu blog é do artisteer. Não tem a:link { ):

 
Às 20 de novembro de 2011 22:05 , Blogger Códigos Blogger disse...

Então apenas acrescente.

 
Às 30 de novembro de 2011 17:03 , Blogger Romario disse...

coloquei no meu =D, muito fera

http://cruzeironaweb.blogspot.com/

 
Às 8 de dezembro de 2011 04:27 , Blogger Rhay_Fither disse...

VlW mano, gente sabe essa segunda palavra q tem q procurar?
Coloquem:
.post h3 strong, .post h3 a:hover {

que vai dar certo!

 
Às 10 de dezembro de 2011 23:49 , Blogger Thiago_AR18 disse...

No meu deu certo, só que no google chrome ele não tem efeito... alguem me ajuda?

 
Às 22 de dezembro de 2011 11:33 , Blogger alien disse...

muito bom o seu site

 
Às 11 de janeiro de 2012 23:44 , Blogger Izaque disse...

Olá eu não consegui como vocês pediram mas tentei colar o código que vocês pediram antes de ]]> e consegui obrigado OBS vocês tem um tutorial de como destacar comentários eu ão consigo destacar poderiam fazer outro tutorial ?

 
Às 24 de julho de 2012 13:29 , Blogger Jessie disse...

Oi, eu tentei procurar .post h3 a, .post h3 a:visited, .post h3 strong { e o .post h3 strong,.post h3 a:hover { e não achei, também tentei colar acima de ]]> o código, mais também não funcionou !

 
Às 25 de agosto de 2012 16:17 , Blogger Yuri Gonçalves disse...

Vlaeu cara, tava procurando esse HTML pro meu blogger e nao conseguia encontrar! Mt obrigado :)

 
Às 21 de maio de 2013 11:52 , Blogger Klaus Berson disse...

Nossa, coloquei esse codigo e bem...
Ele não funcionou como o que esta descrito no tutorial, mas ele funcionou de forma bem mais bizarra, esta tão legal q irei deixar ele.

as imagem linkadas, ele da um movimento legal, chega a ser perturbador.

olhem como ficou legal, www.horrorvirtual.blogspot.com.br

OBS: Não sei se pode colocar links de blog aqui, qualquer coisa é só um adm apagar :)

 
Às 24 de setembro de 2013 17:03 , Blogger Samuel Chagas disse...

No meu deu certo colocando antes da tag: ]]>

Valeu!!!

 

Postar um comentário

Se você gostou deste artigo deixe um comentário!

Duvidas ou sugestões comentem aqui! =D
*Não insultar autor ou leitores da postagens
*Não pedir parceria por comentários
*Não publicar spam ou similar.

Assinar Postar comentários [Atom]

Links para esta postagem:

Criar um link

<< Página inicial