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="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>
</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.

Postar um comentário

0 Comentários