Criar uma página de índice no Blogger?

Observação: Se você deseja exibir um sumário dentro das postagens do Blogger, confira este ótimo plugin: Automatic Table Of Contents - TOC Plugin .

---

Você deve ter notado que criei uma página de sumário com atualização automática que exibe os links para todas as postagens publicadas até o momento neste blog. Este widget organiza suas postagens por categoria e realmente economiza tempo. Antes, eu adicionava os links manualmente à página de Dicas do Blogger , mas assim que descobri este excelente widget, passei a usá-lo imediatamente. Este widget também informa aos visitantes quais postagens são novas e quais são antigas. Modifiquei o CSS para que ele se adapte à aparência do seu blog.

Primeiramente, consulte a página de demonstração do índice e explore o widget para descobrir o que o torna tão interessante.

Siga os passos abaixo para criar uma página de sumário para o seu blog.

1. Acesse Blogger > Design > Editar HTML
2. Faça backup do seu modelo.
3. Pesquisar por ]]></b:skin>
4. E logo acima, cole o código CSS abaixo.

/*--------MBT TOC-----*/
.judul-label{
background-color:#E5ECF9;
font-weight:bold;
line-height:1.4em;
margin-bottom:5px;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 0 2px;
outline: none;
cursor: pointer;
text-decoration: none;
font: 14px/100% Arial, Helvetica, sans-serif;
padding: .5em 2em .55em;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 1px 1px 4px #AAAAAA;
box-shadow: 0 1px 2px rgba(0,0,0,.2);
color: #e9e9e9;
border: 2px solid white !important;
background: #6e6e6e;
background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
background: -moz-linear-gradient(top, #888, #575757);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}
.data-list{
line-height:1.5em;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:5px;
white-space:nowrap;
text-align:left;
font-family:"Arial",sans-serif;
font-size:12px;
}
.list-ganjil{
background-color:#F6F6F6;
}
.headactive{
    color: #fef4e9;
    border: 2px solid white !important;
    background: #1C8DFF;
    background: -webkit-gradient(linear, left top, left bottom, from ( #9dc2e7 ), to( #438cd2 ));
    background: -moz-linear-gradient(top,  #9dc2e7 ,  #438cd2 );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=' #9dc2e7 ', endColorstr=' #438cd2 ');
}

     5. Salve seu modelo e agora crie uma Nova Página (não uma nova Postagem).
     6. Dê à sua nova página um título relevante, como “Sumário XYZ”, e então, no modo EDITAR HTML do seu editor do Blogger, cole o código abaixo.
CÓDIGO ATUALIZADO:

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src=" http://www.mybloggertricks.com /feeds/posts/summary?max-results=1000&alt=json-in-script&callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

Veja uma captura de tela de como tudo ficará.

Agora, basta substituir http://www.mybloggertricks.com pelo URL do seu blog e clicar em Salvar. Visualize sua nova página para ver um belo sumário com um elegante efeito de menu suspenso.

Personalize o widget de sumário

Por padrão, mantive o fundo da categoria no modo de cor ativa em azul e no modo inativo em cinza escuro, conforme mostrado abaixo.


Se desejar alterar a cor do modo ativo, basta alterar #9dc2e7 e #438cd2 . Aqui, #9dc2e7    refere-se a um tom mais claro e #438cd2 a um tom mais escuro. Portanto, qualquer que seja a cor que você deseje usar, basta substituir #438cd2 pela cor de sua preferência e #9dc2e7   pelo tom mais claro da cor escolhida.
Nossa ferramenta de geração de cores pode ser útil para ajudá-lo(a) a selecionar as cores desejadas.

É isso!

Espero que seja realmente útil para você. Se tiver alguma dúvida, fique à vontade para pedir minha ajuda. Até mais! :)

FONTE: https://www.mybloggertricks.com/2010/12/how-to-create-table-of-contents-for.html