Olá cupcakes <3 Desculpem por não postar esses dias, mas é que tenho uma coisa para fazer que eu ainda não acabei e talvez por isso eu não consiga postar muito #cry
Então, hoje eu vim aqui ensinar a vocês a personalizar o título das suas postagens, claro que de várias maneiras diferentes. Coloca sombras, título diferente, linhas, e espaço entre as letras! Querem aprender?!
P.S.: Só testado no modelo Travel
Mudando o título da postagem
1. Vá nesse site aqui e escolha uma fonte de sua preferência.
2. Clique em 'Quick-use' no lado inferior direito e espere a página carregar.
3. Desça até você chegar em um quadrado azul, onde terá escrito 'Add this code to your website' e copie o pequeno código que irá aparecer.
4. Cole esse código ao lado de '<head>' no seu HTML (bem no começinho).
P.S.: Para que o código preste, você precisara adicionar um "/" antes do último ">"
assim:
<link href='http://fonts.googleapis.com/css?family=Bonbon' rel='stylesheet' type='text/css'/>
E para o código funcionar, ainda no HTML do seu blog, procure por "h3.post-title a {". Irá aparecer mais ou menos isso aqui:
h3.post-title a {
font: $(post.title.font);
color: $(post.title.text.color);
}
Você terá que substituir esse código por esse código aqui:
h3.post-title a {
font-family: Nome da sua fonte;
font-weight: normal;
font-size: 20px; /** Tamanho da fonte **/
color: #000px; /** Cor da sua fonte **/
}
Adicionando outros efeitos a sua fonte
Esses efeitos você irá adicionar junto ao código anterior. Coloque os que você preferir embaixo de "color: #000;"
Sombras
Adicione esse código embaixo de "color: #000;" :
text-shadow: 5px 1px 3px #eee;
Entendendo o código:
"5px" = quanto mais você aumentar, mais a sombra irá para a direita.
"1px" = quanto mais você aumentar, mais a sombra irá para baixo.
"3px" = quanto maior, mais a sombra ficara desfocada.
"#eee" = Cor da sua fonte. Mude para uma de sua preferência, tem várias cores aqui.
Espaço entre as letras
Cole isso embaixo de "color: #000;" :
letter-spacing: 4px;
Quanto mais você aumentar o "4px" mais as letras iram se separar uma das outras.
Linhas (Embaixo, em cima, na direita ou na esquerda)
Código:
border-bottom: 2px dashed #123456;
Entendendo o código:
"-bottom" = Significa que a linha estará embaixo do título. Se quiser que fique em cima, substitua isso por "-top". Se quiser que fique na direita, substitua por "-left", e se quiser que fique na esquerda, por "-right".
"2px" = A espessura da sua linha.
"dashed" = O tipo da linha. Dashed significa que a linha ficará tracejada. Pode mudar por Solid (linha normal) ou Dotted (Pontilhada).
"#123456" = A cor da sua linha. Altere como quiser.
Depois é só salvar.
É isso gente, vou ficando por aqui. Vou ver se trago um tutorial sobre "hovers", mas talvez acabe demorando. Qualquer dúvida, por favor comentem.
Nenhum comentário:
Postar um comentário