Caso alguma imagem do blog não esteja aparecendo, por favor, avise nos comentários da postagem em questão!

02/07/2012

NOVO: Personalizar títulos (Heading, Subheading e Minor Heading)

Hello, people!!! Como vão vocês, tudo trank??? (Nossa, essa de trank foi o fundo do poço, Sheila... que decadência).
Antes que o post de verdade comece, quero pedir a todos os leitores "DSMéticos" que respondam a pesquisa de opinião (que eu mesma já tinha até esquecido). Prometo que não dura nem três minutos para responder. Já tive umas opiniões maravilhosas, mas preciso de mais algumas para ter uma ideia de mudanças que quero fazer. Desde já, agradeço pela ajuda de todos!!!
Esse finalzinho de semana tive uma queda nos comentários, mas vocês não vão me ouvir "miando" hoje por causa disso pois sei que a culpa é minha. Amanhã conto a vocês o que ando aprontando... hehe... Vocês vão gostar.
Ah, achei estranho uma coisa: ninguém notou que eu sumi com uma coluna do DSM??? Como assim??? Ainda estou fazendo umas adaptações, pois quero ver se simpatizo mais com esse layout. Eu sei que o LinkWhithin está precisando de um conserto, mas vou resolver isso só mais tarde, espero que vocês não se incomodem.

Hoje vamos aprender a personalizar os títulos da postagem, esses que o Blogger acrescentou na barra de ferramentas. Para quem não se lembra o que é isso, eu repito o que eu disse no post em que contei as novidades do Blogger:
"Na barra de Ferramentas do formulário de "Criar Postagem", apareceu um novo item, como você pode ver abaixo:

Com ele você poderá acrescentar na sua postagem títulos (Heading), subtítulos (Subheading) e subtítulos menores (Minor Heading) na sua postagem (como você pode ver nessa postagem, por exemplo). Esses títulos e subtítulos servem para deixar sua postagem mais organizada e acrescentam conteúdo relevante a ela (podendo melhorar seu ranking na pesquisa)".
Deu pra entender??? Acho que deu, não é...
O caso é que tem uma forma de dar cor, estilo, tamanho, fonte e todo tipo de personalização para esses títulos com CSS, de forma que para ele ficar do jeito que você quer tudo o que você precisará é colocá-lo normalmente na postagem. Vamos saber como, então??? Vou explicar de um por um, mas antes de personalizar, siga esses passos:
  1. Entre em Modelo > HTML;
  2. Clique em qualquer parte do seu HTML e aperte Ctrl + F no seu teclado;
  3. Na caixa Search, escreva h2, h3 ou h4 (dependendo de qual título você queira personalizar) e aperte "Enter" no seu teclado. Se o código já existir no seu template, substitua-o inteiro pela personalização que você desejar;
  4. Se não tiver o código, copie o seguinte código: ]]></b:skin> e cole-o na caixinha "Search" (Ctrl+F) e aperte "Enter";
  5. Antes do trecho destacado, cole o código desejado.

H2 - Heading:
O heading é na verdade o h2. Eu não recomendo que você o personalize (eu não o uso), pois esse código mexe também no cabeçalho da data e nos títulos dos gadgets, dá um trabalhão para ajustar o código. Mesmo assim, se você quiser personalizá-lo, use o código:

h2 {
}

E entre os colchetes coloque os códigos que você deseja personalizar. Toda vez que quiser um título como heading na postagem, selecione e escolha a opção "Heading" na ferramenta "Format" (aquela que indiquei na foto lá no início do post) e deixe-o normal, sem personalizar no formulário de postagem.

H3 - Subheading:

O subheading é o que eu uso para fazer os títulos (como o exemplo acima, esse com coraçãozinho e sombra), ele é o h3 do seu blog. Vou colocar aqui o código que uso aqui no DSM, depois você poderá personalizá-lo de acordo com seu gosto, inclusive acrescentando códigos, se quiser. Ao lado de cada código que usei está a explicação para o que o mesmo faz.

h3 { 
   text-shadow: 1px 1px 1px #666666; /*Coloca sombra no texto*/
   background-image: url(URL_DA_IMAGEM);
   background-repeat: no-repeat;
   background-position: left center;
   padding-left: 30px;
   font-size: 20px !important; /*Tamanho da fonte*/
   font-weight: bold; /*Texto em negrito*/
}

A parte que destaquei em negrito coloca um ícone à esquerda do título (como o coraçãozinho que coloquei aqui. Em "URL_DA_IMAGEM", coloque o endereço do imagem escolhida e em "padding-left" troque o número 30 pela largura exata do seu ícone. Se não quiser ícone, apague essa parte.
Toda vez que quiser um título como subheading na postagem, selecione e escolha a opção "Subheading" na ferramenta "Format" (aquela que indiquei na foto lá no início do post) e deixe-o normal, sem personalizar no formulário de postagem.

H4 - Minor Heading:

O Minor Heading (h4) é como um título mais simples (recomendo que você use cores mais claras nele e poucas personalizações, como fiz aqui). Pode ser usado, por exemplo, para começar um tópico dentro de algum assunto que já tenha sido iniciado por um "Subheading". Vou colocar aqui o código que uso aqui no DSM, depois você poderá personalizá-lo de acordo com seu gosto, inclusive acrescentando códigos, se quiser. Ao lado de cada código que usei está a explicação para o que o mesmo faz.

h4 {
   color: #666666; /*Cor  da fonte*/
   font-style:italic; /*Fonte em itálico*/
   font-size: 18px !important; /*Tamanho da fonte*/
}

Toda vez que quiser um título como minor heading na postagem, selecione e escolha a opção "Minor Headung" na ferramenta "Format" (aquela que indiquei na foto lá no início do post) e deixe-o normal, sem personalizar no formulário de postagem.

É só isso por hoje, espero que seja útil. Vou tentar responder uns comentários hoje, de qualquer forma, amanhã explico minha ausência em vossos blogs.

Mil Sweetkisses,
11 Comentários
Comentários

11 comentários:

  1. adoriu a dica ja salvei aqui no meu computador vou tntar usala,bjinhos
    qualquer hora da uma passadinha no blog
    isadoaa.blogspot.com

    ResponderExcluir
  2. Oiee Sheyla tudu bem? que saudades eu tava de vc,Adorei o post,Sheyla tem um video,muito lindo la pra ABENÇOAR sua Semaninha,Beijo
    Rebequinha
    http://rebequinhaclemente.blogspot.com.br/

    ResponderExcluir
  3. Oii,voce aceitaria parceria com o meu blog,o nome e Magicamente Inexplicavel,beijos !!
    PS:Ja dei os creditos pelo nome !!!

    ResponderExcluir
  4. oi amiguinha linda
    como comentários estão assim lindo que nem o seu
    amei o tuto fácil e pratico
    o blog tá lindo e fofo parabéns
    linda semana saudades amiga beijokas

    palavrasdemenina2010.blogspot.com.br

    ResponderExcluir
  5. Que legal, não sabia disso!

    placeforgirlsblog.blogspot.com

    ResponderExcluir
  6. Adorei! Já personalizei um titulo lá do meu blog.

    Beijinhos!
    Doces Sapatos de Veludo

    ResponderExcluir
  7. Muito bom sheila!! Arrasou! Beijão

    www.spiderwebs.com.br

    ResponderExcluir
  8. Olá Sheylinha querida! Super dica essa, adorei!
    Brigadão pelas visitas e comentários lá no meu cantinho, fico mega feliz.
    Uma EXCELENTE semana para você! Mil beijos, saúde e muito sucesso sempre.
    laylafonseca.blogspot.com

    ResponderExcluir
  9. menina adorei as dicas e o blog também
    parabens pelo otimo conteudo.
    bjuhs
    http://quecorusar.blogspot.com.br

    ResponderExcluir
  10. Olá professorinha querida!
    Consegui colocar a mensagem na caixa de comentários ficou ótimo.
    Obrigada e fica com Deus! Vou fazer um selinho pra você,te mando por email, não é assim que se faz? Bem tenha paciência com essa velha admiradora sua. Afinal tô começando.
    Bjs nesse ♥ lindo!

    ResponderExcluir
  11. goste muito tenho feito alguns artigos sobre isso e achei muito interessante. Continue seu trabalho é brilhante.

    ResponderExcluir

Related Posts Plugin for WordPress, Blogger...
Posts relacionados