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