Menu de círculos em cima da sidebar

Bom dia! Me desculpem pela demora para postar, eu prometo que vou tentar trazer posts com mais frequência <3 ah, e em breve trarei um layout free para vocês! Enfim, hoje trouxe um tutorial de um menu que eu acho muito fofo, e é bem simples e discreto ;3 (cliquem aqui para verem) e o propósito é que ele fique em cima dos gadgets, então também vou ensinar a deixar apenas um dos gadgets (no caso o do menu) transparente. Espero que gostem >u<

O primeiro passo é colar o seguinte código acima de ]]></b:skin>:

#menudecírculos { background: #COR; /* cor de fundo do menu */ text-shadow: 1px 1px 0 #COR; /* sombra do texto */ border: 1px solid #COR; /* borda */ color: #COR; /* cor do texto */ font-family: Georgia; /* fonte do texto */ font-size: 11px; /* tamanho da fonte */ text-align: center; /* alinhamento do texto */ padding-bottom : 8px; padding-left : 10px; margin-bottom: 8px; padding-right: 10px; padding-top: 8px; -webkit-border-radius: 30px; /* não altere */ -moz-border-radius: 30px; /* não altere */ border-radius: 30px; /* não altere */ -webkit-transition-duration: .60s; } #menudecírculos:hover { background: #COR; /* cor do fundo hover */ text-shadow: 1px 1px 0 #COR; /* sombra do texto hover */ border: 1px solid #COR; /* borda hover */ color: #COR; /* cor do texto hover */ padding-bottom : 8px; padding-left : 10px; margin-bottom: 8px; padding-right: 10px; padding-top: 8px; -webkit-border-radius: 30px; /* não altere */ -moz-border-radius: 30px; /* não altere */ border-radius: 30px; /* não altere */ -webkit-transition-duration: .60s; }
Faça as alterações e salve. Agora, adicione um gadget HTML/JavaScript e nele cole:

<a id="menudecírculos" a="" href="LINK">1</a> <a id="menudecírculos" a="" href="LINK">2</a> <a id="menudecírculos" a="" href="LINK">3</a>
Você pode substituir os números por letras, símbolos ou o que quiser. Só coloquei até o número 3 na caixinha, mas se quiser colocar mais é só continuar a sequência (ou não, pode ser fora de ordem também, nada contra :p). Bom, agora que já temos o menu pronto, só falta fazer o gadget do mesmo ficar transparente. (Antes de tudo, eu recomendo que você coloque o gagdet do menu como o primeiro, é só ir em "layout" e trocar a posição dele).

O que vamos fazer agora eu aprendi no falecido Cherry Bomb, que é editar um gadget específico da sidebar, ou seja, a sua edição vai valer apenas para o gadget que você escolheu, fazendo com que ele seja diferente (o diferentão, 7 bilhões de gadgets mas ELE).

Preste atenção para não se confundir nessa parte! A primeira coisa que você vai fazer é abrir seu html e, apertando ctrl+f, procurar pelo nome que você deu ao gadget do menu, e vai encontrar o seguinte:

(clique para ver melhor)

Veja que onde aparece o nome do gadget vai aparecer algo como 'HTML1', 'HTML2' etc, o que você vai fazer é pegar isso, que representa o gadget (por exemplo, se eu quisesse o gadget "mais acessados" eu teria que pegar o 'HTML3') e vamos usar isto no código seguinte, que deve ser colado também acima de ]]></b:skin>:

#HTMLX {
background: transparent; /*Cor de fundo do gadget*/
}
#HTMLX h2 {
/*Estilos para o título do gadget*/
font-family: Verdana;
color: transparent;
font-size: 1px;
background-color: transparent;
}

A única coisa que você vai alterar do código é, obviamente, o "X", que você vai substituir pelo que você conseguiu pesquisando o nome do gadget. Ah, algo importante: se seus gadgets tiverem borda embaixo ou algo assim, pode ser que ela apareça, então você vai ter que adicionar a borda ao código acima porém colocá-la transparente, assim:

border-bottom: 1px transparent;
Visualize para ver se funcionou, e se tiver ocorrido tudo bem, este será o resultado: {♥} eu borrei a imagem porque este é um layout que fiz há muito tempo e que pretendo transformar em um layout free, então é para não estragar a surpresa ^u^ espero que não tenha ficado confuso.. caso tenham alguma dúvida, ficarei feliz em ajudar! Até mais o/