Twitter Delicious Facebook Digg Stumbleupon Favorites More

Menu com Índice de Todas as Postagens

Encontrei uma superdica que eu estava procurando no Templates e Acessórios. É um tutorial sobre como colocar uma tabela expandivel com todas as postagens do blog. Veja o exemplo:

Para coloca-la em seu blog não é muito difícil. Vejamos:

Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo.

  • Vá até o HTML de seu blog e clique em "Expandir Modelos de widget"

Agora procure pelo trecho:

<b:section class='main' id='main' showaddelement='no'>

E substitua pelo código abaixo salvando depois.

<b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

ATENÇÃO: No meu blog, mesmo com o código anterior era possível colocar gadgets acima do post. Quanto fiz essa alteração, não pudia mais. Então, se no seu blog é possível adicionar gadgets acima da coluna das postagens (masmo que seja arrastando o gadget para lá), não precisa fazer essa alteração. Passa para o passo seguinte.

  • Agora procure pelo código:
    ]]></b:skin>
    E cole o código seguinte logo acima dele.

<style type="text/css">
#toc {
border: 0px solid #000000;
background: #ffffff;
padding: 5px;
width:500px;
margin-top:10px;
}
.toc-header-col1, .toc-header-col2, .toc-header-col3 {
background: #cccccc;
color: #000000;
padding-left: 5px;
width:250px;
}
.toc-header-col2 {
width:75px;
}
.toc-header-col3 {
width:125px;
}
.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {
font-size:80%;
text-decoration:none;
}
.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
font-size:80%;
text-decoration:underline;
}
.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {
padding-left: 5px;
font-size:100%;
}
</style>

Salve as alterações.

  • Vá até "Elementos de página". Note que agora há a opção de colocar Gadgets acima das postagens do blog.  (Talvez não haja; é só arrastar uma gadget de outra coluna para logo acima da coluna post, como no meu caso)

*Aqui (acima do post) é onde aparecerá a tabela quando for clicado em "Conteúdo do Blog".

Clique então e adicione um HTML/Javascript e cole o próximo código dentro dele. Salve !

<div id="toc"> </div>

  • Agora, dentro de outro HTML/Javascript (onde ficará o link "Conteúdo do Blog" para a tabela de índice), cole o código abaixo.
    *Não se esqueça de colocar o nome de seu blog no local em vermelho.

<div id="toclink"><a href="javascript:showToc();">Conteudo do Blog</a></div>
<script style="text/javascript" src="http://templateseacessorios5.googlepages.com/tocdoblogparaleitores.JS">
</script>
<script src="http://NOMEDOSEUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

Pronto! Você acora tem um exelente recurso como índece com todas as postagens para o seu blog.

14 comentários:

Anônimo disse...

Naum enttendii

Willian Coutinho disse...

Se vc não entendeu, esperimente acessar a guia "menu -> índice" no cabeçalho aqui do blog.

Na página que abrir clique no local relacionado a abrir a tabela de conteúdo do blog.

Assim, vc vê como funciona, ok?!!!

Igreja Centenario disse...

Essa foi a melhor explicação de indice que eu ja vi.. está de parabens pois vc.. foi bastante claro.. eu indico o seu blog...

ainda estou aprendeno mais
vou deixar o blog para ver se vou está evoluindo

www.igrcentenario.blogspot.com

que Deus te abençoe

XxDragonSlayerxX disse...

ae cara muitissimo obrigado agora meu blog vai ficar super organizadinho ^^
criei ele ontem vou começar a postar hacks para jogos se precisar de algum hack quem sabe se no meu blog nao tenha ^^
www.mundo-dos-hacks.blogspot.com

Charles disse...

Muito boa a dica,
mas queria saber se posso adicionar esse elemento em forma de postagem e não de Widget.
Tem como?
Aguardo.
Obrigado.

Willian Coutinho disse...

Charles, vá em MENU na barra de navegação do blog e clique em índice. Ta lá o índice do blog em forma de postagem.

Não é difícil não. Tudo o que vc colaria em uma widget, é só colar em uma mesma postagem. Exemplo (Em uma postagem):

_______________INDICE DO BLOG__________________

(div id="toc") (/div)
(br/)

(div id="toclink">(a href="javascript:showToc();")Conteudo do Blog(/a)(/div)
(script style="text/javascript" src="http://templateseacessorios5.googlepages.com/tocdoblogparaleitores.JS")
(/script)
(script src="http://NOMEDOSEUBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc")(/script)
_______________________________________________
* Substituí os < > POR ( )pois estava dando erro pra postar o comentário.

Pronto!

Malucu disse...

filé cara

Anônimo disse...

Eu coloquei e fico tudo bunitinhu... Mas não mostra os conteúdos

Blogger Test Blogger disse...

Me da um help ai! ♥

Elke di Barros disse...

Ei, obrigada ! Beijos

Trinca-Espinhas disse...

É óptimo este widget.
Só tem um senão:
Quando a coluna é demasiado estreita, não é possível alterar o modelo da data. Seria bom se em vez de 2009-08-31, pudessemos alterar para 09-08-01 ou outro género.
Cumpr.

ॐ Flávio ॐ disse...

Oi.. Eu tenho mais de 4000 postagens no meu Blog. Dá pra expandir o indice ? Mostrando todas as postagens ?

Aguardo retorno..

Abraço,
Flávio

Anônimo disse...

iaê galera do dicasplugins.net........td blz?......eu queria colocar uma gadget embaixo da postagem e de mesma largura....eu fiz uma no rodapé..só q ela ocupa um espaço maior que a da postagem e atrapalhe as outras gadgets laterais... como devo fazer?...aguardo resposta,,,vcs estão de parabéns pelo belo blog...FLW...

MUNDO DORAMAS disse...

NÃO ENTENDI MUITO BEM, MAS VOU TENTAR FAZER, ACABEI DE CRIAR UM BLOG E QUERO COLOCAR UM INDICE PQ SÃO VARIAS COISAS.

Postar um comentário

Envie um comentário!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates