Os tutoriais e templates aqui apresentados são voltados para os Modelos de layout (lançados em 2006). A eficácia das dicas aqui apresentadas não foram testadas nos novos modelos de templates do Blogger (2010).

04 setembro 2009

Mostrar os Marcadores e Arquivos como listas

tutorial blogger


Por padrão, quando se clica em um Marcador ou mês do arquivo no Blogger, ele exibe todos os posts  relacionados completos, o que acredito que não ajuda muito na busca do leitor, principalmente se você tem muitos posts em uma categoria/mês. Porém é possível determinar que, clicando em um marcador ou mês do arquivo, surjam apenas os títulos dos posts, ordenados cronologicamente (faça um teste e clique em qualquer marcador aqui do TNB). Eu já expliquei como fazer isso no post Melhorando a apresentação dos marcadores e arquivos  mas o que não expliquei ainda é como dar estilo à lista, nem como retirar a data que aparece ao lado do título.

Conforme o tutorial, deve-se substituir <b:include data='post' name='post'> por:

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

Mas, para que seja possível dar estilo à lista de títulos, ao invés de substituir pelo código acima, substitua por:

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

Agora para dar estilo à lista, acrescente no CSS (acima da tag ]]></b:skin>):

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

Para que a data não apareça nestas listas, procure pelo código da data dos posts, que é:

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


e substitua por:

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

O que fazemos é colocar a data em uma condicional para a home e não sendo a página home, que apareça nas páginas internas (o que exclui as páginas de arquivos e marcadores).

Artigos Relacionados

17 comentários:

Salvador Lucas disse...

Como eu faço para aparecer um ícone ao lado de cada título de post da lista?

Joilson disse...

Oiii (meu primeiro comentário aqui xD)

Eu adicionei o código, e dei estilo tbm, e deu tudo certo! Obrigado!

Ah, eu preciso te agradecer, porque vc tem me ajudado muito em aprender sobre CSS e HTML... Há uns meses atrás eu não sabia praticamente nada, e hoje já consigo fazer um monte de coisas que naquela época parecia impossível. Tô muito feliz... obrigado :)

Atanaildo disse...

olá eu ja havia pedido pra Ariane esse tuto e agora ela posto logo depois q eu descobri como fazer mais tudo bem, esse ta bem mais resumido o meu css pra da estilo fico muito grande vlw Ariane vc é de mais.
Respondendo o Salvador Lucas já q naum responderam:
é so acresentar no codigo:

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

Essas 3 linhas de codigo css

background-position: left center;
background-image: url(LINK DO ICONE);
background-repeat: no-repeat;


ficando assim:

#titulos li{ /* estilo para cada item da lista */
background: #fff ;
padding:15px 0px 3px 40px;
font-weight:bold
background-position: left center;
background-image: url(LINK DO ICONE);
background-repeat: no-repeat;
}

qualquer coisa entra em contato atanaildoservice@gmail.com assim como a Ariane estou pronto pra ajudar sempre bj e abraços vlw Ariane

Juba e Dea disse...

Ariane, muito obrigada pela excelente dica! Já estou usando no meu blog! Grande abraço
andrea

Juba e Dea disse...

Ah Ariane, quando fiz a alteração da data, não consegui mais mudar a mesma de cor; ou seja, ela migrou para um padrão fixo (preto) a qual não usava no blog. Você poderia me ajudar a resolver este probleminha? O template que uso é customizável, e essa alteração, penso, mudou essa parte do código.

Desde já agradeço sua atenção!
super abraço

Anônimo disse...

Oi, Ariane!
Tira-me uma dúvida.
Na hora em que fui substituir o código para não aparecer a data, pelo menos no meu Template, apareceram códigos a mais do que você mostra aí e o primeiro (cond='data:post.dateHeader) não está na sequencia do segundo.
No meu caso, como faço para retirar a data?!?

Marcelo disse...

Ariane, isso funciona com todos os templates?
Pois instalei o Template Blogger Green do Dicas Blogger, mas não acha o código que tenho que subtituir

Anônimo disse...

Boa dica para mudar as categorias já procurava há algum tempo mais com relação a dica do Atanaildo não consegui colocar as imagens não sei porque não aparece!??rs

Salvador Lucas disse...

Valeu mesmo Atanaildo...

Atanaildo disse...

Olá, Salvador Lucas precisando é so falar, e quanto ao Blogcafusao.com é o seguinte vc só precisa subistituir essa linha de codigo:

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

Por essa:

#titulos li{ /* estilo para cada item da lista */
background: #fff ;
padding:15px 0px 3px 40px;
font-weight:bold
background-position: left center;
background-image: url(http://link da imagem);
background-repeat: no-repeat;
}

e onde tem: http://link da imagem vc coloca o link da imagem se esquecer do http://

qualquer coisa: atanaildoservice@gmail.com

Anônimo disse...

Olá, em primeiro lugar um muito obrigado por este hack que veio simplificar a minha vida no género de blog que quero criar, no entanto tenho uma pequena duvida:
é possível fazer isto para as labels que quisermos e nao em todas?

Desde já o meu obrigado e continua o teu belo trabalho! =)

jader resende disse...

Oi Ariane.
Tudo bem?
Deu tudo certo, muito obrigado.
Só queria mudar a cor das letras, ficou muito claro.
Por favor, como mudar as cores das letras da lista.
Meus parabens.
Jader Resende.

jader resende disse...

Oi,acho que futuquei tanto que consegui mudar as cores.
Obrigado.
Jader Resende

Anônimo disse...

Olá a todos,
Quero aproveitar este post visto que estou a usar o Hack, mas tinha duas questões caso seja possível fazer e algum me possa ajudar:

1- Quando se usa o hack, ou mesmo sem ele, no cimo aparece sempre a mensagem, por exemplo "Showing posts with label Poems. Show all post" Isto acontece tambem, por exemplo, quando se vai aos arquivos. Pergunta : Como se modifica esta frase/mensagem para algo que queiramos escrever?

2- Este hack é optimo para listar categorias, mas imaginemos que apenas queremos que aconteça com certas categorias/labels, é possivel moficiar o codigo para que possamos escolher que tags queremos que isto aconeteça e deixar as outras com o loop/aspecto normal?

3- Existe maneira de "dizer" ao blog para não deixar certas categorias aparecer na front page, para que se use este hack para listar, como por exemplo no meu blog, os "poemas" não aparecem no blog em sim, mas apenas ao carregar no menu que tenho em cima : http://www.nyxcore.com/

Deste já o meu obrigado!

Unknown disse...

Olha muito obrigado, por dicas e sugestões a dias venho utilizando seu posts e ainda não tinha agredecido muito obrigado mesmo

Anônimo disse...

Ariane,por favor corrija este hack,ele dà certo normalmente nos posts,mais quando tentamos acessar uma pàgina estàtica,ela se exibi como lista e a gente clica clica e ela não abre.

Haroldo Passos disse...

Gostaria de Retirar a exibição na página do blog dos maracadores de cada postagem. http://haroldopassos.blogspot.com/ observei que em algumas das postagens não aparece.

Postar um comentário

Os comentários são moderados.