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.

04/02/2014

Menu de Tutoriais

Olá visitantes :3, tenho a dizer-vos que estou a adorar, esta nova estrutura aqui do blog e até estou mais motivado para postar, apesar de não ter muito tempo, devido à escola. Hoje, venho aqui postar, o menu de tutoriais, que eu uso aqui no blog. Espero que gostem e se usarem, peço-vos que creditem aqui ao HC.

Primeiro, coloca todo o código abaixo no css do teu blog.
@font-face {
font-family: "PFArmaFive";
src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf');
}

.menututoriais a{
font-family: "PFArmaFive"; /* tipo de letra */
font-size: 8px; /* tamanho da letra */
text-transform: uppercase; /* texto a maiúsculas */
margin-left: 2px; /* não alterar */
margin-bottom: 3px; /* não alterar */
margin-top: 1px; /* não alterar */
margin-right: 2px; /* não alterar */
padding: 4px; /* não alterar */
display: block; /* não alterar */
border-bottom: 1px solid #dfdfdf; /* borda de baixo */
border-top: 1px solid #dfdfdf; /* borda de cima */
border-left: 1px solid #dfdfdf; /* borda da esquerda */
border-right: 1px solid #dfdfdf; /* borda da direita */
}
.menututoriais {
text-shadow: 1px 1px 0px #fff; /* sombra do texto */
text-align: center; /* alinhamento do texto centrado */
}
.menututoriais a:link {
color: #e83a71; /* cor do link em estado normal */
}
.menututoriais a:visited {
color: #e83a71; /* cor do link em estado visitado */
}
.menututoriais a:hover {
color: #b8b8b8; /* cor do link em estado hover */
}
Altera o código acima, de acordo com os comentários à frente de cada linha de código. Agora, na tua página de tutoriais, cola o código abaixo, e de acordo com a tua lista de tutoriais, acrescenta as partes devidas do código.
<div style="float: left; width: 50%;">
<div class="menututoriais">
<a href="Link_do_Tutorial" >Nome do Tutorial</a></div>
<div class="menututoriais">
<a href="Link_do_Tutorial" >Nome do Tutorial</a></div>
</div>
<div style="float: right; width: 50%;">
<div class="menututoriais">
<a href="Link_do_Tutorial" >Nome do Tutorial</a></div>
<div class="menututoriais">
<a href="Link_do_Tutorial" >Nome do Tutorial</a></div>
</div>
<div style="clear: both;"></div>
Podem ver o resultado, do menu, abaixo.
Bem, espero que tenham achado fácil e se tiverem dúvidas, não hesitem em perguntar, pois estou aqui mesmo para vos ajudar u.u ! Peço-vos, que façam pedidos, utilizando o Ask.Fm do blog. 

7 Comentários:

  1. Nuss que menu útil muito útil eu adorei :)
    http://p-aintbucket.blogspot.com.br/

    ResponderEliminar
  2. Achei muito legal esse menu, acho que vou usar no meu próximo layout.

    h-holiday.blogspot.com.br

    ResponderEliminar
  3. É uma pena que vc vá fechar o blog, eu descobri ele hoje! Mas como isso não depende só de mim, toda a sorte do mundo pra vc na blogosfera!♥

    ResponderEliminar

« »