Índices ou índices para Blogger

Os seguidores do nosso blog costumam ler os artigos que lhes interessam até o momento, mas também temos leitores que não são habituais e que podem ter interesse em ter uma ideia geral do que escrevemos no nosso blog. Para isso, o melhor é utilizar um Índice de Conteúdo, que em inglês é abreviado como TOC (Table Of Contents). Essas listas de conteúdo são baseadas em Javascript e no Blogger geralmente são colocadas em uma das páginas estáticas que você pode acessar no menu superior. Desta forma, com um único clique, permitem ao usuário ver uma lista de tudo o que você escreveu até agora, ou se preferir, os artigos mais recentes. Deve-se esclarecer que como as traduções são um pouco gratuitas e algumas pessoas também falam sobre índices de conteúdo como sitemaps ou índices (é a tradução literal, mas não gosto da confusão de dizer que é uma mesa). A ideia deste artigo é que você conheça os elementos que compõem os Índices de Conteúdo e como inseri-los no Blogger.

Partes de um índice.

Um índice de conteúdo do Blogger é composto por três partes: um programa Javascript, um código HTML e o CSS para formatá-lo, embora possamos ignorar este último.
1. O código HTML. Esta é a parte que devemos inserir em uma página estática do nosso blog. É composto por 2 tags de script.

O que a primeira tag script (azul escuro) faz é ativar o programa Javascript, que é um arquivo .js e deve ser hospedado em uma página web externa ao Blogger. No exemplo abaixo, o endereço são as letras que você tem em vermelho.
A segunda tag script (em azul claro) é aquela que indica o blog do qual vamos fazer o índice. Como você pode ver em laranja você tem o endereço do feed deste blog.

Este código HTML indica o local da página da Web onde queremos que o Índice apareça. Se você incorporá-lo em uma postagem, ele aparecerá aqui, se você colocá-lo em um gadget HTML/Javascript na barra lateral, ele aparecerá na barra lateral. Mas o mais comum é inseri-lo em uma página estática do Blogger .
O processo é muito simples.

Copie o código.
Você abre o local onde vai inseri-lo.
Você acertou.
Você altera a URL do feed para a do seu próprio blog.
Você salva e deve funcionar agora.

2. O código Javascript. É a parte que contém as instruções do que deve ser exibido na tela e como os artigos serão ordenados. Esta é a parte que determina se os artigos serão ordenados alfabeticamente, classificados por tags ou ordenados por data. Este código Javascript pode estar em um arquivo externo ou dentro do código HTML.

javascript externo . É como o exemplo acima. O primeiro script apontará para um arquivo JS, que é o arquivo Javascript. É a maneira mais elegante e clara de proceder, mas tem algumas desvantagens. O problema mais comum é que o Javascript externo está hospedado na página de outra pessoa, portanto, se essa pessoa remover ou modificar o programa, isso também afetará o índice de conteúdo do seu blog. Por esse motivo, nosso conselho é que, se possível, faça upload do arquivo JS para o seu domínio. A vantagem de um arquivo externo é que se você tiver vários blogs, só precisará fazer as modificações uma vez em todos eles.
javascript interno. O código vai dentro do blog dentro do template, localizado no cabeçalho. Ou seja, antes da tag </head>. Se for feito assim, então você terá que remover o primeiro código Script e deixar apenas o segundo, como você pode ver abaixo.

3. O código CSS. Este é um elemento acessório, e podemos encontrar alguns índices que não possuem nenhum CSS atribuído. Este código é utilizado para definir a aparência do índice, colocando uma cor de fundo, uma fonte específica, margens, recuo... Requer o uso de um identificador no código HTML, como o texto que foi adicionado em verde.

Para onde vai o código CSS? É melhor colá-lo dentro do modelo, embora você também possa colá-lo antes do código HTML, usando uma tag <style> . O problema que encontro com CSS é que para usá-lo de forma eficaz você precisa conhecer as tags, identificadores e classes que o código Javascript cria.

Diferentes índices (TOS) para o Blogger.

1. Índice por data. Este artigo é do Ciudad Blogger. O índice não possui código CSS e o Javascript é interno, está embutido no template.
2A. Índice classificado por tags . Ainda estamos no blog Ciudad Blogger, mas agora o Índice que eles nos apresentam classifica as diferentes entradas por tags. Os rótulos seguem uma ordem crescente, começando pelos símbolos, depois pelos números de 1 a 0 e por fim pelas letras. A informação chega até mim através do Ciudad Blogger, embora o criador do código seja Abu Farhan . Não possui código CSS e o Javascript é externo.
2B. Índice classificado por tags B .É o mesmo TOC de antes, mas a versão Vagabond vem com duas diferenças notáveis. A primeira é que inclui tags CSS com seletores. A segunda é que agora o Javascript é externo. Na Varanda do Jaime encontramos o mesmo modelo, mas com códigos CSS e Javascript externos. Uma das características especiais é que é capaz de detectar as últimas 10 entradas e marcá-las com uma mensagem vermelha que diz: Novo!
3. Índice classificado por tags de acordeão (menus suspensos?). Se se trata de menus suspensos, é uma melhoria muito interessante para quem tem um grande número de rótulos no blog, o único problema é que quando experimentei não vi efeito. É baseado no desenvolvimento de Abu Farhan, mas o código HTML é mais longo, inclui um terceiro Script que supostamente cria o efeito acordeão. Possui os códigos Javascript externos e o CSS externo, portanto não vemos os seletores.
4. Índice por tags e com datas. O mais interessante deste artigo da AreaTIC é que o autor customizou o Javascript do TOC nº2, e nos mostra o arquivo Javascript que obteve. O diferencial é mostrar a data e deixar a mensagem Nova! aparecem na frente e não atrás. Eles não têm CSS e o Javascript em princípio é interno, mas como você tem o código também pode carregá-lo como um arquivo JS.
5. Índice para gadgets com múltiplas janelas. Desta vez o artigo está em inglês e nos mostra como inserir um índice em um gadget multitab.
6. Belo índice com CSS e 7 seletores .Este é o que utilizo no Blog da Internet (pelo menos por enquanto). Ao nível da programação, não contribui com nada de especial. O Javascript é externo e não podemos ver, mas parece ser igual ao que Abu Farhan propõe. O interessante é o código CSS, que é exibido dentro da tag HTML Style, mas recomendamos que você cole na seção CSS do template para que o blog carregue melhor. O visual com degradês, bordas e diferentes tons de azul fica muito bonito.

Personalize um índice de conteúdo para o Blogger

Por fim, explicaremos as alterações que você pode fazer em um Índice, que, como você pode imaginar, está dividido em três grupos.

Personalização de código CSS. Serve para alterar a aparência da tabela, permitindo alterar o estilo dos textos, sua cor, o fundo dos dados que são apresentados... não é complexo e explicarei detalhadamente em outro artigo.
Personalização de código Javascript. A verdade é que não tenho ideia, no momento não entendo esse tipo de linguagem e não encontrei nenhum artigo que possa servir de referência.
Personalização do código HTML. É usado para modificar as fontes de informação e a quantidade de informação. Também para adicionar outros Javascripts, como aquele que cria o efeito acordeão. A única mudança que vi que pode ser feita é aumentar ou diminuir o número de artigos que você exibirá no índice de conteúdo. Observe que após a linha laranja há um ponto de interrogação e depois a propriedade "max-results=3", isso porque o código acima mostra apenas no máximo 3 artigos (os 3 últimos). Mas aqui você pode adicionar números tão grandes quanto quiser e por padrão a maioria coloca "max-results=9999" para que todas as entradas apareçam.

FONTE: http://www.blogeninternet.com/2013/08/indices-o-tablas-de-contenido-para.html