Tutorial - Menu no lugar da navbar


Boa tarde, pessoal. Desculpe, pela falta de post, nesses dias.Estava com o teclado do meu Computador quebrado e tive que troca-lo. Minhas aulas começam amanhã, e estou sem muito tempo para ficar postando,aqui. Se perceberem que estou sem postar, é culpa da minha escola. Talvez só poste 1 ou 2 vezes por semana. Bom, não estou aqui para falar da minha vida, e sim sobre o post de hoje. Trouxe para vocês um tutorial de como colocar um menu no lugar da navbar.
Créditos: Sim senhorita
Vá em ]]></b:skin> e acima cole o seguinte código:

#NavbarMenu {
width: 100%;
height: 30px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 0;
background-color: #000000;
}
#NavbarMenuleft {
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 270px;
font-size: 12px;
float: right;
margin: 0;
text-align: right;
padding-top: 6px;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #FFF;
display: block;
font-size: 12px;
font-family: Trebuchet MS, Arial;
font-weight: normal;
text-transform: lowercase;
margin: 0;
padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
color: #fff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #0D0D0D;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
width: 150px;
color: #FFF;
font-size: 12px;
font-family: Trebuchet MS, Arial;
font-weight: normal;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
background-color: #0D0D0D;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF;
padding: 7px 10px;
background-color: #0D0D0D;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;height: auto;
width: 170px;
margin: 0;padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
Salve. Por enquanto não aparecerá nada. Clique em "expandir modelos de widget". Localize  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'> e logo abaixo coloque o seguinte código:


<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li>
<a href='ENDEREÇO DO SEU LINK AQUI'>Link 1</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #1.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 2</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #2.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 3</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #3.5</a></li>
</ul>
</li>
<li><a href='ENDEREÇO DO SEU LINK AQUI'>Link 4</a>
<ul>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.1</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.2</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.3</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.4</a></li>
<li><a href='ENDEREÇO DO SEU SUBLINK AQUI'>Sub Link #4.5</a></li>
</ul>
</li>
</ul>
</div>
</div>
<div style='clear:both;'/>
Clique em visualizar veja se apareceu, e se sim, vá editando as páginas. Gente, eu não sei direito o que tem que colocar nos lugares pois o tutorial não fui eu que fiz.

Se você quiser tirar a navbar, procure por ]]></b:skin> e coloque acima o seguinte código:

#navbar-iframe { height:0px; visibility:hidden; display:none }
Espero que tenham gostado. Beijos.

14 comentários:

  1. acheo que vou tentar por no meu blog! rsrs, vou por os créditos obvio bjs ;*

    juventudedamoda-br.blogspot.com.br

    ResponderExcluir
  2. Ps: você tirou meu blog dos afiliados? Pq? :// bjs ;*

    http://juventudedamoda-br.blogspot.com.br

    ResponderExcluir
  3. Nossa deve ficar lindo irei usar em um de meus lays consertesa *-*
    O seu nov lay fico lindo!!1 bjus

    ResponderExcluir
  4. Gente, eu estou começando com o meu blog agora, e queria muito que vocês me ajudassem ^-^ basta seguir e comentar, me ajudem? por favorzinho ?! *-*

    http://reinadodasotomeskawaiis.blogspot.com.br/

    ResponderExcluir
  5. Flor,irei lhe tirar dos afiliados se você não comentar lá no mínimo três vezes no mês!Estão nas regras,e você não está as comprindo '~'

    Adorei o tutorial,é ótimo!Só não uso,pois a minha navbar é boa,tenho preguiça de ir no layout,então com a navbar fica mais fácil ^3^

    Beijos-ChilliLovers123.Blogspot.Com ♥

    ResponderExcluir
  6. Flor Atualizei lá no blog com vídeo, tem selo pra você lá, beijos http://meninascapricho-dada.blogspot.com.br/2013/03/video-selo.html

    ResponderExcluir
  7. ameei essa dica

    segue? http://papodabru.blogspot.com.br/ - sigo todos de volta ! bj ;

    ResponderExcluir
  8. Adorei o Blog! Já estou seguindo!Segue de volta por favor?
    Beijos
    http://foreveryoungeer.blogspot.com.br/

    ResponderExcluir
  9. Oi ta tendo uma campanha em vários blogs chamada diga não ao preconceito, queria saber se você quer participar, é só ver esse post (http://juventudedamoda-br.blogspot.com.br/2013/03/diga-nao-ao-preconceito.html) e responder as mesmas perguntas aqui no seu blog ^~^ beijos Fernanda

    ResponderExcluir
  10. Olá não deu certo ficou tudo preto e sumiu varias coisas, e agora?

    Bjs.

    ResponderExcluir
  11. Eu adorei o blog :33 Esse tutorial foi super útil, tava louca atrás de um menu assim.

    E pra quem tá confuso sobre a parte do #NavbarMenu {, é puro css, deem uma lida e se vocês tem um inglês por mínima coisa que seja já vão sacar tudo :3 Mas eu fiz isso, se alguém quiser pegar.

    #NavbarMenuleft {
    float: left;
    margin: 0;
    padding: 0;
    }
    #NavbarMenuright {
    width: 270px;
    font-size: 12px;
    float: right;
    margin: 0;
    text-align: right;
    padding-top: 6px;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    }
    #nav {
    margin: 0;
    padding: 0;
    }
    #nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    }
    #nav li a, #nav li a:link, #nav li a:visited {
    color: #FFF; /* cor do link que você já clicou alguma vez */
    display: block;
    font-size: 12px;
    font-family: Trebuchet MS, Arial;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 9px 15px 8px;
    }
    #nav li a:hover, #nav li a:active {
    color: #fff; /* cor do link que você acabou de clicar */
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
    background-color: #0D0D0D;
    }
    #nav li li a, #nav li li a:link, #nav li li a:visited {
    width: 150px;
    color: #FFF;
    font-size: 12px;
    font-family: Trebuchet MS, Arial;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    background-color: #0D0D0D;
    }
    #nav li li a:hover, #nav li li a:active {
    color: #FFF; /* cor hover do link que você acabou de clicar */
    padding: 7px 10px;
    background-color: #0D0D0D;
    }
    #nav li {
    float: left;
    padding: 0;
    }
    #nav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;height: auto;
    width: 170px;
    margin: 0;padding: 0;
    }

    eu só coloquei o básico mas as propriedades básicas pra vocês entenderem melhor (aquilo que suponho que seja o básico que todos querem mudar):

    font-family: é a fonte do menu
    font-size: tamanho da fonte
    font-weight: se trata do espaço entre as letras
    text-transform: tranformar todas as letras de uma forma
    ex: text-transform: lowercase; > letras todas em minúsculo. O oposto de lowercase seria uppercase (e caso você não queira nem upper nem lower, apague toda a linha text-tranform)
    background-color: cor do fundo

    lembrando que cada abertura de chave
    ex: #nav li a:hover, #nav li a:active {

    se trata de uma parte do menu, no exemplo acima nós estaríamos mexendo na aprte do menu em relação aos links ativos (por ex: você clicou em 'faq' e agora está naquela página, o link fica de outra cor) e nos hovers

    só pra quem não sabia : > achei que seria legal dar uma ajudada

    ResponderExcluir
  12. Desculpe mas, esse tutorial foi uma bosta ♥ Eu não gostei, mas seu blog é lindo :33

    ResponderExcluir
  13. Nossa fiquei encantada com seu blog! me ajuda rsrs
    eu quero deixar um espaço personalizado na parte de cima do meu blog assim como o seu mas nao sei como!!! me jauda?!

    ResponderExcluir