Busca

Carregando...

quarta-feira, 25 de junho de 2008

Como transformar seus marcadores do Blogger em retrancas

Nível: Avançado

Essa é para quem quer colocar um quê de Jornalismo em seu blog. Vou avisando que fica bom em blogs que usam apenas um marcador por post. Em blogs que usam vários marcadores cabe o bom-senso, mas acho que se não colocar uma fonte muito grande pode até ficar bom. Eu tive que fazer isso para usar no Plural Blog, porque eles usavam o campo de título para por a retranca e deixavam o título "a esmo" no campo de texto, o que, para indexação no Google, leitor de feed e etc., não é um bom negócio.


Neste exemplo, Blogosfera é um marcador exibido como retranca.
  1. Já logado no Blogger, entre em Layout > Elementos de página e clique em Editar no retângulo que se refere a Postagens no blog.
  2. Na pop-up que se abrirá, procure o ítem que se refere aos marcadores do blog (geralmente o sexto), marque-o. No campo de texto coloque a marcação que você quer que apareça antes da sua retranca e salve. Exemplos de caracteres:
    • :: [dois pontos duas vezes]
    • ¤ Alt 207
    • . [ponto]
    • [Alt 206]
    • | [barra vertical]
    • Ø [Alt 0216]
    • [espaço em branco - Alt 0160]
    • § [Alt 0167]
    • outros aqui
    Atenção! Se quiser que não haja nenhum texto antes da retranca, não deixe esse campo em branco, use Alt 0160 para inserir um caractere invisível. Se você deixar o campo sem nenhum caractere, o Blogger vai gerar um texto automático que é Marcadores:.



  3. Agora vá para a página Layout > Editar HTML e clique em Expandir modelos de widgets.
  4. Clique em Baixar modelo completo e salve o seu template atual em algum lugar seguro para o caso de você fazer besteira (muito comum quando não se tem familiaridade com o código do novo Blogger).
  5. Procure o texto data:post.labels. Se estiver no Firefox, use CTRL F. Se você usa Internet Explorer, você tem três opções:
    1. Fazer download do Firefox.
    2. Procurar no olhômetro.
    3. Copiar o código e colar em algum editor (até o Bloco de Notas serve) para modificá-lo lá primeiro antes de trazer de volta para o Blogger.
  6. Se você ainda não tiver feito mudanças radicais nos marcadores do seu blog, o código que se refere a eles será algo muito parecido com o que está na caixa de texto abaixo:
    <p class='post-footer-line'><span class='post-labels'> <b:if cond='data:post.labels'> <data:postlabelslabel/> <b:loop values='data:post.labels' var='label'> <a href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast'>,</b:if> </b:loop> </b:if> </span> </p>
    Encontrou? Então apague, a não ser que você queira que os marcadores apareçam duas vezes em cada post: no começo e no final.
  7. Procure agora pelo texto data:post.id que fica bem no início do post. Cole o seu novo código de retrancas exatamente abaixo da tag:
    <a name='data:post.id' />
    Seu novo código:
    <h4 class='post-labels'>
    <b:if cond='data:post.labels'><data:postlabelslabel/> <b:loop values='data:post.labels' var='label'>
    <a href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast'></b:if>
    </b:loop> </b:if> </h4>
  8. Beleza! A parte bruta foi feita. Agora é só editar sua retranca para deixá-la com melhor aparência. Observe que a tag de marcadores utiliza, por padrão, a classe post-labels. Sendo assim, procure na folha de estilos do seu código por .post-labels, caso o seu template não tenha, crie.
  9. Se você não sabe onde está a folha de estilos do seu blog, cole o código abaixo imediatamente antes da parte do código que diz ]]></b:skin>.
    h4 .post-labels {font-size:15px; color:#999999;text-indent:-7px;}
    h4 .post-labels a {text-decoration:none;color:black;}
    h4 .post-labels a:hover {color:#cc0000;}
    h4 .post-labels a:visited {color:black;}
  10. Utilize seu conhecimento de CSS para editar sua retranca. O atributo text-indent:-7px; serve para quando você insere caractere invisível antes da retranca. Se você usa um caractere visível, tire esse atributo.
Posts relacionados