#Comofaz: menu de categorias
Blogosfera

#Comofaz: menu de categorias

25 de setembro de 2012
Depois que fiz aquela série de posts ensinando a fazer um layout (confira!), muitos leitores me pediram para continuar falando sobre algumas coisinhas de design e HTML aqui no blog. Recebi várias sugestões lá no meu Ask e adorei saber que vocês curtem aprender novidades para colocar em seus blogs. Afinal, amo mexer com códigos e edições de imagens… E compartilhar tudo o que aprendi nesse tempo sabendo que vocês vão gostar é super gratificante <3
No primeiro tutorial, ensinei vocês a fazer a data ao lado do título. Agora, após me pedirem bastante, resolvi ensiná-los a fazer o menu de categorias, aquele na sidebar com os links de cabelos, comportamento e etc. Bora aprender?
1- Antes de qualquer alteração, aconselho a salvar seu modelo anterior. Então, vá até Modelo > Fazer backup/Restaurar e clique em baixar modelo completo e, só depois de tê-lo em seu computador, continue com o tutorial. Assim, se der qualquer erro, você poderá voltar ao seu design antigo.
2. Ainda na página Modelo, clique em Editar HTML. Em seu CSS (estilo da página que fica entre <b:skin> e </b:skin>) você vai adicionar esse código:
* Categorias */
#categoriaslateral {
width: 100%;
padding: 0;
margin: 0;
font-size: 12px;
font-family: Tahoma;
text-transform: uppercase;
}
#categoriaslateral ul {
list-style: none;
margin: 0;
padding: 0;
}
#categoriaslateral li {
border-bottom: 1px solid #000000;
margin: 0;
}
#categoriaslateral li a {
display: block;
padding: 5px 5px 5px 0.5em;
background-color: transparent;
color: #000000;
text-decoration: none;
}
#categoriaslateral li a:hover {
background-color: #000000;
color: #ffffff;
}
Você deve colá-lo abaixo de um código com essa estrutura. Ou seja: abaixo do ;} de alguma tag. Por exemplo:
#post {
bla bla bla;
}

Agora vamos às alterações:
#categoriaslateral {
width: 100%;
padding: 0;
margin: 0;
font-size: 12px; (Tamanho da fonte. Para modificá-lo, troque o 12 pelo tamanho que você quer)
font-family: Tahoma; (Fonte. Para modificá-la, troque Tahoma pelo nome da fonte que você quer)
text-transform: uppercase; (Esta linha vai deixar as palavras em maiúsculo, assim como no JDB. Para tirar, basta excluir esta parte)
}
#categoriaslateral ul {
list-style: none;
margin: 0;
padding: 0;
}
#categoriaslateral li {
border-bottom: 1px solid #000000; (Cor da borda. Para trocar, modifique o 000000 pelo código da cor que você quer)
margin: 0;
}
#categoriaslateral li a {
display: block;
padding: 5px 5px 5px 0.5em;
background-color: transparent; (Cor de fundo do link. Ele está transparente para ficar da cor do fundo da sua sidebar. Se quiser trocar, basta apagar o transparent pelo código da cor que você quer. Exemplo: #000000)
color: #000000; (Cor da fonte do link. Para modificá-la, troque o 000000 pelo código da cor que você quer)
text-decoration: none;
}
#categoriaslateral li a:hover {
background-color: #000000; (Cor de fundo do link quando o mouse passa em cima. Se quiser modificá-la, basta trocar o 000000 pelo código da cor que você quer)
color: #ffffff; (Cor da fonte do link quando o mouse passa em cima. Para modificá-la, troque o 000000 pelo código da cor que você quer)
}
3. O último passo é colocar os links na sidebar. Para isso, vá na página Layout e adicione um gadget de HTML/Javascript.
No corpo desse gadget, cole o seguinte código:
<div id=”categoriaslateral”>
<ul>
<li><a href=”LINKAQUI”>Nome da categoria</a></li>
<li><a href=”LINKAQUI”>
Nome da categoria</a></li>
<li><a href=”LINKAQUI”>
Nome da categoria</a></li>
<li><a href=”LINKAQUI”>
Nome da categoria</a></li>
<li><a href=”LINKAQUI”>
Nome da categoria</a></li>
</ul>
</div>
Para adicionar mais linhas de links, é só copiar esta linha <li><a href=”LINKAQUI”> Nome da categoria 5</a></li> e colar antes do </ul>.
Agora é só modificar o LINKAQUI pelo endereço da tag e colocar o nome da categoria no lugar indicado. Vai ficar assim:
<li><a href=”http://juliedebatom.blogspot.com/search/label/Cabelos“>Cabelos</a></li>
OBS: Para ter o link da tag, vá até a parte de marcadores da sua sidebar, clique em cima da tag que quer pegar o endereço e vá em Copiar endereço do link. Depois é só colar no código.
Como o Blogger não tem o sistema de categorias (assim como no WordPress), o jeito é usar os marcadores para esta função. Por isso, crio as tags com os nomes das categorias (exemplo: Cabelos, Comportamento, Design, etc), copio o link delas (assim como expliquei acima) e colo no código. 
Para que as categorias não se misturem às tags (que ficam na sidebar também), vá até o gadget de marcadores, clique em editar e faça o seguinte:
Em mostrar, clique em marcadores selecionados. Vá em editar e marque somente aqueles que não fazem parte das categorias, assim como fiz na imagem. Desse jeito, os links não ficam nos marcadores e sim no gadget que acabamos de criar.
Esta última parte não é obrigatória, pois ela só serve para não deixar os links repetidos na sidebar. É mais uma questão de organizar, viu? É desse jeito que faço para que tudo fique certinho no JDB.
E vocês? Curtiram o tutorial? Conta pra gente! E não deixem de passar lá no meu Ask para deixar outras sugestões e tirar suas dúvidas.

Tags:

Deixe seu comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

11 Comments