Mapa do Site com efeito Accordion

Com o tempo nossos blogs ficam cheios postagens e muitas caem no esquecimento para isso não ocorrer precisamos de um mapa do site que aqui será um mapa do Blog mais existem muitos scripts desses mapas mais nenhum conta com o belo efeito que esse tem para matar sua curiosidade clique em demonstração.

Demonstração

1- Agora vamos instalar é muito fácil vamos criar uma pagina estática ( Quem não sabe como criar veja aqui ).
2- Cole o script na aba Editar HTML e edite a parte em vermelho pelo endereço do seu Blog sem a barra / no final.



<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>

<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>

<script src="http://endereço do seu blog aqui/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;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>

3- De o nome da página. Ex: Mapa do Site
4- Publicar página
Pronto agora seu Blog já tem um belo mapa do site.

Fonte: abu-farhan

8 Comentários

Luís disse... 24 de janeiro de 2011 17:32 #: Olá
No wordpress... qual é o URL que devo colocar?
obgd e cumps
Luís

Responder comentário
Abner disse... 25 de janeiro de 2011 21:33 #: @Luís

Olá Luís muito obrigado pelo comentario para sua resposta leia essa post que eu mostro como criar seu mapa do site em WordPress

http://www.noticiaeblog.com/2011/01/mapa-do-site-no-wordpress-com-o-dagon.html

Responder comentário
Fábio disse... 28 de janeiro de 2011 02:01 #: Olá, instalei na perfeição. Só ocorreu um probleminha, ele fica com o fundo branco linha sim, linha não e assim não se consegue ler os títulos das postagens, pois a letra também está com uma cor clara. Como posso editar pra ficar com o fundo todo de uma cor? Ou então colocar as letras com uma cor escura? Se quiser ver como ficou e constatar, por favor visite o meu blog. Aguardo, obrigado.
Fábio

Responder comentário
Gαв૨i૯ℓ disse... 11 de março de 2011 15:12 #: mas tem que colar onde em Editar HTML isso não entendi bolofas.

Responder comentário
Jonathas Lima disse... 31 de maio de 2011 10:14 #: otimo post muito pratico e direto!

http://www.embuscadoentendimento.com.br

Responder comentário
MayconSoft disse... 6 de agosto de 2011 13:27 #: o meu ficou diferente, quero que fique igual o seu tem como?

olha o meu ai www.mayconsoft.com.br

quero que todas as categorias fiquem abertas, sem precisar clica no titulo pra abrir.
o seu fica aberto as categorias.
como fazer?

Responder comentário
Rafael Carvalho disse... 21 de março de 2013 13:23 #: VC MERECE UM ABRAÇO RAPAZ, SENSACIO FUCKIN NAL

Responder comentário
Eder Cezar Silva disse... 13 de maio de 2013 02:23 #: Excelente dica!!! Está funcionando muito bem!!!

http://www.perfilempreendedor.com

Responder comentário

Postar um comentário

Deixe seu comentário aqui
Para exibir sua foto, escreva o seu comentário e clique em "Visualizar" e em seguida clique em "Adicionar Foto de Perfil"(Só é exibido quando o comentário é publicado como Conta do Google). Para editar seu perfil Clique aqui.