Bem, estou aqui para atender pedidos da Ask da Laura. A Laah pediu um tutorial de como personalizar os títulos dos posts, como os meus:
Também me pediram backgrounds claros ou cinzas.
Hoje a noite, talvez, eu poste novamente com um tutorial com keyframes! Quem se lembra o que é? Eles ficaram MUITO fofos! Eu estou usando um lá no gadget Divulgando, lá em baixo. A Imagem se inclina para a direita e depois para a esquerda. Eu só não sei qual irei postar ;P
Ao tutorial!
Backgrounds Claros e Cinza
Me pediram claros ou cinzas, mas como eu sou teimosa, vou postar os dois! U3U Espero que gostem!
.png)
.gif)
.png)
Título do Post
Aperte F3 e procure por /* Posts. Dentro do código haverá: h3.post-title { e é nesse código que decidimos se queremos centralizar o texto, aplicar o fundo colorido com bordas arredondadas (ou não) e o tamanho da fonte.Se procurar, abaixo de h3.post-title { achará margin-top: 20px;.
Acima, se quiser centralizar o texto, cole: text-align: center; | Para colocar um fundo colorido, acima de margin-top: 20px cole background: #COR; | Para bordas arredondadas, cole acima de (vocês já sabem) border-radius: 10px; | Se quiser, o tamanho da fonte cole font-size: 22px; | Agora visualize e, se estiver tudo ok, salve porque o próximo passo, se não prestar atenção por de errar.
Agora, procure por h3.post-title a { e quando achar, faça o seguinte:
{O próximo passo é opcional} Para adicionar uma fonte personalizada como a minha, vá no Google Web Fonts e procure a fonte que desejar. Quando a achar, clique em Quick-Use vai abrir outra página. Role até encontrar:
Copie o que está escrito na caixinha, vá no seu HTML, procure por <head> apertando F3 e acima cole o que copiou. Ao final do código que você acabou de colar, escreva </link> para fechar a tag.
O código que antes era assim:
<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet'
type='text/css'>
Vai ficar assim:
<link href='http://fonts.googleapis.com/css?family=Petit+Formal+Script' rel='stylesheet'
type='text/css'></link>
Visualize para ver se não deu nada errado. Se deu, repita tudo novamente.
Para adicionar a fonte no seu título, novamente aperte F3 procure por h3.post-title a { e, substitua font: $(post.title.font); pelo nome da sua fonte, assim:
Copie esse código e cole no lugar daquele, entendeu? Visualize e se estiver tudo bem, salve.
Para mudar a cor da fonte, ainda dentro do h3.post-title a { você vai achar um trecho assim color: $(post.title.text.color); vocês vai substituir por color: #COR; | Para colocar a sombra, abaixo da cor cole text-shadow: 0px 0px 6px #COR;
Agora procure por h3.post-title a:hover {
Você vai ver text-decoration: underline que é o que faz o título ficar sublinhado quando passa o mouse em cima. Se não quer esse sublinhado, troque undeline por none. | Abaixo de text-decoration: none; {que você acaba de trocar u-u} cole:
color: #COR;Pronto ^-^ Espero que eu tenha te ajudado.
text-shadow: 0px 0px 6px #COR;
Lindos fundos! E tutorial bem útil!!
ResponderExcluirO tutorial é bem útil, mas eu acho que gravei de tanto fazer já... rsrs'
ResponderExcluirthesecretdiar-y.blogspot.com
Tuto LINDO!! :))
ResponderExcluirAmei seu Blog, jáh tô te seguindo... Dáh uma passadinha no meu cantinho??? :D
Bjuss....
Princesa de Preto
Amei o tutorial. Seguindo!
ResponderExcluirbjs
http://asgarotasdonl.blogspot.com.br/
Seu blog é demais, eu ando visitando ele a um tempinho e to vendo o quanto ele é bom!
ResponderExcluirSeus tutos são tudo *-*
Queria perguntar se quer ser minha afiliada !
Meu blog é muito bom e tem notícias de artistas,útilitários para pc e para o blog e estou fazendo alguns tutoriais agota,pretendo melhorar um pouco mais depois,pois agora estou focando no meu novo lay !
http://comentariosde1garotaqualquer.blogspot.com.br/