Junte-se a 22.515 pessoas que
decidiram aprender tudo sobre Criação de Blogs Profissionais e Redes Sociais.

Ferramentas Vanessa S.

Personalizar Índice de Conteúdo por Categoria

Há um tempo atrás eu publiquei um artigo ensinando a Criar um Mapa do Site no seu blog colocando um Índice de Conteúdo por Categoria.

Este Índice é o mesmo que eu uso aqui no Mundo Blogger, e alguns leitores me pediram para explicar a forma que eu utilizei para personalizar os títulos das categorias deste índice.
Pois bem, hoje você verá que é bem simples aplicar alguns estilos aos títulos das categorias.
Veja na imagem demonstrativa:

Como Personalizar o Índice de Conteúdo por Categoria

Abra a página que você criou (onde está instalado o script), clique em “editar” para abrir o editor de texto e marque a aba “html”.

Substitua o código todo que você havia inserido, por este outro abaixo:


<style type="text/css">
.label p {
font-size: 150%; /*--edite tamanho da fonte--*/
background: #2288bb; /*--edite cor de fundo--*/
border: 1px solid #000; /*--edite cor e estilo de borda--*/
margin-top: 30px;
padding: 10px;
width:90%;
text-decoration:none;
}
.label p a:link{
color:#FFFFFF; /*--edite cor do link do titulo--*/
text-decoration:none;
}
.label p a:hover{
color:#CCCCCC; /*--edite cor do link do titulo--*/
}
.label li {
margin:0;
border-bottom:1px dashed #CCCCCC; /*--edite cor e estilo de borda--*/
}
</style>
<div class="label">
<script style="text/javascript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/Indice-categoria.js"></script>
<script src="LINK-DO-SEU-BLOG/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script><span style="font-size: 70%">Custom <a target="_blank" href="https://www.mundoblogger.com.br/2009/11/criar-um-mapa-do-site-no-seu-blog.html">Mundo Blogger</a> |Widget by <a target="_blank" href="http://www.abu-farhan.com/">Abu Farhan</a></span>
</div>

Os campos destacados no código são os locais que você deve editar para aplicar os estilos a seu gosto.
Não esqueça de colocar o nome do seu blog no local indicado no código, mas retire a barra do final.

Caso você prefira fazer download do arquivo javascrit necessário para utilização deste recurso, baixe o arquivo através deste link:Downloadurl_icon
Hospede o arquivo em seu próprio site de hospedagem.
– Veja relação com opções de Sites para hospedagem de arquivos.
Após hospedar o arquivo, copie o link e substitua a url do arquivo ” indice-categoria” que está no código, pelo seu, no local destacado na cor azul.

Para facilitar a aplicação dos estilos CSS, segue o que cada trecho de código corresponde:
.label p – corresponde aos títulos das categorias.
.label p a:link – corresponde ao link ativo dos títulos das categorias
.label p a:hover – corresponde ao link no estado hover dos títulos das categorias
.label li – corresponde aos itens das listas.

Agora que você já aprendeu a aplicar estilos aos títulos das categorias da sua página de índice, é só usar a imaginação e tornar os títulos mais atrativos de acordo com seu gosto!

 

Por favor, NÃO retirem os créditos!

Sobre o autor | Website

Fundadora do Mundo Blogger. Autodidata que adora internet, que se encantou com blogs, seus códigos e templates, desde 2009, e por conta disso começou a "brincar" com web design nas horas vagas, até que resolveu criar o Mundo Blogger para compartilhar o que aprendeu com você através dos tutoriais publicados aqui.

Desculpe, os comentários deste artigo estão encerrados.

23 Comentários

  1. Zélia Dantas disse:

    Oi Vanessa!
    Achei ótimo suas orientações e consegui criar um índice bem legal para o meu blog e mantive as referências como você solicitou. O único problema é que não consegui personalizar as cores dos links, mas acho que é por que meu blog já é personalizado e segue as cores padrão. Se você souber como resolver isto, por favor me avise.
    Desde já agradeço.
    Zélia Dantas

  2. iran disse:

    não tem como fazer isso com cada marcador tipo usar, marcador ”tal” com todas as postagem

  3. Sandro disse:

    Olá vanessa, eu gostaria de saber, como faz para que as devidas postagens apareçam nas devidas categorias, por exemplo eu quero postar uma música no meud blog, como fazer para que a música apareça na categoria de música?

  4. Ciccero B. disse:

    Ola esta personalização é ótima porem os artigos que eu estou postando não estão aparecendo automaticamente no “Mapa do Site” será que eu fiz algo errado? eu fiz 5 postagem de teste para ver se estava tudo certo foi quando percebi esse problema…

  5. Tem como fazer pelo Blogspot?

  6. .:: Nessa ::. disse:

    Marcus, não sei te dizer pq nunca testei fazer desta forma.

  7. .:: Nessa ::. disse:

    Oi Eduardo, obrigada por me avisar…já corrigi 🙂

  8. .:: Nessa ::. disse:

    Eu quem agradeço pelo comentário Carlos. 😉

  9. Eduardo Miorim disse:

    Oi Clau, só pra avisar que , no codigo hexadecimal, da cor do fundo, esta com duas cerquilhas (#), e pra agradecer!

  10. Carlos G. Pedro disse:

    Obrigado Clau, estas dicas e conselhos resultaram mesmo bem! Parabêns pelo seu excelente trabalho e dedicação neste seu Mundo Blogger!

  11. MARCUS BABY - O MÁXIMO disse:

    MARAVILHOSA essa dica mas queria perguntar algo: como faço, qual código uso para "econder" apenas 1 único marcador (para não ser exibido no índice)?

    Grande abraço e muito obrigado.

  12. Trashy Girl disse:

    Oi Clau, muito bom… e tem como retirar a palavra "Novo"??

  13. Max Martins disse:

    Oi, Clau

    Há tempos queria personalizar um pouco essa página. Mais uma vez, graças ao teu excelente trabalho, dei uma "repaginada" nessa parte do CBSaberes.

    Obrigado!
    Forte abraço =)

  14. a??i?istraçãs disse:

    Claau , não teria como fazer um desse stilo ai mais com a oção de escolher qual dos marcadores queremos colocar no indice ? , tipow eu tenho 30 marcadores , mais que quer apareca no indice apenas 8 e eu gostaria de escolher qual deles , por favor teria como tentar , e publicar aqui para nos leitores do MundoBlogger ?
    Atenciosamente !!

  15. Raphael disse:

    Mais uma ótima dica mas pra variar eu tenho outra dúvida rs, como faço para mudar a cor da palavra "Novo" ?

  16. ÁDAMYS disse:

    Gostei' ;D
    mais como faço para trocar os Numeros, Por imagem ?

  17. .:: Clau ::. disse:

    Valeu pelos comentários, pessoal.

  18. Katia Alpin disse:

    Clau,
    somando a orientação deste artigo e outras aulinhas que acompanho por aqui, ficou muito lindinho.
    Obrigada.

  19. Naruto disse:

    Acabei de inserir .. ficou "Show de bola"… Muito thanks … bjos !!

  20. Naruto disse:

    Muito obrigado clau ,, era isso que precisava … Bjos !!

  21. .:: Clau ::. disse:

    Jamis,
    Andreza

    Obrigada pelos comentários 😉

  22. Andreza disse:

    Valeu, eu sempre quis saber como vc fazia isso! =)

  23. titulodigital.com.br disse:

    Muito bom!!!! Para quem ainda não sabe um pouco de CSS este artigo realmente vai ajudar =D

    @JamisHenrique_

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.