Como mostrar apenas títulos nas páginas dos Marcadores do Blogger

Para transformar a apresentação da página de marcadores, será necessário alterar o código HTML do template do blog…

1- Editor HTML
Acesse o blogger.com e clique no link [Design].
No menu superior, clique em [Editar HTML].
Selecione a caixa [Expandir modelos de widgets], como na figura abaixo:

Clique na imagem para ampliar.

  Atenção: Recomendamos que salve uma cópia do template antes de qualquer alteração no modelo do blogger. Para isto clique no link [Baixar modelo completo]. Se algo der errado, faça o upload do modelo em [Fazer upload].

Se puder, avalie primeiro em um blog de teste…

2 – Alterar o código

Atenção: Obviamente que para fazer isto, você já deverá ter ativo uma lista de marcadores no seu blog.

Após ter selecionado a caixa [Expandir modelos de widgets] utilize a tecla de atalho [CTRL+F] e localize o termo: <b:include data='post' name='post'/>
 

Clique na imagem para ampliar.

Agora substitua toda essa linha: 

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

Por este código:

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<div id='titulos'><ul><li>
<a expr:href='data:post.url'><data:post.title/></a>
</li></ul>
</div>
<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>

Em seguida visualize o blog, clicando no botão [Visualizar]. Se tudo estiver certo, clique no botão [Salvar Modelo]. (As modificações não aparecem na visualização do blog, é necessário salvar o modelo para que funcione)
Agora teste as alterações. Observe que aparece as datas acima ou ao lado dos títulos, conforme a configuração do template.

Clique na imagem para ampliar.

As datas podem deixar a listagem um pouco confusa. Se desejar retirá-las, faça a alteração conforme mostramos abaixo:

3- Excluir datas dos títulos
Volte para o edito HTML do blogger e Selecione a caixa [Expandir modelos de widgets].
Utilizando a tecla de atalho [CTRL+F] localize :
<b:if cond='data:post.dateHeader'>

Clique na imagem para ampliar.

Substitua todo o código:

<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>

Por este:

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:post.dateHeader'>
<div class='date-header'><data:post.dateHeader/></div>
</b:if></b:if></b:if>

Visualize o blog, clicando no botão [Visualizar]. Se tudo estiver certo, clique no botão [Salvar Modelo].
Observe agora que a lista aparece sem as datas, com apresentação menos confusa e com uma aparência mais profissional.

Clique na imagem para ampliar.

Se você ainda quiser, poderá acrescentar estilo a sua listagem, veja como:

4- Acrescentando estilo a sua lista
Para incrementar ainda mais a sua listagem de posts, você poderá inserir estilos em CSS. Abaixo mostraremos um exemplo, mas que você poderá mudar a vontade, dependendo do seu conhecimento em CSS.
Volte para o edito HTML do blogger e selecione a caixa [Expandir modelos de widgets].
Utilizando a tecla de atalho [CTRL+F] localize : ]]></b:skin>

Clique na imagem para ampliar.

Insira o código CSS antes (acima) da tag  ]]></b:skin>

#titulos{ /*espaço da lista */
margin:10px 0px;
background:#f8f8f8;
padding: 1px;
border:1px solid #e4e4e4}
#titulos ul{ /*espaço do item */
margin:0px;
list-style-type:none;
background:#e4e4e4;
padding:1px;}
#titulos li{ /* item da lista */
background: #f8f8f8 ;
padding: 5px 0px 10px 30px;
font-weight:bold}

Visualize o blog, clicando no botão [Visualizar]. Se tudo estiver certo, clique no botão [Salvar Modelo].
Obs.: Isto é apenas um exemplo… Você poderá alterar o código CSS da maneira que desejar. Veja como ficou o nosso exemplo abaixo:

Clique na imagem para ampliar.

Para completar, você poderá colocar ícones ilustrativos na frente dos títulos. Veja como:

5- Inserindo bullets ilustrativos
Acesse o site supertrafego.com e escolha um bullet que achar que combine melhor com a sua lista (são mais de 1600 bullets):

Clique na imagem para ampliar.

Copie o URL (endereço) da imagem (clique sobre a imagem com o botão direito). No nosso exemplo escolhi o bullet: http://www.akimesmo.com/images/Bullets/000000032.gif

Volte para o edito HTML do blogger e selecione a caixa [Expandir modelos de widgets].
Utilizando a tecla de atalho [CTRL+F] localize : <div id='titulos'><ul><li>
Imediatamente após as tags <div id='titulos'><ul><li> acrescente o código abaixo:

<img src='http://www.akimesmo.com/images/Bullets/000000226.gif' style='margin-right:5px;text-align:center;'/>

Substitua o link em laranja pelo o URL do bullet que você escolheu…Você também poderá inserir qualquer outra imagem, desde que hospedada na rede da internet…
Obs.: Recomendo que você salve a imagem (bullet) escolhido em um servidor de hospedagem ou em um site especializado em armazenamento de arquivos, como o ImageShack, por exemplo.

Clique na imagem para ampliar.

Veja agora como ficou o nosso exemplo de marcadores mostrando apenas títulos das postagens com estilo e bullets…

Clique na imagem para ampliar.

Atenção:
Se você não gostar do resultado ou se não funcionar corretamente, refaça todo o processo e volte na condição original…
Se algum erro for causado no seu template, utilize o backup que você criou e clique em Fazer Upload

Fonte:
http://visualdicas.blogspot.com/2010/12/como-mostrar-apenas-titulos-nas-paginas.html