Personalizando a exibição somente-títulos no Blogger

 

Se você já aplicou o Hack “Mostrando apenas o título das postagens na página inicial do blog” ou “Mostrando apenas o título das postagens nas páginas de arquivo e marcadores”, pode ter se decepcionado com o resultado final, pois o Blogger formata a lista de postagens como uma lista de marcadores comum. Este Hack vem complementar os anteriores e ajudar você a formatar a exibição somente-títulos no Blogger/Blogspot.

Para personalizar a sua lista de títulos, faça o seguinte:

Acesse o seu Painel do Blogger e selecione Layout, então clique em Editar HTML para entrar no modo de edição do código do seu Template.

Então marque a opção Expandir modelos de widgets.

Não se esqueça de fazer o backup do seu template antes de realizar as alterações no código, clicando em Baixar modelo completo.

Agora encontre a parte em Laranja do código do hack original (utilizando o Ctrl+F do seu navegador):

     <b:if cond='data:blog.pageType != "item"'>
         <a expr:href='data:post.url'>
         <li></li><data:post.title/></a><br/><br/>
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>

Então SUBSTITUA pela parte em Laranja do seguinte código: 

     <b:if cond='data:blog.pageType != "item"'>
         <span class='titulos'><a expr:href='data:post.url'> 
         <data:post.title/></a></span> 
     <b:else/>
         <b:include data='post' name='post'/>
     </b:if>

Por fim, adicione ao seu CSS (ANTES de ]]></b:skin>) o seguinte código:

.titulos a:link {
}

E acrescente entre as duas chaves { } os códigos de acordo com a formatação desejada (sem o texto entre parênteses) – para escolher as cores para os códigos, utilize esta Tabela de Cores CSS:

font-size:12px; (Tamanho da fonte – altere o numero em laranja de acordo com o tamanho desejado)

color:#000000; (Cor da fonte – altere a parte em vinho para definir a cor)

border:1px solid #00000; (Borda ao redor do texto – altere o número em laranja para determinar a espessura e a parte em vinho para definir a cor)

background-color:#CCCCCC; (Cor de fundo – altere a parte em vinho para alterar a cor)

background:url(http://suaimagem.png); (Imagem de dundo – altere a parte em verde pela URL da sua imagem)

margin:5px; (Margem ao redor do texto – altere o número em laranja para determinar o tamanho da margem. Você também pode dar valores separados para cada direção da borda, por exemplo: margin:5px 2px 5px 10px [cima, direita, baixo, esquerda])

display:block; (Exibe o título como um bloco, estendendo a borda, plano de fundo e margem até o fim da linha)

font-weight:bold; (Negrito)

font-style:italic; (Itálico)

text-decoration:underline; (Sublinhado)

Vamos supor que eu queira meu título em negrito, na cor preta e com tamanho 16. O código ficaria assim:

.titulos a:link {
font-weight:bold;
color:#000000;
font-size:16px;
}

Visualize para ver se está tudo correto e clique em Salvar Modelo.

Agora você terá a exibição de títulos com formatação personalizada.

Se o Hack não funcionar ou causar erros no seu template, desfaça as alterações clicando em Limpar Edições ou utilize o backup que você criou e clique em Fazer Upload, então refaça todo o processo.