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!
Amei o Tuto vou usar!
ResponderExcluirbeijookas!
www.princesasdorocker12.blogspot.com.br
Obrigada, pode usar! Beijos
ExcluirNossa flor, ótimo o tutorial e super bem explicado. Ah o layout do blog ta lindo parabéns *-*
ResponderExcluirSeguindo, visita quando poder? http://heeartshaped.blogspot.com.br/
Bjoooooos' s2
Obrigada!!! Visito sim, beijos...
Excluirótimo tutorial :D Bom, eu já sabia como personalizar mais está super bem explicado.
ResponderExcluirVocê aceita afiliação, ou você escolhe os blogs ?
B.U
Obrigada! Aceito afiliação *-*
ExcluirOou 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!
ResponderExcluirBeijos de CupCake
URL:magica-de-oz.blogspot.com
Nome:Magica de Oz
Obrigada! Seu blog é lindo C: Gostei dele.
ExcluirAmei o blog ! E estou usando este tuto ^--^ .
ResponderExcluircherry-vih.blogspot.com
Ok, obrigada!! Beijos
ExcluirTop de luxo!!me ajudou muito!!http://meu-mundo-alternativo.blogspot.com.br/
ResponderExcluirObrigada!
ExcluirAdorei o layout, vou usar pra fazer um layout para uma menina!!
ResponderExcluirBjs:)