Cabeçalho

O Blog Html e Css tem como objetivo esclarecer todas as tuas dúvidas sobre design, codificação e personalização de blogs. Pede um tutorial, ou tira as tuas dúvidas. Estou aqui para te ajudar e faço-o de bom grado. Sugestões e perguntas são sempre bem-vindas. Obrigado pela visita e volta sempre.
- Zé Pedro Silva.

31/07/2013

Menu "Listinha" Para Tutoriais

Olá pessoal *___*, neste tutorial vou ensinar como fazer um menu "Listinha" para tutoriais, materiais ou até mesmo para categorias e tags.

No painel, vai a design → editar html → aperta F3 e procura por:
/* Content
----------------------------------------------- */
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
    }
Depois de teres encontrado o código acima, copia o código seguinte e cola abaixo da chave destacada a negrito no código anterior.
.listinha {
margin-bottom:2px;
background:#f9f9f9;
padding:2px;
border-left: 3px solid #COR_da_BORDA;
font-size:11px;
}
.listinha:hover {
border-left: 3px solid #COR_da_BORDA;
}
Coloca o código hexadecimal de duas cores diferentes nos locais indicados a negrito, uma para a lista em estado normal e a outra para a lista em estado hover. Depois de isso feito, visualiza e guarda o modelo.

Agora para o menu funcionar, copia o código seguinte, e cola-o na página ou na miniaplicação pretendida.
<div class="listinha">
<a href="LINK_AQUI" target="_blank">NOME_do_TUTORIAL</a></div>
Como viste, é muito fácil. Espero que tenhas gostado do tutorial. Se tiveres alguma dúvida, tira-a na aba "Pergunta".
Créditos do Menu: Camila's Designs

0 Comentários

« »