Roox Blogger: Personalize os marcadores do Blogger

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)

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 )

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 "<data:blog.pageName/>":</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)

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 porright (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