Como personalizar as categorias do blog em lista

Conforme solicitação de alguns colegas blogueiros mais atentos, que notaram a alteração que eu fiz nas categorias do blog, onde após clicar em alguma delas você não irá necessitar de passar por todos os posts para achar a matéria que deseja, e com isso economizando muito tempo.

Com isso você irá evitar que os leitores ao acessar sua página e clicar em alguma das categorias ou mesmo nos arquivos apareça o texto por completo dos posts anteriores, o que pode levar alguns impacientes a sair chateado com seu blog, e pensando em todos os leitores natos do blog newtechsound estarei fazendo o tutorial de como personalizar as categorias do blog em lista.

Primeiro passo: entre logado no seu blogger, em seguida basta clicar em alguma das duas opções que eu trouxe nessas fotos.

Segundo passo: basta clicar na aba "editar html" para abrir a página de edição do código do template.

Terceiro passo: Salve um modelo do seu template, isso para você evitar futuras dores de cabeça, e para fazer isso basta clicar no link baixar modelo completo, conforme a foto abaixo.

Quarto passo: Agora você irá clicar em "expandir modelos de widgets".

E agora você irá procurar no código html do seu template o seguinte código: <b:include data='post' name='post'> e substituí-lo por esse outro código:

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

Agora você irá procurar pelo código ]]></b:skin> e acima dele colar o seguinte código:

#titulos{ /*estilo para o espaço ocupado pela lista */
margin:6px 0px;
background:#fff;
padding:6px;
border:1px solid #e3e2e3}

#titulos ul{ /*estilo da lista */
margin:0px;
list-style-type:none;
background:#eeeded;
padding:3px;}

#titulos li{ /* estilo para cada item da lista */
background: #fff ;
padding:15px 0px 3px 40px;
font-weight:bold}

Então é isso galera, espero que tenham gostado, especialmente a minha colega blogueira a edilene, e qualquer dúvida basta entrar em contanto pelo comentários que eu tentarei solucioná-las o mais rápido possível.

via: TPNB