Personalizando “Mostrar Todas as Postagens”

Este é um post sobre CSS no Blogger.

Nível: intermediário

A mensagem de status Mostrar todas as postagens é aquela que aparece quando você faz uma busca por Marcador ou por palavra-chave.

Caso o template do seu blog faça uso de tons de cinza, é bem provável que o CSS padrão dessa caixa combine com o design do seu blog e por isso não sinta necessidade de alterá-lo, como no exemplo abaixo:

1. Como customizar essa caixa:

Quando você usa algum template que use quaisquer cores que não inclua cinza, personalizar essa caixa pode ajudar bastante a manter a harmonia. Segue então um exemplo de código customizado, lembrando que você pode mudar as cores, os alinhamentos, as bordas, os backgrounds e outros atributos de CSS que desejar.

Adicione o seguinte código à folha de estilos do Blogger, ou seja, copie e cole logo acima do código ]]></b:skin>.

.status-msg-wrap {text-align:center; color:#000; padding-bottom:20px; font-family:'trebuchet ms',sans-serif; margin-left:auto; margin-right:auto;}
.status-msg-body {display:block; background:#fff; padding:0px; margin-left:auto; margin-right:auto; text-align:center;border:1px solid #acc601;}
.status-msg-border {border:0px;}
.status-msg-bg {background:#fff;}
.status-msg-body b {color:#ff6633;}
.status-msg-body a {display:block; text-decoration:none;}
.status-msg-body a:link {text-decoration:none;}
.status-msg-body a:hover {text-decoration:none;}
.status-msg-body a:visited {text-decoration:none;}
.status-msg-border {border-right-width:0px;}
.status-msg-bg {border-right-width:0px;}
.status-msg-hidden {border-right-width:0px;}
]]></b:skin>

a) Antes:

b) Depois:

2. Como esconder essa caixa:

Algumas pessoas preferem esconder a caixa. Eu acho melhor não fazer isso, porque ajuda o leitor a se situar. Porém, se você entende que vai ser melhor assim, esconder essa mensagem de status é muito fácil. Adicione apenas o seguinte código à folha de estilos:

.status-msg-wrap {visibility:hidden; display:none;}
]]></b:skin>

Até mais!