Como criar tags customizadas para usar em artigos do Blogger

No artigo de hoje eu atenderei a sugestão feita pela leitora Andreza, dona do blog Britney Today. Veremos como criar uma tag customizada para facilitar o entendimento do artigo por parte dos leitores, ou para qualquer outro fim que você queira! Se você ainda está em dúvida sobre o que é uma tag customizada, e sobre qual é o efeito visual que ela poderá aplicar aos artigos do seu blog, veja alguns exemplos em nosso blog de teste.

Imagem por: Toolmantim

Criando tags customizadas em blogs do Blogger


Antes de criar a sua tag customizada, você precisa saber que embora sua utilização seja muito útil, esta técnica não faz parte das web standards (padrões webs), assim como, elas não aparecerão em serviços de newsletter que enviam os artigos por e-mail, ou outros serviços de Feed.

1. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

2. Clique no botão Editar HTML, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

]]></b:skin>

3. Imediatamente acima deste código, adicione o seguinte código.

nome-da-sua-tag {
    font: normal normal 12px Arial, serif, sans-serif;
    color: #000000;
    background: #EEEEEE url(link-da-imagem-32x32) no-repeat 5px 5px;
    border: 2px solid #000000;
    padding: 10px 10px 10px 45px;
    margin: 0;
    min-height: 40px;
    display: block;
}


Altere a parte destacada em vermelho pelo nome da sua tag, você pode colocar o nome que você quiser, porém, você não pode usar o nome de nenhuma tag HTML padrão. Agora, vejamos o que você pode alterar no código acima.
  • Font (destacado em verde)
Essa propriedade é responsável por adicionar estilos à fonte (texto) que estará dentro da tag. Caso você queira que o texto fique automaticamente em itálico, mude o primeiro "normal" para "italic"; se você quiser que o texto apareça automaticamente em negrito, mude o segundo "normal" para "bold". Você pode alterar também o tamanho do texto, mudando o valor "12" e a fonte do texto, mudando o nome "Arial" para outro que você queira.
  • Color (destacado em rosa)
Essa propriedade é responsável por adicionar a cor da fonte (texto), o valor "#000000", representa a cor preta, mas você pode mudá-lo para qualquer outra cor que desejar, basta informar o código hexadecimal da cor que você quer.
  • Background (destacado em laranja)
Essa propriedade é responsável por adicionar a cor de fundo e a imagem à tag. Você pode mudar a cor de fundo para a que mais lhe agradar, basta inserir o código hexadecimal da cor que você quer — o código "#EEEEEE" se refere a cor cinza. Você deve também substituir a parte destacada em azul pela URL da imagem que você quer que apareça no canto da tag — aconselho que use uma imagem com tamanho de 32x32 pixels. Se você utilizar uma imagem maior, deverá aumentar o valor "45" da propriedade "padding".
  • Border (destacado em roxo)
Essa é a propriedade responsável por adicionar uma borda ao redor da tag. O valor "2" informa a grossura da borda, o valor "solid" indica o tipo de borda (veja a tabela abaixo) e, por fim, você pode escolher também a cor da borda alterando o código hexadecimal da mesma.

Estilos de bordas disponíveis
Valor Estilo Demonstração
solid borda sólida                                         
dashed borda tracejada                                         
dotted borda pontilhada                                         
double borda dupla                                         

Se você tiver conhecimentos em CSS, poderá alterar o código como bem entender e/ou adicionar outras propriedades para customizar ainda mais a sua tag. Se você utilizar o código como ele foi fornecido acima, você terá algo como mostrado abaixo.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper pellentesque augue et pellentesque. Fusce nulla dui, pellentesque sed consequat vitae, sagittis sed sem. Vestibulum vitae urna vitae sem egestas venenatis. Nulla aliquet, nibh sit amet rhoncus scelerisque, neque nunc venenatis odio, et rutrum arcu eros non mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper pellentesque augue et pellentesque. Fusce nulla dui, pellentesque sed consequat vitae, sagittis sed sem. Vestibulum vitae urna vitae sem egestas venenatis. Nulla aliquet, nibh sit amet rhoncus scelerisque, neque nunc venenatis odio, et rutrum arcu eros non mauris.

4. Depois de customizar a tag como você quer, clique em Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Usando a tag em um artigo do seu blog


Agora que você já criou a sua tag, veremos como utilizá-la. A utilização é muito simples e não requer nenhum tipo de conhecimento avançado. Basta que, quando você estiver escrevendo seu artigo, você faça a seguinte inserção.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper pellentesque augue et
pellentesque. Fusce nulla dui, pellentesque sed consequat vitae, sagittis sed sem. Vestibulum
vitae urna vitae sem egestas venenatis. Nulla aliquet, nibh sit amet rhoncus scelerisque, neque
nunc venenatis odio, et rutrum arcu eros non mauris.

<nome-da-sua-tag>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper
pellentesque augue et pellentesque. Fusce nulla dui, pellentesque sed consequat vitae,
sagittis sed sem. Vestibulum vitae urna vitae sem egestas venenatis. Nulla aliquet, nibh sit
amet rhoncus scelerisque, neque nunc venenatis odio.</nome-da-sua-tag>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis semper pellentesque augue et
pellentesque. Fusce nulla dui, pellentesque sed consequat vitae, sagittis sed sem. Vestibulum
vitae urna vitae sem egestas venenatis. Nulla aliquet, nibh sit amet rhoncus scelerisque, neque
nunc venenatis odio, et rutrum arcu eros non mauris.


E o texto que estiver dentro da sua tag aparecerá com a customização que você fez. Você pode criar quantas tags você quiser, para que atendam os mais diversos fins. Você pode inclusive utilizar essas tags dentro dos gadgets HTML/JavaScript ou qualquer outro elemento do seu blog que aceite HTML. Se você gostou deste artigo, achou ele útil ou ficou com dúvidas, sinta-se a vontade para participar deixando um comentário!

Atualização — 17.04.2012 às 16h55
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 11 comentários neste artigo!

  1. Ta de parabéns, colega. Sempre acompanhei as atualizações do blog nos ultimos 6 meses através do Google Reader, mas só agora pude ler q há tags q não são apresentadas neste serviço de Feed. Quando entrei no link do artigo, fiquei maravilhado com tantos 'efeitos visuais' q não me eram apresentados pelo Feed. hehe Vivendo e aprendendo.

    ResponderExcluir
  2. Aldéryck: pois é, esta é a grande desvantagem deste recurso: ele não faz parte das web standards, portanto, qualquer serviço que permita a visualição do artigo fora do blog, não irá mostrar as customizações; isto ocorre porque o CSS que gera a customização, é aplicado somente no meu template! Mas o “efeito visual” é, modéstia a parte, muito bom/útil. Agradeço as visitas. Volte sempre! Abraços.

    ResponderExcluir
  3. Ótima dica, adorei. Sempre quebrei a cabeça pensando em como isso era feito. Super simples.

    ResponderExcluir
  4. Olá, ficou muito bom, só acho que faltou você explicar como fazer as bordas arredontas, o efeito gradiente e o efeito da borda parcialmente vermelha do terceiro exemplo. Eu fiz e minha imagem ficou muito no topo da tag.
    Obrigado!

    ResponderExcluir
  5. HighTech | News: não forneci as customizações de borda arredondada e efeito gradient, porque teria que dedicar uma parte do artigo a explicar o funcionamento destes efeitos, que são variáveis dependendo do efeito que você quer! Isso ficaria melhor em um artigo sobre CSS3. Quanto a imagem ter ficado muito no topo, aconselho que você utilize imagens com o tamanho 32x32 pixels, mas se mesmo assim o problema persistir, você pode mudar a posição da imagem, alterando os valores: 5px 5px. Espero que isto lhe ajude! Abraços.

    ResponderExcluir
  6. Eduuh: para arredondar as bordas é necessário adicionar um código CSS ao código do passo 4. Você pode ver os códigos necessários, neste artigo. Espero que isto lhe ajude. Volte sempre.

    ResponderExcluir
  7. ja cheguei a essa parte mais nao consigo editar!

    ResponderExcluir
    Respostas
    1. Olá Franciele, não entendi seu comentário. Em qual passo você teve dúvidas e/ou não conseguiu seguir?

      Excluir