31/10/13
 |
| www |
Oyahou!
Tá, eu sei que ainda há muita gente atarefada com os layouts de halloween e tudo o mais, mas embora eu goste do halloween, cá em Portugal não se festeja. Portanto, eu já comecei a preparar o lay de natal. Acontece que eu 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 ensinei ainda há pouco. 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ê não quiser usar no topo e sim de lado, escolha a mesma altura (height) nas duas partes do html - sem e com hover - e mude apenas a largura (width), por exemplo, 10px e 100px. Faça as mudanças que precisar, como já disse.
Como bónus, aqui estão as imagens que eu usei, pode usar à vontade.
~Se usar, credite o Forever Sapo.~
Ja nee ^^
