24 setembro 2012

Menu de Categorias!

Oi gente!Tudo bem?Não vou postar muito hoje,porque as provas estão começando,e preciso tirar 4,5 em português para passar de ano,na verdade eu não precisava,mas é que a professora me tirou ponto,a minha língua é muito grande,já que eu falei uma resposta no dia da prova sem querer,ela me tirou 2,0,mas eu não preciso desses 2,0,estou muito confiante que vou passar de ano.
Bom,o tutorial de hoje será de como fazer aquele menu de categorias ao lado,aquele que eu uso,achou?
Vamos aprender a fazer ele hoje!Eu aprendi em um blog maravilhoso que se chama Part of Me,o nome é igual de uma música da Katy Perry,eu acho que ele fez pensando nessa música.
Aqui vem uma prévia desse menu:

NomedaCategoria
Gostaram?Então é isso que vamos fazer!Vá no painel do blogger -> Vá em Designe -> Editar HTML -> Aperte Ctrl + F e pesquise por: ]]></b:skin>
Antes desse código cole o código abaixo:
/*-Menu de Categorias por Part Of Me -*/
Categorias {

font: normal normal 11px 'Verdana', Helvetica, FreeSans, sans-serif; /*-fonte do Menu-*/
width: 96%; /*-largura-*/float: left; /*-posicionamento do menu-*/
background: transparent; /*-cor de fundo-*/
border-bottom: 1px solid #97bd51; /*-cor da borda de baixo-*/
padding: 2px; /*-altura-*/
text-align: center; /*-posicionamento do texto-*/
margin: 2px; /*-espaço-*/
-webkit-transition: 0.5s linear; /*-não precisa mexer aqui-*/
font-size: 11px; /*-tamanho da fonte-*/
color: #4f4f4f; /*-cor da fonte-*/
}
Categorias:hover {

font: normal normal 11px 'Verdana', Helvetica, FreeSans, sans-serif; /*-fonte do Menu Hover-*/

width: 96%; /*-largura hover-*/

float: left; /*-posicionamento do menu-*/
background: #97bd51; /*-cor de fundo hover-*/
border-bottom: 1px solid #fa7a57; /*-borda de baixo hover-*/
padding: 2px; /*-altura hover-*/
margin: 2px; /*-espaço-*/
-webkit-transition: 0.5s linear;
color: #ffffff; /*-cor da fonte hover-*/
letter-spacing: 3px; /*-espaço das letras hover-*/
border-radius: 10px; /*-bordas arredondadas hover-*/
}

Colou?Salve.Agora vá em Layout (No painel novo!),adicionar um gadget e adicione HTML/Javascript,cole o código abaixo dentro da caixa:

<a href="LinkdaCategoria"><Categorias>NomedaCategoria</Categorias></a>

Gostaram do resultado?Não se esqueçam de dar créditos,ok?Bom,até mais ^^

2 comentários:

  1. Flor, tem tag pra vocÊ no meu blog, beijos

    Morango aos Pedaços

    ResponderExcluir
  2. Cara, eu te amo, viu coisa linda *-*
    Na boa, valeu!
    Eu amo tanto esse menu, acho ele super lindo, da um toque diferente no blog, muito melhor por esse menu em vez de deixar sem, eu acho na MINHA opinião, que fica mais bonitinha, deixa um charme no blog ;3

    ResponderExcluir