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

13/07/2012

NOVO: Personalizar título da postagem (h3.post-title)

Alguma blogueira tinha me pedido para ajudar na personalização do título da postagem (me desculpe, não lembro quem foi..). Pois é, até então eu não tinha feito um post sobre o assunto pois toda vez que personalizava, o título ficava de um jeito na página inicial e de outro quando clicava na postagem... Isso estava me irritando, sério...
Mas, como eu sempre faço, acabei acionando meus "poderes ninja" para encontrar uma solução para que o título ficasse igualzinho, tanto na página inicial quanto na página da postagem... E consegui, é claro!!! Vamos ao tutorial, então???

Tutorial: Como personalizar o título da postagem

Antes de qualquer coisa, certifique-se que você tem uma cópia do seu template atual ou treine antes num blog de teste, para ver se dá certo.
Para fazer as personalizações, entre em Modelo> HTML. Logo após, clique em qualquer parte do seu HTML e aperte Ctrl + F. Na caixinha que abriu (Search), cole o seguinte: ]]></b:skin> e aperte "Enter".

Antes desse código, cole o código abaixo:

h3.post-title {
   background: url(URL_DA_IMAGEM) no-repeat left top;
   width: 630px; /*Largura total do título*/
   text-align: left;
   padding-left: 62px; /*Largura de imagem*/
   padding-top:14px;
   padding-bottom:10px;
   font: 2.3em Arial !important; /*Tamanho e fonte do título*/
   color: black; /*Cor do título*/
   font-weight: bold;
   line-height: 1.4em;
   text-shadow: 1px 1px 3px #666666;
}

h3.post-title.entry-title {
   font: 2.3em Arial !important; /*Tamanho e fonte do título*/
   color: black !important; /*Cor do título*/
   font-weight: bold !important;
}

h3.post-title a {
   display:block;
   text-decoration:none;
   color: black;  /*Cor do título*/
   font-weight: bold;
   line-height:1.4em;
}

h3.post-title a:visited {
   display: block;
   text-decoration: none;
   font: 2.3em Arial; /*Tamanho e fonte do título visitado*/
   color: #111706;
   font-size: 150%;
   font-weight: bold;
   line-height:1.4em;
}

h3.post-title a:hover {
   color: #2C051E; /*Cor do título quando passamos o mouse*/
}

Em URL_DA_IMAGEM, cole a imagem que você deseja colocar à esquerda do título. É importante que ela seja pequena e que seja com fundo da mesma cor do fundo do seu blog ou com fundo transparente (por favor, não copie a daqui, lembre-se que fui eu que hospedei e posso mudá-la ou apagá-la a qualquer momento).
Quando você for mudar um dos códigos em vermelho, mude todos para o mesmo tamanho, fonte ou cor. Os códigos em vinho podem ser mudados sem preocupação nenhuma, as explicações estão do lado de cada um.
O código em verde coloca sombra na fonte do título. Se não quiser sombra, basta apagá-lo.

É só isso por hoje. Não perca a "Música para o Sábado" de amanhã!!!

Mil Sweetkisses,
7 Comentários
Comentários

7 comentários:

  1. Obrigada Sheila por ter me respondido em um post seu fui eu que mandei a mensagem.
    E traga mais dicas ;)rsrsrs
    Beijosss Sheila

    ResponderExcluir
  2. ah que interessante! Adorei o tutorial flor!
    Só tenho medo de mexer no meu html pq não fui eu quem fiz meu layout :/

    Beijos e ótimo final de semana!

    http://www.youtube.com/blogdareh

    http://re-becah.blogspot.com

    ResponderExcluir
  3. Hum amooo seus tutos vou salvar mais esse....

    bjos

    *Novidade* Agora para participar do Vida de Blogueira (o) basta preecher o formulário no blog... Vamos participar?
    Formulário Vida de Blogueira (o)
    Simplesmente Danny

    ResponderExcluir
  4. Nossa Sheylinha, mas um tuto superbem explicado!Um dia deixo de moleza e ponho em prática!Bjns
    cadernocolorido.blogspot.com.br

    ResponderExcluir
  5. oii!
    tudo bem?
    vim te pedir uma coisa mttt importante.
    preciso q vc vote em mim num concurso que estou participando chamado top blog.
    pra votar em mim vá no meu blog (oblogdapp.blogspot.com) e clique no botão dourado escrito "top blog".
    por favor, preciso muito da sua ajuda!!! quero mt vencer o concurso!!!!!
    conto com seu voto ok?!
    bjs (ah, se conseguir, me ajude a divulgar isso).
    OBS: se puder, vote com várias contas q vc tem (tipo facebook, email, conta no google...)
    =D

    ResponderExcluir
  6. Esse tutorial me ajudou bastante, pois estou criando um novo layout para o meu blog!
    Beijão.

    docequintafeira.tk

    ResponderExcluir

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