Personalizando o Título do Post


 Oi pessoalzinho, hoje já é dia 18, mais um para chegar para o eJhonas completar 7 Meses.. provavelmente eu não faça um Layout Free, porque já ficou chato sempre fazer isso mas enfim, estou tendo uma noção no que devo fazer agora, já que no 8 Mês do eJhonas já esta tudo decido do que farei.. Agora saindo desse assunto, vamos falar um pouquinho sobre o post. de hoje, não falarei somente de como mudar a forma do título do post. e sim, explicarei tudinho nos mínimos detalhes..
Primeiramente vá no Blogger  Designer  Editar HTML  Expandir Modelo de Widgets  Ctrl + F (Procure por:)
/* Posts
Você encontrará este código:
h3.post-title {
  margin-top: 20px;
}
h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}
h3.post-title a:hover {
  text-decoration: underline;
Modificando e entendendo um pouquinho mais:
  margin-top: 20px; Caso você queira que fique mais para cima ou para baixo o título da postagem fique basta aumentar ou abaixar o valor em negrito.
 font: $(post.title.font); Caso não queira mudar a fonte do blog, basta trocar por "Font-family: Nome da Fonte;".
  color: $(post.title.text.color); A Cor da fonte do título da postagem.
  text-decoration: underline; A Parte em negrito indica que o hover do título da postagem está em sublinhado, caso queira que fica em negrito ou itálico, basta colocar "none / italic".
Acrescentando e entendendo um pouquinho mais:
h3.post-title {  Logo abaixo deste código você poderá acrescentar estes códigos:
 text-align: center; A área em negrito indica a posição, você poderá modificar por direita ou esquerda "left / right".
background: #000; Este código você poderá colocar para mudar o fundo do título, caso não queira mudar, basta não acrescentar.
border-bottom: 1px solid #000; Aqui aparecerá uma barrinha abaixo do título, todas as áreas em negrito desse código são editáveis.
font-size: 12px; Quando você estiver na página de uma postagem, provavelmente aparecerá um tamanho diferente do normal, caso você queira ajustar isso, basta colocar esse código com o tamanho que você queira que permaneça.
color: #000; Ao normal, quando você seleciona uma postagem, o título dela, fica pequeno e de cor escura, caso queira que fique da cor em que fica na página inicial, basta colocar este código e modificar o código que está em negrito para a cor desejada.
h3.post-title a { Caso você queira que tenha um efeito a mais no hover, você poderá acrescentar abaixo deste tag este código "-webkit-transition-duration: .80s;"
h3.post-title a:hover { Para completar o hover que foi feito na tag que se encontra acima, você poderá acrescentar novamente este código "-webkit-transition-duration: .80s;".
color: #000; Com esse código você poderá mudar de cor no hover, quando o mouse passar em cima do título, aparecerá outra cor, caso queira.
  Espero que eu tenha ajudado vocês pessoal, tentei explicar tudinho aos mínimos detalhes, esses códigos são simples, sempre uso eles, nos meus designer's, ahh, esqueci de falar, as minhas postagens agora tentarei fazer todas programadas, caso dê problemas quando eu for publicar, rs, os 400 Seguidores estão chegando, muito contente >D

18 comentários:

  1. Adorei o tutorial, super explicado! Com certeza me ajudará! Amei demais o blog, já estou seguindo há um tempinho :3 Beijo.

    Explodindo Glitter

    ResponderExcluir
  2. Ameeei, tu explicou muito beem! Me apaixonei pelo lay do seu blog, seguiindo jáa :D

    release-ur-imagination

    ResponderExcluir
  3. Tuto perfeito, eu já tinha visto ele em outros blogs, mas aqui está bem mais explicadinho, fácil de entender. *-* Obrigada por ter visitado meu blog, adorei o seu blog, super organizado, cheio de conteúdo, nota 1O! :) ~ Seguindo ~

    http://e-eublogando.blogspot.com.br/

    ResponderExcluir
  4. Tuto perfeito, eu já conhecia ele de outros blogs que frequento, mas esse aqui está bem mais explicadinho, adorei! *-* Obrigada por ter visitado meu EEB, eu adorei o seu blog, ele é bem organizado, bonito, tudo nos mínimos detalhes, parabéns! >..< Ah! E achei legal esse fato de eu ser a primeira a ter dar parabéns pelos 4OO seguidores, parabéns! *0* Isso é que é sucesso.

    http://e-eublogando.blogspot.com.br/

    ResponderExcluir
  5. Eu conheço esse tutorial, é muito bom e eu sempre uso (:

    ResponderExcluir
  6. OMG' Falta poucooo o/

    Ótimo tutorial, você parece um professor explicando USAHUSAHASUASH'

    ResponderExcluir
  7. Parece legal, vou testar mais tarde talvez *-*
    Princesa de Jeans

    ResponderExcluir
  8. Super util! Tem muita gente que não entende isso... :)
    Visite: sweetlemooon.blogspot.com/
    Espero a sua visita, ok? :)

    ResponderExcluir
  9. Ajudou bastante rs. Obrigada pela visita, já estou seguindo dnv! *-* http://ts-retisencias.blogspot.com.br

    ResponderExcluir
  10. Adorei o tuto , já conhecia tbm ^^

    Seguindo aqui ~ Bjo | Divas de Batom

    ResponderExcluir
  11. Gosto muito dos teus tutoriais,são sempre bem
    explicados.
    BJus!

    ResponderExcluir
  12. Obg pela visita em meu blog, estou seguindo de volta, amei aqui, muito lindo!!
    Tutorial ótimo, beijos e até mais!!

    >> Sweet Magia(Clique Aqui )

    ResponderExcluir
  13. Olá, quero agradecer sua visita no Embalaço e seu super comentário. Estou muito feliz que tenha aparecido e dado sua opinião em meu cantinho.
    Aproveito para convidar a voltar lá e conhecer um pouco da Nutella em #Inspire-se: Nutella, comemorando o 250º post do blog.
    Não se esqueça de votar para a mudança ou não do layout do blog na sidebar.
    Aguardo sua visita hein ^^
    Embalaço

    ResponderExcluir
  14. oiii Jhonas, gostei muito da sua postagem

    seguindo o blog ;)

    ResponderExcluir
  15. Já conhecia esse tutorial. Ele não é tão difícil e você ainda explica muito bem, fica bem fácil defazer :)

    Beijos,
    modicesdemenina.blogspot.com

    ResponderExcluir
  16. Tava precisando desse tutorial | Adorei o post ,sempre com os melhores tutoriais hein ?

    http://quandochegardezoito.blogspot.com.br/

    ResponderExcluir
  17. oii...então, muito bom o tutorial, bem explicado mesmo...e mt legal seu blog ^^...estou seguindo, volte sempre por lá...segue lá tbm...se ñ seguir ainda ^^
    domeujeito100.blogspot.com.br/

    bjss

    ResponderExcluir

© eJhonas - 2012. Todos os direitos reservados.
Design Jhonas Balsas.
Tecnologia do Blogger.
imagem-logo