Personalizar Índice de Conteúdo por Categorias Bem Profissional

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:

<br /><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><br /><div class="label"><script style="text/javascript" src="http://dl.dropbox.com/u/3173073/GothicDarkness/Indice-categoria.js"></script><br /><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="http://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><br /></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:DownloadHospede 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!
Fonte: Mundo Blogger