Menu Círculo

Olá seus cheirosos u3u

Como vão? Eu estou ótima! Consegui concertar meu computador, instalei a nova internet, ganhei um domínio no Kawaii World e semana que vem vou viajar :) como não ficar feliz? Obrigada por todos os comentários na minha primeira postagem aqui ^^ fui muito bem recebida por aqui. Agora que estou de férias, ninguém me segura ASHUASH' Postarei pelo menos duas vezes ao dia ok? Ou só uma quando estiver ocupada, como hoje.

Enfim, voltando ao assunto da postagem, eu trouxe o tutorial de um menu muito fofo que eu uso em meu blog. Se quiser conferir como ele é, clique aqui. Lindo né? Bem, eu achei o tutorial no Tea Ideas, que está desativado à um bom tempo. Espero que gostem :3 para conferir, é só continuar a ler...

Primeiro, antes de usar o menu precisa ter o primeiro gadget da sidebar transparente, então procure pela tag .sidebar .widget:first-child { e acrescente depois do código procurado isso:

Background: transparent;

Se a sua sidebar tiver bordas ou sombra, é só copiar o código correspondente à ela e trocar a cor por "transparent". Se o primeiro gadget estiver transparente, salve. Agora poderemos começar a personalizar o menu. Procure pela famosa tag ]]></b:skin> e acima dela cole:

#menucp { /* menu de círculos por Chovendo em Paris */

background: #fbfbfb; /* fundo do círculo */

text-shadow: 1px 1px 0 #FFFFFF; /*sombra do texto */ 

border: 1px solid #eeeeee; /* borda */ 

color: #cd5c5c; /* cor do texto */ 

font-family: Georgia; /* fonte do texto */ 

font-size: 11px; /* tamanho da fonte */

text-align: center;

padding-bottom : 8px;

padding-left : 10px;

margin-bottom: 8px;

padding-right: 10px;

padding-top: 8px;

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

border-radius: 30px;

}

#menucp:hover {

background: #ffffff; /* cor do fundo quando passar o mouse */ 

text-shadow: 1px 1px 0 #FFFFFF; /* sombra do texto quando passar o mouse */

border: 1px solid #eeeeee; /* borda quando passar o mouse */

color: #cd5c5c; /* cor do texto quando passar o mouse */

padding-bottom : 8px;

padding-left : 10px;

margin-bottom: 8px;

padding-right: 10px;

padding-top: 8px;

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

border-radius: 30px;

}

O código é um pouco grande, mas é tudo pelo bem do círculos /o/ Continuando, altere tudo que está indicado, depois disso é só salvar. Agora, adicione um novo gadget, indo em Layout ›› Adicionar um gadget ›› HTML/Javascript. E então é só colar isso:

<center><a id="menucp" a="" href="http://link1.com.br/">1</a>

<a id="menucp" a="" href="http://link2.com.br/">2</a>

<a id="menucp" a="" href="http://link3.com.br/">3</a>

<a id="menucp" a="" href="http://link4.com.br/">4</a>

<a id="menucp" a="" href="http://link5.com.br/">5</a>

<a id="menucp" a="" href="http://link6.com.br/">6</a>

</center>

Depois é só trocar os links e salvar. Aconselho a não tirar os números que estão no nome do link, se não não vai continuar um círculo perfeito. Então é isso u3u até mais seus gordos, comentem nesta postagem ok? 

Um beijo na bunda ^w^