21 de setembro de 2013

Tutorial - Como adicionar efeito no título do post

||


Oi pessoal. Hoje a desculpa por não ter postado muito é a preguiça, mesmo, me desculpem. Além disso, tem a famosa(porém verdadeira) desculpa dos deveres e atividades escolares.

Mas deixando de lado esse típico parágrafo de começo das minhas postagens, hoje trago pra vocês mais um tutorial, e dessa vez eu mesmo o criei, sem ver em nenhum outro site/blog. =D
O tutorial é sobre como colocar um efeito no título do blog. Se quiser aprender, me acompanhe. :)


Bem, todos vocês já viram, que quando você coloca o mouse sobre o título da postagem do blog, aparece um sublinhado nele. Hoje eu vou ensinar como tirar aquele sublinhado, e em vez dele, adicionar um efeito com cor no titulo do post.

Vejam o exemplo abaixo:


Como você pôde ver acima, o tom da postagem muda de preto para azul, isso num efeito que não dá para mostrar na imagem.

Vou ensinar como criar este efeito.

Entre em Design>Modelo>Editar HTML>Clique dentro da caixa de HTML>Aperte Ctrl+F e procure pelo código abaixo:

h3.post-title a:hover {


Assim que fizer isso apague este código que estiver abaixo dele:

text-decoration: underline;

Depois, cole abaixo de h3.post-title a:hover {, o outro código abaixo:

color: #00BFFF ; /* cor do título do post com efeito */
  -webkit-transition-duration: 0.80s; /* tempo da chegada do efeito */


Deverá ficar assim:



Para entender o código é fácil:

Em color: #00BFF você troca o #00BFF pelo código da cor que você quer que esteja no título com o efeito. Em -webkite-transition... você troca o 0.80 pelo tempo que você quer que chegue o efeito. Quanto maior o valor do número que você colocar, maior será o tempo em que o efeito irá chegar!
Salve, e veja se o efeito está lá. :)

P.S: O efeito de mudança de uma cor para a outra pode vir rápido demais em alguns blogs, por isso, não garanto resultados perfeitos.

Então, o tutorial acaba por aqui. Espero que tenham entendido tudo, e caso tenham dúvida de alguma parte do post, fale comigo que eu explicarei. Se usar o tutorial, credite, por favor.

Bai.

Nenhum comentário:

Postar um comentário

Comentem leitores, isso ajuda muito os blogueiros, além de motivá-los a postar mais. :D
Antes de comentar, leia os tópicos a seguir:

-Quando comentar, evite usar palavrões para ofender alguém, ou a mim mesmo. Xingamentos e ofensas contra mim serão ignoradas(ou eu irei lhe dar uma resposta nada agradável =) )
-Comentários do estilo "Seguindo, segue de volta?" , até serão aceitos, mas já vou avisando que só sigo o seu blog, se GOSTAR.
-Obrigado por comentar, eu agradeço muito, de verdade. Caso eu não responda o comentários de vocês, não fiquem irritados, é que eu realmente não tenho tempo. Mas saibam que eu respondo sempre que possível!