Menu de Natal

Oyahou!

Quando eu começara a preparar o lay de natal para o meu blog FS, no ano passado, andava a ver uns lays free bastante antigos do blog Chá e cupcake, até que visualizo o template "anjos em guerra"» www. Estão a notar o menuzinho em cima? Quando eu comecei a navegar na blogosfera, eu era apaixonada por ele, mas não entendia nada de html nem de layouts. 

Agora que entendo, decidi começar a usar esse menu. Apesar de tudo, eu não sei o nome dele, nem como é criado. Daí eu gastei algum tempinho a criar algo assim, e não é que é bem simples? Pelo menos o que eu inventei, pode ser usado exatamente como o efeito anns, que eu ensinarei em breve. Eu coloquei no topo, mas você também pode usar como lateral. É perfeito! *.* Prévia?

• 1. No seu HTML, procure por /b:skin
• 2. Acima dessa tag, cole o código seguinte:

@font-face {

font-family: "silkscreen";

src: url('http://static.tumblr.com/0xqvkot/7jqmgsn0m/pf_arma_five.ttf');

}

.annsnatal {

background: #fff9e0;

border: 1px dashed #ffc800;

border-radius: 0px 0px 10px 10px;

font-family: silkscreen;

font-size: 11px;

color: #FFFFFF !important;

text-align: center;

text-shadow: 1px 1px 2px #DDA0DD;

width: 70px;

height: 5px;

overflow: hidden;

padding: 4px;

float: left;

margin: 2px;

opacity: 0.6;

-webkit-transition-duration: .5s;

}

.annsnatal:hover {

background-color: #eb5959;

border: 1px dashed #cc3d3d;

border-radius: 0px 0px 10px 10px;

opacity: 1;

color: #FFFFFF !important;

text-shadow: 0px -1px 1px #cc3d3d;

height: 80px;

-webkit-transition-duration: .5s;

}

• 3. Altere as cores, bordas, opacidade, sombras e tudo o que achar necessário. Lá porque eu criei o menu, não significa que você não possa adaptar. Agora, não mexa nos números a não ser que saiba o que está fazendo!...
• 4. Agora vá ao esquema. Adicione um gadget HTML/Javascript abaixo do espaço do cabeçalho.
• 5. Não dê título. No gadget, cole o código seguinte:

<div style="margin-left: 300px; margin-top: -610px; margin-bottom: -70px; position: absolute;">

<div class="annsnatal">

<a href="LINK">

<img src="URL-DA-IMAGEM" />NOME</a></div></div>

• 6. Substitua as maiúsculas pelo link da página que quer, url da imagem e nome da página óbvio. Eu já apliquei o efeito, e as medidas que estão ali (distância da esquerda e do topo) são as que eu precisava para o meu layout, mas talvez você precise de mudar. 
• 7. Repita o código para o número de links que você quiser.

Pronto, era isto. É bem simples, se vocês não quiserem usar no topo e sim de lado, escolham a mesma altura (height) nas duas partes do html - sem e com hover - e mudem apenas a largura (width), por exemplo, 10px para 100px. Façam as mudanças que precisarem, como já disse.

Como bónus, aqui estão as imagens que eu usei, podem usar à vontade.

~Se usar, credite.~ 

Ja nee ^^