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.

10 comentários:

  1. Nossa, sabia que era complicado mas não tanto, rs. O interessante é que você tem o dom do didatismo e faz tudo ficar mais fácil. Parabéns.

    ResponderExcluir
  2. Que legal esse tutorial... Adorei! Vai me ajudar bastante com o meu... Valeu demais.

    ResponderExcluir
  3. Eu nunca dou sorte com esses tutoriais da net,meu blog parece que num tem esses códigos,porque eu procuro e nunca acho,fico morrendo de raiva disso.

    ResponderExcluir
  4. Massarioles, você tem certeza que clicou em Expandir modelos de widgets antes? Se pular esse passo você não acha o código mesmo não.

    Quando for colocar link para seu blog, não se esqueça de colocar "http://" antes para realmente funcionar.

    ResponderExcluir
  5. Olá Helen,li sua resposta e gostaria de lhe pedir desculpa por não ter colocado o endereço do meu blog corretamente,é que acostumamos a escrever sem a URL e acaba que o edereço não entra,gostaria de lhe dizer que dei uma nova olhada no código e acabei achando os elementos citados,só que depois que fiz as modificações apareceu o seguinte erro:

    Corrija o erro abaixo e envie o seu modelo novamente.
    Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "span" must be terminated by the matching end-tag "".

    Se você souber o que pode ser,me diga achei esse post muito interessante e deixa o blog com um layout diferenciado. Obrigado pela Atenção.

    ResponderExcluir
  6. Massarioles, significa que você não apagou o código todo e que deixou a tag <span> aberta sem precisar e/ou que não a apagou e esqueceu de fechá-la com </span>.

    ResponderExcluir
  7. Olá Helen, parabêns pelo Blog. Você poderia me ajudar é que não consigo - incrível! - colocar imagem no Titulo..sei que o titulo é uma div soh que não consigo entender porquê a imagem não aparece.A imagem até upa legal, só que não aparece..você me ajuda?

    ResponderExcluir
  8. Cara eu queria seber como eu faço um botão para colocar no lugar do (postagens mais antigas)
    http://downloadsdamoda.blogspot.com/

    ResponderExcluir
  9. @Beto, sugestão anotada, talvez um dia se torne um post.

    ResponderExcluir
  10. INCRÍVEL!
    Só não tive paciência e cabeça suficiente para fazer isso!
    Achei muito complicado, devo familiarizar mais com os nomes citados.
    Mas valeu Helen, Parabéns.

    ResponderExcluir

Posts relacionados