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:Download
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!
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
não tem como fazer isso com cada marcador tipo usar, marcador ”tal” com todas as postagem
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?
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…
Tem como fazer pelo Blogspot?
Marcus, não sei te dizer pq nunca testei fazer desta forma.
Oi Eduardo, obrigada por me avisar…já corrigi 🙂
Eu quem agradeço pelo comentário Carlos. 😉
Oi Clau, só pra avisar que , no codigo hexadecimal, da cor do fundo, esta com duas cerquilhas (#), e pra agradecer!
Obrigado Clau, estas dicas e conselhos resultaram mesmo bem! Parabêns pelo seu excelente trabalho e dedicação neste seu Mundo Blogger!
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.
Oi Clau, muito bom… e tem como retirar a palavra "Novo"??
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 =)
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 !!
Mais uma ótima dica mas pra variar eu tenho outra dúvida rs, como faço para mudar a cor da palavra "Novo" ?
Gostei' ;D
mais como faço para trocar os Numeros, Por imagem ?
Valeu pelos comentários, pessoal.
Clau,
somando a orientação deste artigo e outras aulinhas que acompanho por aqui, ficou muito lindinho.
Obrigada.
Acabei de inserir .. ficou "Show de bola"… Muito thanks … bjos !!
Muito obrigado clau ,, era isso que precisava … Bjos !!
Jamis,
Andreza
Obrigada pelos comentários 😉
Valeu, eu sempre quis saber como vc fazia isso! =)
Muito bom!!!! Para quem ainda não sabe um pouco de CSS este artigo realmente vai ajudar =D
@JamisHenrique_