Twitter Delicious Facebook Digg Stumbleupon Favorites More

Tutorial Navbar Personalizada com Submenus

Nesse post vou mostrar como inserir a navbar (barra de navegação) acima (do template Revolution Church) no seu blog. Ela ja possui recursos formatados como a caixa de pesquisa e o menu suspenso. Além disso é uma navbar dupla (duas navbars junta, uma em cima e outra em baixo).

 

Então, mãos a obra!

 

1 - Primeiramente, vá o código HTML do seu template. Clique em "expandir modelo de widget".

Copie o código CSS abaixo e cole-o no CSS do seu template; antes da tag de fechamento ]] ></b:skin> (local onde aparece a formatação visual do blog) :

 

1.1 - Se seu template não possui navbar pode colá-lo abaixo de;

#outer-wrapper {
  font: $bodyFont;
}

1.2 - Se ja possui navbar, substitua o código CSS da sua navbar pelo código CSS da nova navbar dado abaixo.

 

#NavbarMenu {
    background: #555 url(http://2.bp.blogspot.com/_kMUpUqMmduA/SVU82PLeYMI/AAAAAAAAA6c/R8Ip5ZMFIh8/s1600/navbar.png);
    width: 960px;
    height: 35px;
    font-size: 12px;
    font-family: Arial, Tahoma, Verdana;
    color: #FFF;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
#NavbarMenuleft {
    width: 680px;
    float: left;
    margin: 0;
    padding: 0;
}
#NavbarMenuright {
    width: 280px;
    font-size: 11px;
    float: right;
    margin: 0;
    padding: 6px 0 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: 16px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    margin: 0;
    padding: 9px 15px 8px;
}
#nav li a:hover, #nav li a:active {
    background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU-vl5H-bI/AAAAAAAAA68/U4rkLsg0HqE/s1600/navhov.png);
    color: #FFF;
    margin: 0;
    padding: 9px 15px 8px;
    text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
    background: #555;
    width: 150px;
    color: #FFF;
    font-size: 14px;
    font-family: Georgia, Times New Roman;
    font-weight: normal;
    text-transform: lowercase;
    float: none;
    margin: 0;
    padding: 7px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#nav li li a:hover, #nav li li a:active {
    background: #777;
    color: #FFF;
    padding: 7px 10px;
}
#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;
}
#searchform {
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: inline;
}
#searchbox {
    background: #EEE !important;
    width: 220px;
    color: #202020;
    font-size: 12px;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    font-weight: normal;
    margin: 0;
    padding: 4px 0 3px 5px;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
    display: inline;
}
#searchbutton {
    background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU83AJh2SI/AAAAAAAAA60/cBmw4fQjzF8/s1600/topnav.png);
    color: #FFF;
    font-size: 11px;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    margin: 0 0 0 5px;
    padding: 3px 3px 2px;
    font-weight: bold;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
}
#subscribe {
    margin: 0;
    padding: 5px 0 0;
    overflow: hidden;
}
#subbox {
    background: #EEE !important;
    width: 200px;
    color: #202020;
    font-size: 12px;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    font-weight: normal;
    margin: 5px 0 0;
    padding: 3px 0 3px 5px;
    border-top: 1px solid #666;
    border-right: 1px solid #DDD;
    border-left: 1px solid #666;
    border-bottom: 1px solid #DDD;
    display: inline;
}
#subbutton {
    background: #555 url(http://1.bp.blogspot.com/_kMUpUqMmduA/SVU83AJh2SI/AAAAAAAAA60/cBmw4fQjzF8/s1600/topnav.png);
    color: #FFF;
    font-size: 11px;
    font-family: Georgia, Times New Roman, Trebuchet MS;
    margin: 0 0 0 7px;
    padding: 3px 3px 2px;
    font-weight: bold;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
}
#name, #email, #url {
    background: #EEE !important;
    width: 250px;
    color: #202020;
    font-size: 12px;
    font-weight: normal;
    margin: 5px 0 0;
    padding: 3px 0 3px 5px;
    border-top: 1px solid #666;
    border-right: 1px solid #DDD;
    border-left: 1px solid #666;
    border-bottom: 1px solid #DDD;
    display: inline;
}
#submit {
    background: #7B7B7B;
    color: #FFF;
    font-size: 11px;
    font-family: Arial, Tahoma, Verdana;
    margin: 0;
    padding: 3px 3px 2px;
    font-weight: bold;
    border-top: 1px solid #DDD;
    border-right: 1px solid #666;
    border-left: 1px solid #DDD;
    border-bottom: 1px solid #666;
}
#words {
    background: #EEE;
    width: 460px;
    color: #202020;
    font-size: 12px;
    font-weight: normal;
    margin: 5px 0 0;
    padding: 3px 0 3px 5px;
    border-top: 1px solid #666;
    border-right: 1px solid #DDD;
    border-left: 1px solid #666;
    border-bottom: 1px solid #DDD;
    display: inline;
}
#subnavbar {
    background: #666;
    width: 960px;
    height: 24px;
    color: #FFF;
    margin: 0;
    padding: 0;
}
#subnav {
    margin: 0;
    padding: 0;
}
#subnav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#subnav li {
    list-style: none;
    margin: 0;
    padding: 0;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
    color: #FFF;
    display: block;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    margin: 0 5px 0 0;
    padding: 6px 13px;
}
#subnav li a:hover, #subnav li a:active {
    background: #888;
    color: #FFF;
    display: block;
    text-decoration: none;
    margin: 0 5px 0 0;
    padding: 6px 13px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
    background: #666;
    width: 140px;
    float: none;
    margin: 0;
    padding: 6px 10px;
    border-bottom: 1px solid #FFF;
    border-left: 1px solid #FFF;
    border-right: 1px solid #FFF;
}
#subnav li li a:hover, #subnav li li a:active {
    background: #888;
    margin: 0;
    padding: 6px 10px;
}
#subnav li {
    float: left;
    padding: 0;
}
#subnav li ul {
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    width: 160px;
    margin: 0;
    padding: 0;
}
#subnav li ul a {
    width: 140px;
}
#subnav li ul ul {
    margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
    left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
    left: auto;
}
#subnav li:hover, #subnav li.sfhover {
    position: static;
}

 

 

2 -  Agora, a partir da tag <bady> encontram-se os códigos na posição em que aparece no blog . Ou seja, é a estrutura do seu blog.

Aqui, vamos procurar (Ctrl+F) por:

<div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Gestor Empreendedor (Cabeçalho)' type='Header'/>
</b:section>
    </div>

E colar abaixo do código acima, o seguinte código (As marcações em vermelho estão em inglês, representam o nome do link. Formate da maneira como desejar):

 

* Lembre-se de adequar a id da sua antiga navbar à nova. Ex.: Se, depois de bady, a navbar era identificada por <div id="navbar"> , substitua pela nova identificação da navbar <div id='navbarmenu'>. Ou, simplesmente, cole a nova navabar inteiramente em cima do código da antiga.

<div id='NavbarMenu'>
       <div id='NavbarMenuleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Sample Page</a>
          <ul>
            <li>
              <a href='#'>Sub Page #1</a>
              <ul>
                <li><a href='#'>Sub Sub Page #1</a></li>
                <li><a href='#'>Sub Sub Page #2</a></li>
                <li><a href='#'>Sub Sub Page #3</a></li>
              </ul>
            </li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
            <li><a href='#'>Sub Page #4</a></li>
            <li><a href='#'>Sub Page #5</a></li>
          </ul>
        </li>
        <li><a href='#'>Sample Post</a></li>
        <li><a href='#'>Blog Page</a></li>
      </ul>
    </div>

    <div id='NavbarMenuright'>
      &lt;form action=&#39;/demo/church/index.php&#39; id=&#39;searchform&#39; method=&#39;get&#39;&gt; &lt;input id=&#39;searchbox&#39; name=&#39;s&#39; onblur=&#39;if (this.value == &#39;&#39;) {this.value = &#39;Search this website...&#39;;}&#39; onfocus=&#39;if (this.value == &#39;Search this website...&#39;) {this.value = &#39;&#39;;}&#39; type=&#39;text&#39; value=&#39;Search this website...&#39;/&gt; &lt;input id=&#39;searchbutton&#39; type=&#39;submit&#39; value=&#39;GO&#39;/&gt;&lt;/form&gt;
    </div>
  </div>

<div style='clear:both;'/>

    <div id='subnavbar'>
      <ul id='subnav'>
        <li>
          <a href='#'>Community Events</a>
          <ul>
            <li>
              <a href='#'>Sub Category #1</a>
              <ul>
                <li>
                  <a href='#'>Sub Sub Category #1</a>
                </li>
                <li>
                  <a href='#'>Sub Sub Category #2</a>
                </li>
                <li>
                  <a href='#'>Sub Sub Category #3</a>
                </li>
              </ul>
            </li>
            <li>
              <a href='#'>Sub Category #2</a>
            </li>
            <li>
              <a href='#'>Sub Category #3</a>
            </li>
          </ul>
        </li>
        <li>
          <a href='#'>Conferences</a>
        </li>
        <li>
          <a href='#'>Get Connected</a>
        </li>
      </ul>
    </div>

<div style='clear:both;'/>

Pronto. Agora você tem no seu blog, uma navbar personalizada e cheia de recursos igual a do Dicas Plugins.

 

Dúvidas? Pergunte nos comentários.

38 comentários:

casadospassaros disse...

muito bom o tutorial, tava procurando já tinha um bom tempo
Vlw pela ajuda

incommunseries.com disse...

Amigo sei que aqui não é lugar certo..
Tem como vc ajudar? Como colocamos widgets dos mais acessados do nosso blog
Abraços

Willian Coutinho disse...

Amigo, os mais acessados é manual e depende de você mesmo ir atualizando.

Não existe ainda uma widget para mais acessados, pelos menos não conheço. No UsuárioCompulsivo, por exemplo, ele faz os mais acessados manualmete conferindo quais posta são mais acessados através do Adsense e colaca uma widget na forma de lista de links.

pessoaordinaria disse...

As suas dicas são sempre boas! Passa lá no blog, tem um selo pra ti.

Surf Movies disse...

Sempre uso teu blog pra tirar algumas dúvidas sobre algo que quero fazer. Agora estou necessitando de submenus em minha navbar ja colocada, queria apenas colocar submenus ou na minha própria. Fui tentar entender e nào entendi como fazer isso no 1o passo em: "Copie o código da caixa de texto abaixo e cole-o no CSS (local onde aparece a formatação visual do blog".

E outra coisa, preferia o outro template. Este é meio confuso e complicado. Muito poluído. O primeiro era mais simples.

Valeu, abraços!

Willian Coutinho disse...

Em breve vou criar um post separado somente de como adicionar submenus à navbar.

Equipe disse...

amigo, nao entendi nada dessa barra, aonde fica o lugar pra por os links ? o.o

Willian Coutinho disse...

existem navbars automáticas em que vc adiciona uma lista de links em elementos de páginas, mas esta você deve adicionar através do código HTML do seu template.

No tutorial acima é onde tem Subpage #1 etc... e Smaple page, etc...

Equipe disse...

Pedido: cara tem como colocar a linkbar do template debaixo do cabeçalho?

por exemplo: a minha la no layout ela fica em cima do cabeçalho, nao tem como por para baixo né?

Willian Coutinho disse...

Tem sim. Você deve fazar as alterações a partir de (body).

Exemplo:
se no seu template a div navbar vem antes da div header na parte de estrutura do blog (a partir da tag body), recorte-a e cole depois.

Para visualizar melhor a estrutura, NÃO expanda modelos de widgets. Vc vai identificar mais facilmente do que é que estou falando.

Equipe disse...

sorry amigo mais essa navbar dupla não funciona.

veja um exemplo nesse site:

www.blogtestejb.blogspot.com

debaixo do cabeçalho :o

Willian Coutinho disse...

A sim. Aquele código CSS da caixa de text estava com problemas.
Já substituí e testei. Utiliza o novo código CSS que coloquei. Funcionou corretamente.

JakRed disse...

Looollll aqui vai como editar esta barra, você não soube colocar.

Antes de cada palavra que aparece tem a tag href='#'

No lugar de # você coloca o link para onde a palavra vai redirecionar...

espero ter ajudado hein ;D
lembrando: Sou o Equipe! :o

JakRed disse...

Infelizmente essa navbar eh muito fraca, ela não aceita letras maiusculas nem acentos


da uma olhada de como ela fica linkada

www.blogtestejb.blogspot.com

;D

JakRed disse...

OBS: o link pra download desse template n funca

Willian Coutinho disse...

Link atualizado para o template Revolution Church

Willian Coutinho disse...

JakRed, isso tudo é uma questão de personalizar o código CSS do navbar. Existem várias alterações que podem ser feitas.

Por exemplo, procure por text-transform: uppercase; e delete-o que será possível aterar as letras na subnavbar (a de baixo). Altere todos os text-transform.

JakRed disse...

Ow me tira uma duvida ai

como tira o sublinhado????

;D

Willian Coutinho disse...

Encntre esse código:

#topnavbar a:hover {
text-decoration: underline;
}
E delete-o por completo. Hover, em html, significa quanto mause está sobre o link.
Ou procure, simplesmente por:

a:hover {
text-decoration: underline;
}
e delete-o, é o hover do blog em geral.

JakRed disse...

não achei essas tags

#topnavbar nao tem

e a:hover { seguido de text-decoration n tem tbm

JakRed disse...

achei um site com o teu template revolution

fã site oficial de habbo

www.habboact.net

me ensina a tirar o adsense do banner?? nesse template???

akele do habboact ta todo editado muito bom...

JakRed disse...

consegui, ow como coloca imagens do lado de cada nome nessa barra???

veja um exemplo nesse site que usa o msmo template:

www.HabboAcT.net

agraeço se souber

Willian Coutinho disse...

Simples amigo. Veja:

(img src='linkdaimagem' width='largura' height='altura'/) Sample PageAssim a imagem tbm será um link, mas pode colocar também antes de (a href...

Willian Coutinho disse...

Simples amigo. Veja:

(a href='#')(img src='linkdaimagem' width='largura' height='altura'/) Sample Page (/a)
Assim a imagem tbm será um link, mas pode colocar também antes de (a href...

Willian Coutinho disse...

Sobre o adsense do banner, é só vc procurá-lo no código html do template e deletá-lo.

JakRed disse...

Como eu coloco adsense nakeles banners que ja vem pronto no template revolution??


Agradeço

Pr Elder Sacal Cunha disse...

Olá amigo
utilizo o template Revolution Church em meu blog (http://eldersacalcunha.blogspot.com)
e gostaria de saber como configurar o menu suspenso da navbar. Gostaria de efetuar a mudança dos títulos e como linkar as postagens?
Grato
Elder

ExiliaEths disse...

Olá amigo tudo bem?
Tenho uma dúvida, Na hora de configurar a Busca do blog ele não encontra a pagina o que devo fazer ? Obrigado e parabéns pelo Blog ;)

Willian Coutinho disse...

Exilia, para configurar a busca, vc deve copiar e colar um código de busca de blogs no local apropriado. Para isso, vá na categoria "Caixa de Busca" do Dicas Plugins e copie e formate o código que desejar. Após isso, cole no local da navbar.

(div id='NavbarMenuright')
---código de busca aqui----
(/div)

ExiliaEths disse...

ahh ta é porque esse template vem com uma caixa de busca padrão neh ? vou fazer o que você disse muito Obrigado Willian e desculpe a demora a responder....
Uma outra coisa aqui, nesse template tem como tirar esse preto encima e colocar uma banner do tamanho dele ? exemplo.

http://img134.imageshack.us/img134/9211/imagemkpz.jpg

Como pode ver na imagem eu coloquei uma bannerzinha só pra tapa o buraco ali mais eu queria colocar uma banner grande do tamanho da faixa mesmo entendeu ? =/

Willian Coutinho disse...

Exilia, respondido em Template Revolution Church.
Confere lá. Obrigado.

BB disse...

Titio da pra falar a nossa lingua?nao entedi bulhufas!

Willian Coutinho disse...

BB, acerca de quê você não entendeu?

yzadoraMatos . disse...

queria saber onde coloco os links. num to dando conta de arrumar ele. alguem ai me ajuda?

mirella fabri disse...

como faz pra editar a cor ou adicionar imagem no titulo do gadget?
e também como muda edita essa imagem (B) do navbar?

Cobrão Downloads disse...

cara, como eu faço para tira o sublinhado, eu tentei o que você falo lá no comentário do outro, mais o que eu apago com hover? tudo ?.

e tbm queria saber, como faço pra navbar pega o Maiusculo e acentos ?

Professora Fabiana Dauhs disse...

OI não consegui fazer isso não deu certo no meu blog, faz tempo que quero colocar menus e submenus e não consigo edutá-los depois

Anônimo disse...

cara arruma esse seu blog,postagem de + na pagina início e fica pesado, e tenho net de 1mb.

Postar um comentário

Envie um comentário!

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Blogger Templates