Blog de Roupa nova + Menu do Cabeçalho

| |
Oi gente, se alguém entrou no blog hoje viu que ele estava fechado. Mas foi só por um tempinho, até eu dar os últimos ajustes no layout que eu fiz no meu blog de testes. Bom agora o blog tem página de goodies e créditos eu não coloquei tudo detalhadinho, mas estão todos lá! Bom eu não pretendo ficar muito tempo com esse layout deram alguns bugs mas por enquanto vamos aproveitar. E para esse post não ser completamente inútil e invisível eu resolvi postar o tutorial desse menu lindo que eu estou usando no meu cabeçalho.
Lembrando que esse menu não é meu. Ele foi feito pela Stephanie do Garota do Olhar Sincero e postado no Kawaii World. E aqui tem um live preview do menu. Bom vamos logo ao tutorial...
Vá no seu html e procure pelo famosíssimo código:
]]></b:skin>
Cole este código logo acima da tag procurada:
.menualong {background:  url('http://static.tumblr.com/0xqvkot/nksmaeg5f/9__2_.png') repeat fixed center; /* fundo */border-right: 5px solid #AFEEEE; /* cor, espessura e formato da borda direita */border-left: 5px solid #AFEEEE;  /* cor, espessura e formato da borda esquerda */ 
text-align: center; /* Alinhamento do texto */color: #FF69B4; /* cor do texto */-webkit-transition: 0.7s; /* tempo que borda demora para esticar */font-size: 8px; /* tamanho da fonte */font-family: handy; /* tipo de fonte */text-transform: Uppercase; }.menualong:hover {border-right: 50px solid #B0E0E6;  /* cor, espessura e formato da borda direita ao passar o mouse */ 
border-left: 50px solid #B0E0E6; /* cor, espessura e formato da borda esquerda ao passar o mouse */  
-webkit-transition: 0.7s;letter-spacing: 6px; /* Espaçamento das letras ao passar o mouse */color: #FF69B4;  /* cor do texto ao passar o mouse */ 
background:  url('http://static.tumblr.com/0xqvkot/nksmaeg5f/9__2_.png') repeat fixed center;  /* fundo ao passar o mouse*/ 
}@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf'); } 
Depois de ter feito isso, salve e vá em layout. Clique em Adicionar um Gadget >> HTML/javascript e cole isso:

<center><div class="menualong"><a href="link">Nome</a></div><center><div class="menualong"><a href="link">Nome</a></div><center><div class="menualong"><a href="link">Nome</a></div><center><div class="menualong"><a href="link">Nome</a></div><center><div class="menualong"><a href="link">Nome</a></div>
Onde está link, troque pelo link da sua página dããã e onde está Nome troque pelo nome da sua página. Lembrem-se plágio é crime, então se usarem dêem os créditos à Stephanie, ao GDOS e ao KW.
Kiss
Nakami

2 comentários:

  1. Ótimo tutorial !
    Com certeza colocarei este menu em meu blog :)

    Beijinhos~~> Dear Memories

    ResponderExcluir
    Respostas
    1. Só não esquece dos créditos da Ste e do Kawaii!

      Excluir