28 de nov. de 2008

Tabela com todas as postagens do seu blog que se expande (BLOG TOC)



Encontrei uma dica bem legal para colocar uma tabela expandivel com todas as postagens do blog.




Para coloca-la em seu blog é fácil, só um pouco trabalhoso, mas então vamos lá...
Veja o exemplo clicando AQUI. Note que fiz um blog a parte só com a tabela, mas você poderá incorporar esta tabela em seu próprio blog.






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





Agora procure pelo código:

]]></b:skin>

E cole o código abaixo 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>



Vá até "Elementos de página". Note que agora há a opção de colocar Gadgets acima das postagens 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, 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>






Créditos: Linkduzão

5 comentários:

  1. uia vou fazer isso depois das festas hehehe ainda tenho aquele no menu horizontal que tirei daqui, é lerdinho mas funciona hehehe, beijos

    ResponderExcluir
  2. oi elke nao poderia adicionar os scripts direto , ao invés de usar o elemento de chamada js para nao pesar ha abertura da pagina inicial do blogger ??

    ResponderExcluir
  3. olá novamente! queria deixar os parabéns! não me canso de dizer pra você :D !! me esta ajudando muito! mas queria perguntar uma coisinha rápida!! quando ele carrega ele diz (Disponível todos os 500 posts) no meu caso ultrapasso 600! tem como fazer pra ele mostrar (Full post) ou seja todos ja postados? obrigado ,!! fique com Deus

    ResponderExcluir
  4. Oi pessoal, isso também e chamado de "Marcadores TOC"

    ResponderExcluir
  5. Olá Elke!

    O script não está funcionando. O endereço do JS não é encontrado. Precisa ser re-hospedado

    ResponderExcluir

A legislação brasileira prevê a possibilidade de se responsabilizar o blogueiro pelo conteúdo do blog, inclusive quanto a comentários; portanto, o autor deste blog reserva a si o direito de não publicar comentários que firam a lei, a ética ou quaisquer outros princípios da boa convivência. Não serão aceitos comentários anônimos ou que envolvam crimes de calúnia, ofensa, falsidade ideológica, multiplicidade de nomes para um mesmo IP ou invasão de privacidade pessoal / familiar a qualquer pessoa. Comentários sobre assuntos que não são tratados aqui também poderão ser suprimidos, bem como comentários com links. Este é um espaço público e coletivo e merece ser mantido limpo para o bem-estar de todos nós.


Copyright © Templates e Acessórios |
Design by Elke di Barros | Tecnologia do Blogger
    Twitter Facebook Google + YouTube