Mostrar postagens por marcadores e arquivos em forma de lista no Blogger

Quando abrimos uma categoria ou selecionamos um mês dentro do blog, por padrão é exibido pelo menos 20 postagens por página e seguindo a mesma estética da página inicial.
Dessa forma, dependendo do blog e da forma que ele organiza suas postagens, pode prejudicar a visualização e o carregamento das postagens.

Com um pouco de vontade e algumas linhas de códigos, podemos resolver o problema.

Recomendo que faça backup do template antes de qualquer modificação. É uma garantia de que se algo der errado, você tem uma copia segura à disposição.

Ao trabalho:

1) Faça login no Blogger, entre na página de edição do template:
Painel Novo: “Modelo” -> “Editar HTML”.
Painel Antigo: “Design” -> “Editar HTML”.

2) Marque a caixa “Expandir modelos de widgets”;

3) Procure (Ctrl+ f) por:

<b:include data=\'post\' name=\'post\'/>

4) Substitua por:

<b:if cond=\'data:blog.pageType != &quot;static_page&quot;\'>
<b:if cond=\'data:blog.homepageUrl != data:blog.url\'>
<b:if cond=\'data:blog.pageType != &quot;item&quot;\'>
<li class=\'itens_lista\'><a expr:href=\'data:post.url\'>
<data:post.title/></a> <span style=\'font-size: 11px; color:#000000; font-style: italic;\'> - 
<b:if cond=\'data:post.dateHeader\'>
<script>var ultimaFecha = &#39;<data:post.dateHeader/>&#39;;</script>
<data:post.dateHeader/>
<b:else/>
<script>document.write(ultimaFecha);</script>
</b:if>
</span></li>
<b:else/>
<b:include data=\'post\' name=\'post\'/>
</b:if>
<b:else/>
<b:include data=\'post\' name=\'post\'/>
</b:if>
<b:else/>
<b:include data=\'post\' name=\'post\'/>
</b:if>

5) Faça o teste, se nada aparentemente mudou no teste, é porque está certo, então salve.
Agora entre em uma categoria ou mês dentro do seu blog e veja como ficou.

Para personalizar a lista de exibição use CSS na class: “itens_lista”.
Exemplo:

.itens_lista {
margin: 2px 0 2px 25px;
font-size: 16px;
}

Para personalizar o link de cada lista use:

.itens_lista a {
color: #000;
text-decoration: none;
}

Onde incluir os códigos CSS?
Insira qualquer código CSS antes de ]]></b:skin>

Leia mais sobre postagens dentro do seu blog: