13/04/2014

Tutorial ♥Blog - Menu Navbar

Nova Ilustração >w<
Yoo Bolitos >ww<
Tão bons \o/ ? Eu bem u3u, que acham da nova ilustração \o, eu tava no ps e tava a fazer a ilustração, e apeteceu-me fazer uma nova, essa tá um pouco parecida à outra, mas retirei e coloquei outras personalizações ^^
Hoje vim vos ensinar a colocar o Menu Navbar >w<
Leia Mais >w<
Créditos:  
Então vamos lá \o\
Vamos em Modelo>HTML
E fazem CTRL+F e procuram por ]]></b:skin> e em cima colam o seguinte codigo:
.bar_top {
width: 100%;
height: 31px;
background: #47a9d7; /* cor do fundo */
}
.menu_barrax {
float: center;
margin: 0;
padding: 0;
}
.menu_barrax li {
float: left;
list-style: none;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial;
text-transform: uppercase;
border-right: 4px none #dddddd; /* deixe essa cor */
margin: 0 0 0 10px;
padding: 9px 0px 0px 0px;
text-shadow:0 1px #267ca4;  /* sombra das letras */
}
.menu_barrax li a{
background: #47a9d7;  /* cor do fundo, deixe a mesma que o de cima */
padding: 10px;
color: #fff;  /* cor da letra*/
text-decoration: none;
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.menu_barrax li a:hover {
text-decoration: none;
color: #4aaddc;  /* cor da fonte em hover*/
background: #1b93cd;  /* cor do fundo em hover */
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
text-shadow:0 1px #0d1c27;  /*cor da sombra do texto em hover */
}
.transit {
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.bar_topd {
width: 900px;
margin: 0 auto;
}
Só personalizarem as cores, de resto não mexam só se souberem mexer com html e códigos~
Agora vamos procurar por </head> e cole :
<center>
<div class='bar_top'>
<div class='bar_topd'>
<ul class='menu_barrax'>
<li><a href='SEU LINK' title='Volte para a homepage'>Inicio</a></li>
<li><a href='SEU LINK' title='TITULO'>NOME</a></li>
<li><a href='SEU LINK' title='TITULO'>NOME</a></li>
<li><a href='SEU LINK' title='TITULO '>NOME</a></li>
<li><a href='SEU LINK' title='TITULO'>NOME</a></li>
<li><a href='SEU LINK' title='TITULO'>NOME-</a></li>
</ul></div></div></center>
Espero que tenhas percebido >w< alguma dúvida só comentar ^^
Kissus >w<~

6 comentários:

  1. Adorei o tutorial onee *U*
    Talvez use num próximo layout u-u Talvez -q É,sabes como sou :v /apanha

    Kissus!>3<
    My Paradise

    ResponderExcluir
    Respostas
    1. Ainda bem >ww<
      Hai ò.ó eu vou lembrar-te u3u
      Kissus >w<

      Excluir
  2. ~. Nyaaah
    Sakura-Chan!! Quanto tempo não venho aqui :P
    Lembro do lay da Juvia TT.TT Saudades...
    Tudo bem, tirando a correria da escola ^.~
    Amei a imagem ^.^ Acho que sou a unica que ainda não assistiu a este filme... Ele é antigooo... Mas nunca peguei para ver. Eu amei esse menu! Vi o tutorial em outro blog e já apliquei! Lembro que é utilizado em blog de imagens se não me engano... Esse lay dos twins ficou divo +-------+

    ~. Kissus de morangos .~

    // s2loves2animes.blogspot.com //

    ResponderExcluir
    Respostas
    1. Lia-Chan desaparecida ò.ó, mas no faz mal u-u
      Ahaha, foi trocada à pouco tempo por acaso ^^
      Ainda bem >w<
      Ârigato *uuu*

      Kissus >w<

      Excluir
  3. Realmente esse menu é super fofo *-*

    ResponderExcluir
    Respostas
    1. Ainda bem que gostaste >w<, eu ainda não o usei portanto não sei se é fofo u-u''', mas no próximo lay, talvez o use \o
      Kissus >w<

      Excluir

Yoooo \o/
Vais comentar? Oh espero que sim *-*
Mas precisas de seguir só algumas regras, para o teu comentário não ser excluído
Podes divulgar o teu blog, por exemplo para eu seguir ou isso, mas tenta entrar um pouco no assunto do post ^^
Podes criticar o blog , mas de uma forma educada , assim poderei melhorar com as tuas criticas :3
Se precisares que eu poste algum Tutorial, Goodies, lays... Coisas assim, podes pedir à vontade \o
Podem enviar-me tag's, mas não prometo faze-las porque sei lá, não me dou bem com questionários nem essas cenas -u-'

Quando fores comentar não fales coisas inapropriadas que não entrem no assunto do post.
Não podes pedir parceria nos post's de Dia-Dia e isso, apenas na página de Parceria que fica aqui
Kissus da Saku saku nyan :3