17 fevereiro 2015

Personalizar o titulo da postagem no blog


Neste tutorial você ira aprender Personalizar o titulo da postagem no blog. Não falo de personalizar a forma das letras ou somente a primeira letra do título e sim colocar um fundo colorido e bordas. Veja na imagem abaixo como poderá ficar. 

Claro, você personalizará a cor do fundo, o titulo e se quer houver, bordas com as cores e formato que desejar. Tudo será de acordo com seu gosto. 

Ele fica assim. Vamos começar?


Antes de começarmos, eu sempre recomendo fazer um backup do seu template, ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, dê preferências a blogs de teste!
Não sabe fazer Backup? Não tem problema, clique em: Como fazer um Backup ou restauração do seu blog. 

Tutorial

Antes de começarmos acesse a página de códigos para podermos começar o tutorial. Deixe-a aberta.

1 - Acesse o painel do seu blog. Vá em Modelo e Editar HTML

2 - Tecle Ctrl + F no seu teclado e procure dentro do template por:

/* Posts
-------------------------------- */ 

3 - Ao encontrar, coloque abaixo dele o código 1:

4 - Salve e visualize.

PERSONALIZANDO

Agora que você visualizou e já viu a diferença, é hora de personalizá-lo.
Eu deixei ao lado de cada código onde e o que você pode personalizar, mais explicarei melhor:

► text-align: center;  - Você pode colocar Hight ou Left, se desejar

► double - Você poderá colocar:

dashed - PONTILHADO

groove - LINHA SOMBREADA

solid - LINHA SOLIDA

► width:580px; - É o comprimento da sua postagem

► height:30px; - É a largura da faixa.

Caso queira mais larga, terá que mudar margin-top: 30px; pelo mesmo tamanho para que fique com o texto centralizado dentro da faixa.

► color: #FF0000; - Essa você já sabe, não é? então mude e coloque a cor que desejar

Aqui tabela de cores

Gostou? 
Beijinhos

7 comentários:

  1. ficou em cima da data personalizada oque eu fasso?

    ResponderExcluir
    Respostas
    1. Olá Layza. Bom eu nunca testei esse código ao lado da data, mas vá alterando a margin-top e a width:580px; até que fiquem um ao lado da outra.

      Excluir
  2. Funcionou perfeitamente obrigada por compartilhar conosco muito sucesso para você.
    Só queria mudar o tamanho das letras do título e não consigo pode me ajudar?

    ResponderExcluir
    Respostas
    1. Olá Luciene.
      Para mudar tanto o tamanho quanto o estilo da fonte, você poderá trocar em Modelo, Personalizar e em Avançado.

      Espero ter ajudado.
      Beijinhos ♥

      Excluir
  3. Poxa Vida bia Barros aprendi muinto com seu blog Parabéns Sucesso!!!

    ResponderExcluir
    Respostas
    1. Que bom Cyrasky. Fico super feliz em saber =D
      Sucesso pra você também!
      Beijinhos ♥

      Excluir
  4. Amei consegui colocar ficou bem legal,muito obrigada.

    ResponderExcluir

Amigos do Blog



Agregadores