Tutorial para o seu blog: Menu de Categorias

Hey amores, como vão? Bom, o post de hoje é bem rapidinho, vou ensina um tutorial que vocês vão gostar bastante, Menu de Categorias(Marcadores)  que vi no blog Part Of Me .E o resultado é bem legal, veja só o  resultado NomedaCategoria

Gostaram neh?!  Bora fazer esse tutorial então!? É super fácil!  ;)

 No painel do Blogger, vá em Desing, editar HTML, Ctrl+F ou F3 e pesquise por: ]]></b:skin> . Cole o código abaixo antes de ‘  ]]></b:skin> ‘ que você encontrou. 

/*-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? Então salve o modelo. Agora vá para a ala Elementos de Página, Adicionar  um Gagget, HTML/Javascript e cole o código abaixo dentro da caixinha:

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

I ai gostou do resultado? Fácil né?

Si precisarem de ajuda..já sabem .. é só comentar! ;]

Então espero que gostem,

Beijos