03/02/2013

Tutorial: Menu Border Along

||

Alguém ai aceita Bis? E ai como vão meus ninjas hoje? Eu vou ótima, ganhei um Headphones personalizado com pedrinhas e com meu nome nele *0* Mas trago um menuzinho chamado "Border Along "  o nome dele realmente tem tudo haver com ele. Quem crio ele foi a Live Preview. Esse menu eu aconselho para quem tem um layout pequeno e sem muitos gadgets ou para iniciantes de HTML. Mas sei que vocês vinharam pelo menu não pra ver blá blá blá, então vamos ao tutorial.


Vá em seu HTML e procure por ]]></b:skin>. Acima cole o código abaixo:

.menualong {
background:  url('http://static.tumblr.com/0xqvkot/nksmaeg5f/9__2_.png') repeat fixed center;
border-right: 5px solid #AFEEEE;
border-left: 5px solid #AFEEEE;
text-align: center;
color: #FF69B4;
-webkit-transition: 0.7s;
font-size: 8px;
font-family: handy;
text-transform: Uppercase;
}
.menualong:hover {
border-right: 50px solid #B0E0E6;
border-left: 50px solid #B0E0E6;
-webkit-transition: 0.7s;
letter-spacing: 6px;
color: #FF69B4;
background:  url('http://static.tumblr.com/0xqvkot/nksmaeg5f/9__2_.png') repeat fixed center;
}
@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}


Veja aqui a explicação do código [Imagem Aqui]

Tudo arrumado? Otimo agora vá ate seu layout e adicione um Gadget de HTML/JAVASCRIPT e dentro cole:

<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>

 A onde está 'link' você cola o endereço da página que você quer, e em Nome você coloca o nome da página. Se usarem creditem, é não esqueçam de dizer o que acharam. Beijinhos

4 comentários:

  1. Meu, que lindo o seu blog.
    Também amei esse menu.
    Ainda estou arrumando o layout do meu, quando tudo estiver pronto eu com certeza irei usar *-*
    Seguindo o/

    Beijinhos :*
    http://oppadoramas.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Thanks~ fico contente que tenha gostado do menu quanto do blog ^^

      Arigato por seguir

      Excluir
  2. Aiiwn' Ameeii , Parabéns Pelo seu Trabalho !!
    Da Uma Passadinha Lá no Meu Blog ?
    http://chococherryboom.blogspot.com.br/

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram