Personalize os marcadores do Blogger

Personalize os marcadores do Blogger

6 10 99
Personalize os marcadores do Blogger 10 6 99

Conforme alguns já notaram, fiz algumas alterações na forma de exibição dos marcadores do blog. Antes os posts apareciam por completo e com aquela mensagem “Mostrando postagens com marcador Primeiros Passos. Mostrar todas as postagens” Agora, só aparecem os títulos dos posts e sem a referida mensagem.

Ao fazer essa alteração, minha intenção foi facilitar a vida dos visitantes, já que no caso de marcadores vinculados com muitos posts a página demorava muito pra carregar. Um exemplo é o marcador “informações”, com 94 posts até o momento.

Existem diversas formas de personalização, então escolha a que você mais gostar.  

Antes de começar as alterações, faça um backup do seu template e salve no pc.

1. Excluindo a mensagem padrão do marcador (Fonte: El Escaparate de Rosa )

mensagem padrão do marcador

Entre em editar html, marque expandir modelos de widgets e procure (Crtl+F) por:

<b:include data='top' name='status-message'/>

Apague essa linha inteira, visualize e se tudo estiver bem, clique em salvar modelo.

2. Ocultando a mensagem padrão do marcador

Você pode também ocultar a mensagem padrão, ao invés de excluí-la. Inclua no CSS do template, antes de ]]></b:skin> , o seguinte código:

.status-msg-wrap {
display:none;
}

Clique primeiro em visualizar e se tudo estiver bem, clique em salvar modelo.

3. Alterando a mensagem do marcador, sem excluí-la (Fonte: Icebreaker )

nova mensagem

Entre em editar html, marque expandir modelos de widgets e procure (Crtl+F) por:

<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>

Substitua todo o código acima por este:

<div class='status-msg-wrap'>
<li>Você está no marcador &quot;<data:blog.pageName/>&quot;:</li>
</div>

A parte assinalada em vermelho pode ser substituída pela frase que você quiser.

4. Para personalizar a nova mensagem (Fonte:Dicas Blogger)

personalizando a nova mensagem do marcador

Aqui daremos um estilo para a frase acima, colocando cor, plano de fundo, borda e alinhamento no texto. Entre no html do template e procure por ]]></b:skin>

Cole, logo acima, o seguinte código:

.status-msg-wrap {
text-align: left;
margin:6px 0px;
background:#e6e6e6;
color: #cc0000;
padding:6px;
border:1px solid #ccc
}

.status-msg-wrap li {
list-style-type:none;
font-weight:bold

}

Você pode substituir a parte em vermelho por center (texto alinhado no meio) ou por right (texto alinhado à direita) e a parte em verde para normal ou italic. Para alterar o background (plano de fundo), a cor do texto (color) e a cor da borda (border) use uma tabela de cores e substitua pelos respectivos números. 

5. Para mostrar apenas os títulos dos posts

mostrando apenas os títulos dos posts

Vá até o blog Templates para Novo Blogger e siga este tutorial da Ariane.

Este post foi publicado originalmente às 12:03 h e atualizado às 16:30 h.

33 Comments
Comments
  1. Nossa, assim é muito mais prático! Vou colocar nos meus blogs também! *_*

    ResponderExcluir
  2. Genial, acho que vou fazer isso em meu blog, é bom para diferenciar um pouco e ser mais "original" (ou não)

    ResponderExcluir
  3. Boa dica, Dra. Juliana!
    Só não consegui tirar as datas, mas não abusar-te-ei, mandei a dúvida apara a Ariane.


    Oi, Ariane!
    Tira-me uma dúvida.
    Na hora em que fui substituir o código para não aparecer a data, pelo menos no meu Template, apareceram códigos a mais do que você mostra aí e o primeiro (cond='data:post.dateHeader) não está na sequencia do segundo.
    No meu caso, como faço para retirar a data?!?

    ResponderExcluir
  4. Valeu pelas dicas
    Já usei no meu blog
    Ficou muito bom!

    Marco Damaceno

    ResponderExcluir
  5. Boa Dica Juliana, estou procurando isso e acho que vou colocar, na hora de colocar o código da Ariane já fiz e deu certíssimo!Obrigado

    ResponderExcluir
  6. Olá Ju,meu template é o seu (songs) e deletei a linha que orientou.
    Qdo fui salvar modelo,deu o seguinte erro:

    "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: Content is not allowed in prolog."

    O que faço?

    Abraços

    Lana L.

    ResponderExcluir
  7. Juliana, quando vou localizar o código, ele diz que não foi encontrado. Tentei com editores HTML profissionais, mas também não acha.

    ResponderExcluir
  8. Oi Jú fiz este processo porém quando apaguei a linha a linha citada a 1º não apareceu nada, tive que colocar de novo para poder aparecer, e as imagens na frente vocês não podem ensinar?
    abraços bom o tutorial

    ResponderExcluir
  9. Sempre com excelentes dicas! ((((((((:

    http://balaiodicas.blogspot.com/

    ResponderExcluir
  10. Muito obrigada, Juliana! Ótimo tutorial!

    Beijos

    ResponderExcluir
  11. Lana, eu sabia que com a segunda explicação você conseguiria ;)

    ResponderExcluir
  12. aqui tem tudo que nós queremos!

    vários tutoriais daqui me ajudaram muito (eu queria comentar isso de qualquer maneira :D)

    ResponderExcluir
  13. Não deu certo. Meu template foi baixado aqui mesmo. e eu não acho aquele HTML
    PS: Meu template é o Dicas para Blogger

    ResponderExcluir
  14. Olá juliana consegui quase tudo menos colocar a imagem do lado de cadamarcador que nem o seu até segui o tuto da Ariane mais não aparece...

    ResponderExcluir
  15. Ju querida,ñ sabia onde perguntar...se ñ for aqui queira perdoar-me.

    Como meu blog é de gifs,tenho mta coisa pra postar em cada categoria do índice.
    Minha pergunta é a seguinte: Há como eu paginar as categorias?

    EX:Na categoria Scrap Tags há 30 cartões postados,e tenho mais trocentos pra postar...há como ter uma 2ª e 3ª página dessa categoria?

    O que me sugere?

    http://loroza.blogspot.com/

    Beijos com as energias do céu.

    Lana L.

    ResponderExcluir
  16. to sempre visitando e sempre achando ótimos assuntos e dicas!
    parabéns, seu banner ta até lá no meu blog
    abraço

    ResponderExcluir
  17. Foi meio "difícil", pois fiz 2 vezes, mas agora consegui, ainda bem!!
    Obrigado e sucesso no blog

    ResponderExcluir
  18. Engrossando o pedido do blogcafusao, tambem tentei inserir a imagem ao lado das chamadas mas não consegui. Vc poderia explicar como faz?

    ResponderExcluir
  19. Lelo, a explicação encontra-se no blog da Ariane

    ResponderExcluir
  20. nossa adoro esse blog ajuda muito no meu blog obrigado por mais uma dica abraçoss...

    ResponderExcluir
  21. Ótima dica. Já testei e funcionou direitinho. Achei outro dia esse blog no google e já me ajudou muito. Tem ótimos tutoriais.

    ResponderExcluir
  22. Abraços a todos da equipe seu blog esta indexado ao meu nª1 Dicas Bloguer

    ResponderExcluir
  23. Oi Ju quanto tempo neh!!!!
    Adorei esta postagem como sempre você manda super bem, agradeço a dica foi de grande utilidade.
    Vou testar!

    bjos

    João Lemes

    ResponderExcluir
  24. Oi! esse hack era mesmo o que eu procurava para encrementar o meu blog sempre achei aquela frase "Mostrando postagens com marcador Primeiros Passos" muito feia e sempre quis editar agora você mostrou como muito bom.

    abraços.

    ResponderExcluir
  25. Juliana, eu tenho uma dúvida... como você fez essa lista de artigos no fim de suas postagens (leia também)?
    Se for possível crie um post sobre isso!

    Ahh e eu estava navegando e percebi que o link GADGETS do menu horizontal não está funcionando!

    Muito obrigado, abraços!

    ResponderExcluir
  26. Oi Juliana!
    Eu jà instalei uma vez mostrar todos os marcadores por lista,mas quando vamos acessar a pàgina estàtica,ela vai aparecer como link e mesmo que a gente clique não abre,parece que trava,Õ.o

    ResponderExcluir
  27. o DICASBLOGGER é o melhor site na categoriaaa !!!

    CONTINUEM ASSIM!!!

    ResponderExcluir
  28. Olá,

    Há algum modo de criar sub-marcadores, por exemplo, dentro do marcador carro criar um novo marcador Fiat.

    Obrigado

    ResponderExcluir
    Respostas
    1. Eu também queria saber como faz isso, já vi em blogs: Você está em Inicio > Carro > Ford.

      Excluir
  29. " border:1px solid #ccc
    } " está faltando um ponto e vírgula ";" novatos em estilização podem não enxergar esse detalhisinho, abraço

    ResponderExcluir

ATENÇÃO: Caso esteja com dificuldades com seu blog, abra um tópico no Fórum de Ajuda do Blogger que nós iremos te ajudar a resolver.


Os comentários passam por um sistema de moderação. Não serão aprovados os comentários:
- não relacionados ao tema do post;
- com pedidos de parceria;
- com propagandas (spam);
- com link para divulgar seu blog;
- com palavrões ou ofensas a pessoas e marcas;

 
Dicas Blogger© 2007-2015 | Todos os direitos reservados | Design By Duy Templates
Top