Image Map

18.1.13

Título do post personalizado


Oi gente! Hoje o tutorial é de títulos personalizados. Mas como eles são personalizados? Não sei se perceberam, mas, o título do nosso post tem um hover desfocado.  Ele passa por uma transição. Podem testar agora se quiserem!


Vamos começar? Go!


Primeiro vamos instalar a fonte. 
Procure por <head>  e acima cole:
<link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>
Agora iremos colocar o efeito. 

Procure por 
h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
h3.post-title a:hover {
  text-decoration: underline;
}

Depois de acha-lo apague e substitua por:

h3.post-title a {
font-family: Englebert;
color: #79bbc5;
Font-size: 27px;

-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
h3.post-title a:hover {
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
-webkit-filter: blur(2px); color:#fff;
  color: #bbacd0;
}



Entendendo.

font-family: Englebert
Este código é referente a fonte do título do post
 color: #79bbc5;  Este código é referente a cor do título.
Font-size: 27px;   É o tamanho da fonte.
color: #bbacd0;   É a cor do título em hover (com o mouse em cima).
Prontinho, só visualizar e se estiver tudo certo é só salvar!

13 comentários:

  1. Amei o Tuto vou usar!

    beijookas!

    www.princesasdorocker12.blogspot.com.br

    ResponderExcluir
  2. Nossa flor, ótimo o tutorial e super bem explicado. Ah o layout do blog ta lindo parabéns *-*
    Seguindo, visita quando poder? http://heeartshaped.blogspot.com.br/
    Bjoooooos' s2

    ResponderExcluir
  3. ótimo tutorial :D Bom, eu já sabia como personalizar mais está super bem explicado.

    Você aceita afiliação, ou você escolhe os blogs ?

    B.U

    ResponderExcluir
  4. Oou mb amei o tutorial vou usar com certeza , eu gostaria de saber se há vagas para afiliados se sim visita o meu blog e vê se ele esta de acordo com as regras porque eu adoraria ser sua afiliada!
    Beijos de CupCake
    URL:magica-de-oz.blogspot.com
    Nome:Magica de Oz

    ResponderExcluir
  5. Amei o blog ! E estou usando este tuto ^--^ .
    cherry-vih.blogspot.com

    ResponderExcluir
  6. Top de luxo!!me ajudou muito!!http://meu-mundo-alternativo.blogspot.com.br/

    ResponderExcluir
  7. Adorei o layout, vou usar pra fazer um layout para uma menina!!
    Bjs:)

    ResponderExcluir