Criar NavBar (barra do blogspot) personalizada

Em vez de mostrar a barra padrão do blogspot que tal criar o seu próprio menu personalizado e colocar no topo da pagina no lugar da barra do blogger? Parece complicado, mas só precisamos colocar dois trechos de códigos e claro substituir os links no menu e depois de instalado poder personalizar os botões do menu como quiser.

O primeiro passo é entrar na pagina editar html do seu blog, faça um backup (na pagina editar html clique em baixar modelo completo) do seu template antes de começar isso é recomendável assim caso tenha algum problema poderá voltar ao seu modelo original facilmente. Agora vamos colocar o código de formatação (aparência) do menu, isso pode ser em qualquer parte dos códigos CSS, sugerimos colocar no inicio assim fica mais fácil localizar então quando achar body{.........} pode colocar o código abaixo antes dessa linha ou se achar mais fácil procure por ]]>
e coloque o código antes dele. É para inserir o código uma vez só falamos as duas opções para você fazer o que achar mais fácil.

#NavbarMenu {
width: 100%;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin: 0;
padding: 0;
background-color: #000033;
}
#NavbarMenuleft {
float: left;
margin: 0;
padding: 0;
}
#NavbarMenuright {
width: 270px;
font-size: 11px;
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;
}
#pesquisa {
color: #FFFFFF;
background-color: #000066;
border: 1px solid #000000;
}
#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 {
color: #FFF;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
background-color: #000099;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
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;
background-color: #000066;
}
#nav li li a:hover, #nav li li a:active {
color: #FFF;
padding: 7px 10px;
background-color: #0000CC;
}
#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;
}

Clique para salvar as alterações, ainda não é possível ver nenhuma modificação no blog. Agora vamos começar a segunda parte da instalação da sua barra de menu, clique para expandir modelos de widgets, localize <body> e logo depois dessa linha coloque isso:

<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 method=GET action=&quot;http://www.google.com.br/search&quot;&gt;
&lt;INPUT TYPE=text name=q size=25 maxlength=255 value=&quot;&quot;&gt;
&lt;INPUT type=submit name=btnG VALUE=&quot;Pesquisar&quot;&gt;
&lt;input type=hidden name=sitesearch value=&quot;endereço do seu blog&quot;&gt;
&lt;/FORM&gt;
</div>
</div>
<div style='clear:both;'/>

E já está quase pronto se clicar para visualizar o blog verá que apareceu uma barra de menu embaixo da barra padrão do blogspot, se quiser ocultar a barra padrão coloque junto com o código CSS que fizemos na primeira parte a linha:

#navbar-iframe { height:0px; visibility:hidden; display:none }

Isso ocultará a barra do blogger. Então terminamos a instalação da barra de menu no topo da pagina, mas ainda falta personalizar e fazer alguns ajustes veja que na parte <input name="sitesearch" value="endereço do seu blog" type="hidden"> precisa colocar o endereço do seu blog. Além disso, veja abaixo onde alterar a aparência da barra de menu (veja aqui como alterar cores de fonte, cor de fundo, tipo de letra dos botões), isso fazemos também no estilo CSS:

#NavbarMenu – esse é o modo normal da barra, ou seja, como ela é vista quando entramos no blog
#nav li a:hover, #nav li a:active – quando passamos o mouse sobre o menu principal


#nav li li a, #nav li li a:link, #nav li li a:visited - aparência do submenu
#nav li li a:hover, #nav li li a:active – sub menu quando o mouse está sobre ele

Os links dos menus e sub menus são fáceis de alterar: home e item que aparecem no menu são o que aparecerá quando alguém entrar no blog, os sub page é o submenu que aparece sobre o item 2 e os Sub Sub Page são os links do terceiro sub menu. Para retirar esse sub menu que aparece dentro do submenu do item 2 apague o trecho do código:

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

Veja aqui mais detalhes sobre como alterar e formatar um menu com submenu no blog. Existem outras variações que podemos fazer neste tipo de menu, mas falaremos sobre isso em outros tutoriais para não misturar demais os assuntos e também podermos falar com mais detalhes sobre as duvidas que surjam sobre esse tema.

169 comentários :

  1. Tambem adicionei no meu blog o mesmo hack "Poderá também gostar de:", e queria saber como você fez pra mudar o texto, pois no meu o mesmo vêm em inglês "You might also like:"....

    ResponderExcluir
  2. Parabéns meu amigo, muito obrigado pelo email com as informações para adicionar a 3 coluna graças a você deu tudo certo.

    se puder da uma conferida no resultado

    http://guiamd.blogspot.com

    abração

    ResponderExcluir
  3. Na segunda parte >
    Clique para salvar as alterações, ainda não é possível ver nenhuma modificação no blog. Agora vamos começar a segunda parte da instalação da sua barra de menu, clique para expandir modelos de widgets, localize e logo depois dessa linha coloque isso:
    localizar o que???

    ResponderExcluir
  4. Arthur V.A
    houve uma falha e o blog está executando o código em vez de mostrar é depois de <body>

    já fiz a correção na postagem, obrigado por avisar

    ResponderExcluir
  5. Não deu certo ...

    Acho que é porque meu template nao é adequado a essa barra ... :(

    Imagem: http://img686.imageshack.us/img686/3188/newpicture5p.png

    Parece que o blog esta lendo o Html e nao o interpretando ...

    ResponderExcluir
  6. Herrera

    pela imagem parece que houve problema somente na parte do CSS, tente retirar e colocar novamente.

    primeiro coloque o menu do jeito que está neste tutorial depois faça as edições dos links por partes e visualizando sempre pois o erro pode estar em algum detalhe nas alterações feitas

    ResponderExcluir
  7. Qui Massa Fabiano ! Vlw Aew Pela Dica !

    ResponderExcluir
  8. Oi Fabiano...
    Eu também fiz um blog com as minhas "sofridas" descobertas.
    Foi um "parto" aprender a colocar o template no primeiro blog e quando resolví fazer o segundo blog, não lembrava mais como eu tinha feito,daí eu fiz o blog pra eu mesma consultar,quando precisasse....rsrsr e acabei publicando.
    Não tive tempo de ler os posts do seu com calma, mas já deu pra perceber que vou aprender muito com voce.
    Vou te seguir e colocar nos meus favoritos.

    ResponderExcluir
  9. Opa certinho ? Comesei meu Blog/Site a um mes e tipo o seu tem cido um bom ponto de referencia,aprendi muito aqui
    e tipo queria saber sua opinião sobre minha página .
    Acha que estou no caminho certo ?
    http://www.caiuagora.com/

    ResponderExcluir
  10. Fabiano, adoro este teu blog, aliás, as dicas foram sempre daqui. Ótimas festas pra vc.

    ResponderExcluir
  11. segui os passos todos mas os menus ficaram na vertical

    ResponderExcluir
  12. Olá,Fabiano tenho uma pergunta e possivel alterar a largura de uma coluna sem modificar a imagem ?.

    ResponderExcluir
  13. RJ
    deve ter faltado alguma coisa na hora de copiar os códigos

    se o seu template for daqueles que baixa da internet pode ser que tenha alguma tag que seja utilizada nele que está gerando conflito entre os códigos, então teria que achar esse tal código e trocar

    ResponderExcluir
  14. muito bom funcionou no meu blog da uma olhada lá entra ai fmz?
    noticiasmatheusdomundo.blogspot.com/
    muito obrigado...

    ResponderExcluir
  15. agora aumenta o tamanho da letra

    ResponderExcluir
  16. eu queria saber como botar apenas a barra de pesquisa pop=ois tentei copiar apenas a parte da pesquisa mas dá erro
    resposta pelo email=lucasl.j23@hotmail.com

    ResponderExcluir
  17. tem que ter cuidado na hora de alterar o código para não apagar ou colocar caracteres além do que deveria

    ResponderExcluir
  18. consegui colocar tudo mas esta a aumentar a letra pode ver aqui
    http://soutrofenseteste.blogspot.com/

    ResponderExcluir
  19. gostei ficou bom meu blog coloquei seu link na minha página ta bom olha la

    ResponderExcluir
  20. Olá pela 1° vez estou visitando seu blog e amei vou visitar sempre e claro sempre vou te pedir para tirar algumas duvidas.........
    Parabéns quero ser criativa e tão competente como vc.......

    ResponderExcluir
  21. da uma olhada no meu blog, é do club que eu jogo, eu sou leigo, e o que eu vou fazendo é do jeito que eu consigo, da uma olhada no meu blog http://novaiguacuhandebolclube-ceas.blogspot.com/ e ve os links que eu coloquei, eu queria colocar abarra de links = esta a sua uma do lado da outra e quando passar o muse sobre mudar a cor, o meu eu só dei uma enganada, a barra que eu falo ñ sei o nome é onde esta escreito, inicio - historia - destaques -

    tem como vc dar uma ajuda. me add no msn p vc ir me explicando

    jorginho_jof@hotmail.com

    ResponderExcluir
  22. Nova Iguaçu Handebol Clube / CEAS

    veja aqui sobre menu horizontal, deve ser isso que está procurando

    http://www.dicasparablogs.com.br/2009/05/links-lado-lado-menu-horizontal.html

    ResponderExcluir
  23. Muito boa sua dica Fabiano !

    mas uma coisa, voce poderia me ajudar?

    em ves de colocar aquele menu, eu gostaria de colocar um player de rádio online, daqueles grandes que geralmente ficam la em cima onde era a barra do blogspot.

    isso é possivel? voce poderia me ajudar?

    muito obrigado!

    ResponderExcluir
  24. Léééoo ;D
    sei quais radios está falando eu já vi mas não lembro de qual é.

    mas quando achar um site com uma dessas radios provavelmente se clicar em algum link da radio será fácil achar o código para colocar no seu blog também

    ResponderExcluir
  25. AI QUE LEGALLLLLLLLLLLLLLLLLLLLLL
    Gente eu procurei varios geradores de menu CSS nunca achei algum que pegasse agora achei outro geito

    ResponderExcluir
  26. Vc e d + se você conseguir tenta fazer uma busca com autolimpante para eu colocar do lado a busca eu tirei o do google, quero colocar um melhor ok. VLW!

    ResponderExcluir
  27. o Google é um dos melhores buscadores, nunca usei codigos de outro

    ResponderExcluir
  28. Boa tarde Fabiano.
    Coloquei o menu em meu blog e mesmo sendo mto leiga em códigos, ficou bem legal, consegui mudar os nomes e tudo mais...
    Entretanto agora não sei como associar o que escrevo aos menus criados. Pode me orientar?

    ResponderExcluir
  29. {kailla} a kdella® de ÁTILA, veja a parte final da postagem lá é onde colocará os links no lugar onde está o sinal #

    ResponderExcluir
  30. Desculpe... eu devia ter lhe avisado que nao sei muito sobre blogs e afins... apenas sei fazer seguindo as instruçoes.
    Não sei que link diz e nem onde encontrar o que me disse: (veja a parte final da postagem lá é onde colocará os links no lugar onde está o sinal #).
    Não existe nenhuma postagem sobre isso? devo configurar alguma coisa diferente pra associar as postagens e fotos ao menu q criei no lugar da NavBar?
    obrigada.

    ResponderExcluir
  31. é nesta parte

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

    ResponderExcluir
  32. deu certo querido... mto obrigada mesmo... seu site é mto bom... parabéns.

    ResponderExcluir
  33. Meu blog é de conteúdo adulto, por isso queria lhe perguntar se posso colocar o link do seu lá. tenho mtas amigas q sofrem como eu pra montar seus blogs e vao adorar seu site. Depois dos 40 aprender essas coisas nao é muito facil...
    Por favor nao publique este comentario... sei q mtos menores visitam seu site entao acho que nao ficaria bem.
    Se vc nao for menor de idade lhe envio o endereço do blog.
    Se nao for possivel lista lo lá eu entenderei, ok?
    Obrigada mesmo pela força.

    ResponderExcluir
  34. {kailla} a kdella® de ÁTILA , pode colocar nosso link, sem problemas, alias agradecemos por divulgar nosso blog

    ResponderExcluir
  35. bom ... eu acho que seria bem legal mudar a barra ... mas eu não entendi nada de CSS ... mas mt obrigada .

    Seu site é D+ ;D

    ResponderExcluir
  36. oi fabiano!!bom eu quase consigui os problemas são eu antigamente tinha um template do PYZam e ai com o tempo eu fui alterando ele, mas o meu blog continua com uma barrinah laranja do pyzam em baixo do menu :( como eu faço para tirara ela!!E mais uma coisa como eu faço para fazer o login no meu blog ? ai me responde por favor1e parabens amei o site!tud de bom !!bjs

    ResponderExcluir
  37. Nathália e ana bia
    para conseguir alterar o template do blog precisa aprender um pouco sobre CSS não tem jeito, pois existem muitos detalhes, talvez uma letra na hora de copiar ou alterar um código faz que ele não funcione.

    ResponderExcluir
  38. não consegui estalar, achei meio complicado...
    quando tentei não apareceu a navbar mas a lista das obsões fora de ordem.
    gostaria que mandasse um email para ficolorado@terra.com.br explicando melhor...

    vlw...
    des de ja agradeço..

    ResponderExcluir
  39. Blog do Filipe
    é mesmo um pouco complicado fazer essa barra, tente novamente e cuidado com os detalhes na hora de copiar e modificar os códigos

    ResponderExcluir
  40. Cara a barra apareceu embaixo do blog e não consigo tirar aquela padrão tipo Home, etc... o que faço? me ajuda por favor

    ResponderExcluir
  41. dosalgadoaodoce , aquela barra deve ser um gadget, entre na pagina layout e exclua

    ResponderExcluir
  42. Fabiano eu estou a fim de trocar minha template então estou editando ela num blog de testes na verdade o que eu quero é colocar NavBar inteira com sub menú em que parte modifico?

    ResponderExcluir
  43. fabiano,

    Eu coloquei esta barra mas ela ficou no final do blog, como alterar?
    Este menu precisa de servidor?

    Abs,

    ResponderExcluir
  44. talvez tenha colocado o código em lugar errado, ou se usa os novos modelos do blogger in draft pode ser que o código não funcione bem nele, quando publicamos isso aqui ainda não tinha os novos modelos.

    ResponderExcluir
  45. Olá, eu tenho um blog e tentei colocar esse menu, mas quando clico no link: "(veja aqui como alterar cores de fonte, cor de fundo, tipo de letra dos botões)" que esta na pagina, vai para um lugar que mostra como fazer botoes... mas eu nao vi nada de tinta la... queria um pouco de ajuda para mudar as cores...

    ResponderExcluir
  46. Extrame Games Admin
    mas é exatamente isso, as cores são códigos se mudar as letras e numeros troca a cor, veja aqui Código das Cores

    ResponderExcluir
  47. vlw cara, ta ficando legal meu blog, eu to pegando uns codigos aqui do site, ja coloquei cores, continue assim seu site ta massa.

    e eu tenho outra duvida...

    Você falou dos menus e sub menus, e quando a gente copias os codigos e a gente coloca no blog ele ja vem com um Sub Menu pronto.

    Minha duvida é, como colocar mais um sub menu?


    depois se quizer pode entrar no meu blog, para ver como ta a barra:

    extremexjogos.blogspot.com

    ResponderExcluir
  48. para colocar mais um submenu apenas repita o trecho que mostramos no final separadamente

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

    ResponderExcluir
  49. Muito obrigado cara, vlw mesmo, eu sei que eu ja to enchendo seu saco (deve ser uma xatisse ficar respondendo pergunta toda hora...), mas se não for atrapalhar, eu queria saber como colocar um sub sub link, pra fica mais legal(como é o codigo para SUb Sub menu?)

    Muito obrigado, e desculpa por tantas perguntas chatas :P

    ResponderExcluir
  50. essa primeira parte do código é com uma sub sub pagina

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

    ResponderExcluir
  51. Brigadão mesmo cara, sem mais perguntas(não vou mais te encher o saco), agora vou te encher o saco com outros assuntos, outras dicas...

    ResponderExcluir
  52. GOSTEI TANTO DO SEU BLOG QUE O ESTOU DIVULGANDO NO MEU!!!
    MEUS VISITANTES ESTÃO ADORANDO, POI COMO EU SÃO PRINCIPIANTAS!!

    ResponderExcluir
  53. Ola! gosto muito das dicas do seu blog, eu coloquei um NavBar (barra do blogspot) personalizada do jeito que você postou no blog, mas, preciso da sua ajuda.
    os links a seguir não estão sendo aceitos, o que fazer? não entendo muito bem e gostaria que você me mandasse o código para resolver isso.Quero colocar mais dois botões com esses links e eles não estão entrando. os links são estes abaixo.
    href="#">LIVROS<

    href="http://books.google.com.br/books?id=5ZSOMkovVmoC&pg=PA64&lpg=PA64&dq=manual+pratico+do+mecanico+lauro+salles+cunha+download&source=bl&ots=0IpMogZjHu&sig=mcRfcYXHw858zf3ZWViMSavWl5M&hl=pt-BR&ei=jJ4vTMGsCoeQuAedl-nnAg&sa=X&oi=book_result&ct=result&resnum=8&ved=0CCkQ6AEwBzgK#v=onepage&q&f=false">Manual do Mecânico


    href="#">VÍDEOS<

    href="http://public.blu.livefilestore.com/y1pM7JFD3RK1dYrXNan7dln50HdEPjqHt-9DV_np7DEOpi7lT0nBq-znXTvyL5qPUQAG79s9-zGGNj6COQjZmaU7Q/Torno%20CNC.mp4?download&psid=1">Torno CNC
    href="http://public.blu.livefilestore.com/y1pchqmg6bO6If_Yzz1ZFvPFKcBJ8xs4RJ5eQY_uuQr8uZuqBEYO4DAscJy4X0nJ7y_mTyKmA0lMX7O87NVijgLiQ/MONTAGEN%20MOTOR.mp4?download&psid=1">Montagem Motor

    href="http://public.blu.livefilestore.com/y1pyQEG6jMBRJpCN6uH92odRhQzOgtMJi92bP0uvw3yt8crwfHbRmOsDScRPpydmCNCrq1qbJE15aJibhtBIQwZ4Q/Impressora%203D.mp4?download&psid=1">Impressora 3d
    href="http://public.blu.livefilestore.com/y1p6D1jRiAnCrVWsvqdH5g_EfboAkpFHuFRES7m4hCI-7pAA2_CiXwmh_q0RlyhlWBkxI0wxsr5Az6LZdt_itMaTA/Centro%20de%20Usiganem%20CAM.mp4?download&psid=1">Centro de Usinagem

    e o meu blog é esse "turma1692009.blogspot.com" para você dar uma olhada.Só não tem os outros dois botões que eu falei ao lado de "APOSTILAS" que seriam "LIVROS" e "VÍDEOS" com os links acima mencionados.
    Se puder me ajudar fico muito agradecido, e se não for pedir muito mande para o meu email "turma169.2009@hotmail.com".
    Favor não divulgue o email.
    Obrigado desde já.
    André Luiz.

    ResponderExcluir
  54. talvez esteja gerando algum conflito esses links grandes demais com variaveis e tudo mais no meio da url.

    vi o primeiro menu que colocou funcionando perfeitamente no seu blog, acho que tem que tentar fazer igual a ele, mas se não der certo, tente um site para encurtar a url(bit.ly), pode ser isso.

    ResponderExcluir
  55. Poxa! Valeu pela dica, fico muito grato, o problema estava na url que era grande demais, encurtei no site "Snipurl" e já está funcionando. Muito obrigado.

    ResponderExcluir
  56. fala ai cara.
    eu queria saber se é possível colocar senha em um determinado link do meu blog, para que apenas algumas pessoas tivessem acesso.

    ResponderExcluir
  57. não é possível colocar senha em um link, pelo menos não lembro de nenhum jeito de fazer isso no momento

    ResponderExcluir
  58. OLHA EU AQUI DE NOVO
    EU QUERIA SABER COMO COLOCAR BARRA DE ROLAGEM DENTRO DE CADA MENU DESSES, POIS VAI FICAR MUITO GRANDE CADA MENU, TENHO MUITA COISA PARA COLOCAR LÁ.
    E OUTRA COISA, QUANDO EU ABRO UM DOS MENUS O VÍDEO QUE EU POSTEI NO MEU BLOG FICA POR CIMA DE ALGUNS ITENS DA LISTA E EU NÃO VEJO O RESTO DA LISTA, COMO RESOLVER ISTO?
    EU TEMPORARIAMENTE DEI UM JEITO COLOCANDO UMA NOVA POSTAGEM DE TEXTO PARA EMPURRAR O VÍDEO PARA BAIXO. O MEU BLOG É TURMA1692009.BLOGSPOT.COM PARA VOCÊ VER. O VÍDEO QUE FICAVA POR CIMA QUANDO EU ABRIA O MENU DE VÍDEOS POR EXEMPLO ERA O "CENTRO DE USINAGEM CAM".
    ME AJUDE SE POSSÍVEL.
    VALEU.

    ResponderExcluir
  59. alguns codigo geram problemas quando usados juntos, por isso as vezes fica por baixo do video, já fiz alguns testes mas não achei como resolver.

    não tem como colocar barra de rolagem nos itens do menu

    ResponderExcluir
  60. existe um jeito.

    é só colocar este código depois da "ul". e as "li" no local determinado aqui.

    div style='height:100px; width:200px; overflow:auto; background-color: #FFFFCC;'

    div style='width:160px'

    (colocar as "li" aqui)

    div

    div

    não esqueça de colocar o sinal de maior e menor para abrir e fechar as tags em cada div que eu deixei separado por linha, pois não deu para colocar

    ResponderExcluir
  61. Eu gostaria de passar o que eu mesmo perguntei e agora encontrei.
    como fazer para proteger um link do blog com senha.
    Simples
    usando o site "http://snipurl.com/site/index", você digita o link que quer proteger e ao lado cria um usuário e senha(private key)e depois clica em snip it. ai copia a nova url e adiciona no lugar do link que você quer proteger no seu blog. você pode apenas criar a senha e deixar os outros campos vazios, fica a seu critério.
    obs: não é preciso se cadastrar no site, mas aconselho a fazer para o caso de você ter mais de um link para proteger e depois quiser editar fica mais fácil.

    ResponderExcluir
  62. André Luiz
    achei interessante o site, vou olhar melhor e talvez escrever um tutorial sobre ele.

    ResponderExcluir
  63. Fabiano Roberto, obrigado mas comigo não rolou a primira parte, não gerou a segunda Navbar... meu blog é deses novos, digo layout, tem a ver ou não?
    colei antes da linha do body e nada amiga, vc pode me ajudar?
    abcs
    Douglas

    ResponderExcluir
  64. veja se não usa os mesmos estilos CSS para outra coisa(#NavbarMenu ,#NavbarMenuleft,...)

    infelizmente em alguns templates deu problemas e não tevê como corrigir

    ResponderExcluir
  65. Fabiano, vc pode me acender uma luz? Preciso deslocar as páginas do blogger, criadas dentro do Painel, para o lugar da navbar. Na verdade ela foi escondida na página,mas continua aparecendo no layout. Tiro esse elemento de lá e o coloco em outro lugar e tento colocar no vazio deixado pela navbar o menu com as páginas que criei. Mas não fica lá em cima, bem no topo, fica sobrando um espaço bem grande que empurra meu banner para baixo. Quero encostar meu menu bem no alto. Como resolvo isso, mestre?

    ResponderExcluir
  66. fabiano keria saber como ocultar a barra navbar do blogspot? me responda por favor↓↓↓

    ResponderExcluir
  67. Amigo ,, fiz este esquema e ficou show de bola mas tem um porém,,,,ficou um espaço no lugar do navbar antigo,,como faço para tirar? eu segui algumas dicas mas não consegui!!!

    ResponderExcluir
  68. e como eu insiro os links?

    ResponderExcluir
  69. coloque os links nos trechos <li><a href='#'>Sub Sub Page #1</a></li>

    ResponderExcluir
  70. Não tem como retirar esses sublinks não Fabiano?

    ResponderExcluir
  71. olá fabiano tudo bem? ólha eu coloquei o código no meu blog e acho que coloquei errado pq não deu certo, então sumiu a barra NavbarMenu do blog e agora não consigo fazer logim para restaurar a que eu tinha salvado aqui.
    por favor me ajude preciso do meu blog de novo ficarei muito agradecido desde já.ólha ai como esta:
    www.adrianoeanapaula.blogspot.com
    email: merettgodoy@gmail.com

    ResponderExcluir
  72. faça login pela pagina do blogger http://blogger.com

    ResponderExcluir
  73. valeu fabiano muito obrigado mesmo!!!
    deu certinho seu site esta de parabéns!!!

    ResponderExcluir
  74. Teria como por uma imagem no fundo,lugar da cor azul?e a letra fica minúscula tem como deixar maiúscula?

    >>> http://acimados300.blogspot.com/

    ResponderExcluir
  75. eu gostaria de saber uma coisa.. como eu faço para deixar uma NavBar em cima e uma em baixo? tipo da uma olhadinha no meu blog aiii tem a navbar embaixo do banner, mas eu gostaria de deixar essa navbar e add mais uma por cima do banner do lado direito...
    http://thewalkingdead-serie.blogspot.com/

    ResponderExcluir
  76. tatodicastro
    veja aqui como fazer uma sidebar(menu): Links lado a lado (menu horizontal)

    você pode colocar uma antes e outra depois da imagem do seu banner.

    ResponderExcluir
  77. Tipo não é exatamente assim que eu queria é mais ou menos assim oóóóó http://i56.tinypic.com/oqhyk7.jpg um exemplo!

    ResponderExcluir
  78. esse exemplo que enviou é possivel fazer editando os codigos CSS (#nav....), mas fazer ficar daquele jeito dá um pouco de trabalho e precisa entender de CSS

    ResponderExcluir
  79. o meu fico enbaixo das postagem '-'

    ResponderExcluir
  80. e a cor da barra e azul marinho mais ou menos queria uma cor diferente como troco -.-

    ResponderExcluir
  81. ei, alguém sabe o HTML do navbar normal? é q o navbar do meu layout está escondido... Help?

    ResponderExcluir
  82. nos novos templates depende do lugar do blog que você adicionar o código

    ResponderExcluir
  83. se a barra do blogger não aparece na sua pagina no seu html deve ter isso aqui:

    #navbar-iframe { height:0px; visibility:hidden; display:none }

    então é só apagar

    ResponderExcluir
  84. não consigo localizar < body > como q faço:?

    ResponderExcluir
  85. use o ctrl f para achar o código, pesquise somente a palavra body

    ResponderExcluir
  86. oi fabiano, leio muito o seu site, está muito bom.

    já coloquei a sua navbar há um tempo, e agora quero colocar em um outro blog, mas não to conseguindo retirar a barra do blogger.
    olha a imagem:

    http://img199.imageshack.us/img199/3226/91361443.png

    o problema é que a barra do blogspot sai, mas fica um vácuo horrível no meio... Há uns meses eu fiz em um outro blog meu e não deu esse problema(não lembro o que eu fiz)

    não sei o que fazer, se puder me ajudar, eu agradeco

    ResponderExcluir
  87. o jeito é procurar e apagar os códigos senão for exatamente igual procure pelas palavras do menu, e certamente achará

    ResponderExcluir
  88. noosa, eu fiz a barra(os links), e agora ta aparecendo e cima da barra: LHS of numeric is null before 25 in asasemotores.blogspot.com

    vixi,não sei o que fazer

    ResponderExcluir
  89. O código é bom! Brigado pelo post, mas prefiro fazer um flash, mais leve e menos linhas!
    :D

    ResponderExcluir
  90. Malandro, n consigo achar < BODY >(minusculo) no meu blog nem com control f

    ResponderExcluir
  91. todo site tem body...

    pode ter mais coisas junto, mas certamente a parte inical <body deve ter...

    ResponderExcluir
  92. funcionou perfeitamente no meu blog, mas eu não consigo alinhar os links ao centro, ficaria melhor no meu blog e ficaria melhor visto em outras resoluções como 1600x1200, se puder me dar uma ajuda, fico grato :D - blog: geekmetaleiro.blogspot.com

    ResponderExcluir
  93. Guif
    você deve olhar as estatisticas do seu blog, veja qual a resoluçaõ de tela de seus visitantes e tente ajustar o blog para a maioria...

    sobre centralizar altere a linha:

    #nav li ul a {width: 140px;text-align: center;}

    ResponderExcluir
  94. Pow cara, muito bom seu tuto...

    já está nos favoritos, e nas postagens que faço no forum do imasters.uol

    vlw

    ResponderExcluir
  95. olá, eu gostaria de falar para voce que eu consegui arrumar um jeito de editar totalmente a NavBar do Blogger, mas eu não sei se eu tenho permissão para por o link do meu site mostrando o tutorial no seu Blog.
    mas mesmo assim eu vou deixar o Link aqui para que somente voce veja e tutorial e que avalie se esse é mesmo util ou não:

    link: http://www.zonainfo.cz.cc/2011/06/como-modificar-navbar-do-blogger.html

    ResponderExcluir
  96. Este comentário foi removido pelo autor.

    ResponderExcluir
  97. tipo olha só eu não sei como funciona direito sou iniciante sabe eu queri por como se fossem tópicos no meu blog sabe olha só eu me inspiro neste blog
    http://worldofwarcraftbrasil.com/
    não que eu queira faze igual claro mais eu quero que tenha as mesma coias sabe quero aprender a colocar estes tópicos a esconder as postagens sabe a barra de menu dele você escolhe uma opção la e ele leva você ao tópico diretamente eu sou iniciante quase não intendo nada mais se você pode-se me ajudar a intender como foi feito esse esquema eu agradeceria posso ate colocar o seu blog no meu se quiser mais se pude me ajuda agradeço desde já

    ResponderExcluir
  98. normalmente as pessoas usam nos menus os marcadores do blog ou paginas extras, veja aqui:

    Paginas extras para o Blogspot

    Colocar Marcadores no blog

    ResponderExcluir
  99. Não consgio esconder a droga da navbar, o que eu faço? :s

    ResponderExcluir
  100. Olá Fabiano, adorei seu blog! Primeiro quero que saiba que não entendo muita coisa destas ferramentas de internet, mas sou fuçona e curiosa...fiz o que disse, a navbar foi criada, mas não no topo e sim lá embaixo na barra...o que faço?

    ResponderExcluir
  101. Thiara
    a barra do blogger sempre fica no topo da pagina... se não quiser tem que ocultar a barra padrão do blogger, no tutorial tem o link

    ResponderExcluir
  102. Oi Fabiano, nossa estava difícil achar uma barra destas que funcionasse , ainda bem que você me salvou !!! Coloquei e amei !! Obrigada por compartilhar !!

    Um abraço

    ResponderExcluir
  103. e ai galera do dicas para blogs, não tem como vcs ensinarem a por uma barra de pesquisa no topo do blogger ?? algo que se encaixe em qualquer layout e uma busca q funcione...hahahahah...to atraz de uma busca que fik no topo do blogger mas não acho nenhuma...abraços ;P

    ResponderExcluir
  104. pode usar esse código para posicionar a barra e colocar a pesquisa do adsense nela...

    ResponderExcluir
  105. não entendi nada desse bodi me explique por favor
    se me explicar ficarei agradecida

    ResponderExcluir
  106. body {... é onde começa a formatação do blog, é um estilo CSS, usamos como exemplo pois toda pagina tem e assim fica mais facil achar o lugar para colocar os outros códigos.

    mas não precisa ser exatamente neste trecho, veja aqui:Onde colocar os códigos no blog

    ResponderExcluir
  107. Obrigada pela dica! Funcionou perfeitamente!

    Eu retirei a pesquisa e agora gostaria que os menus ficassem centralizados na página. Tem como fazer isso?

    ResponderExcluir
  108. Amanda, você pode alterar na primeira parte do código #NavbarMenu{.....

    colocando text-align:center; e retirando padding:0px;

    ResponderExcluir
  109. Obrigada pela resposta! Mas acho que me expressei mal...
    Eu não quero centralizar o texto e sim todo o menu. À esquerda da barra tem os menus e à direita tem a pesquisa. Eu retirei a pesquisa e gostaria que os menus ficassem centralizados na tela e não à esquerda. Tem como fazer isso?

    ResponderExcluir
  110. Socorro! Acho que fiz tudo errado, me ajuda?
    A minha barra ficou lá no final do blog, e não no início.
    E apaguei aquele início que já havia.
    Como faço agora?
    Obrigada!

    ResponderExcluir
  111. Naiara Andrade
    se não salvou uma cópia do seu template antes de alterar não tem como voltar ao modelo anterior

    só mesmo desfazendo as alterações que fez no seu código.

    primeiro retire esse menu ou mova o gadget de lugar.

    para voltar a barra padrão do blogger é só retirar o display:none do trecho #navbar

    ResponderExcluir
  112. Oiii!!
    Até agora a barra de menu ficou certinha, só que no final da página.
    Como faço para movê-la para cima?

    Desculpa minhas interrogações e dúvidas.

    Grata!

    ResponderExcluir
  113. tem que arrastar o gadget para o topo da pagina

    ResponderExcluir
  114. Naiara Andrade
    veja aqui: Problemas para mover ou adicionar gadgets do blog

    você não conseguiu mover o gadget ou mesmo tirando ele de lugar o menu aparece no final da pagina?

    ResponderExcluir
  115. muito bom seu tutorial,gostaria de saber como faço para colocar botões na navbar. Quero por as redes sociais na navbar junto com a barra de pesquisa.

    sem os menus,apenas os botões das redes socias !

    ResponderExcluir
  116. você poderia colocar os botões no lugar de um item do menu dentro de uma < li > ..... < / li >

    ResponderExcluir
  117. Eu quero saber é possível tirar o NavBar do Blogger?

    ResponderExcluir
  118. M@rko$

    é só colocar esse código nos estilos CSS do seu html

    #navbar-iframe { height:0px; visibility:hidden; display:none !important;}

    veja mais detalhado aqui Retirar a barra do blogspot

    ResponderExcluir
  119. Olá...
    Coloquei tudo certinho...Aparece o link com as subpastas, mas como posto fotos nela?
    Obrigada.

    ResponderExcluir
  120. qualquer detalhe no endereços das imagens faz dar erro.. um sinal faltando ou sobrando....

    ResponderExcluir
  121. Olá..
    Fiz tudo direitinho.. Mas o sub page ñ aparece =/
    Que dizer ela aparece, mas qndo tento desser o mause pra seleciona sai os itens.. sabe cm me ajudar?
    Obrigada

    www.thaisllima.blogspot.com

    ResponderExcluir
  122. @VIDA em um clic veja os detalhes do código, as vezes faltou ou sobrou algum sinal ' < " / > que não deixa funcionar direito

    ResponderExcluir
  123. Muito bom o tutorial, mas eu ainda tenho uma dúvida muito simples: Eu quero substituir a navbar padrão do bogger, pela navbar do Google Friend Connect, você pode me ajudar?

    ResponderExcluir
  124. @Matheus vou pesquisar sobre a barra do google friend e fazer um tutorial

    ResponderExcluir
  125. Muito legal esse site!!!!!!!!!!!!
    me ajudou bastante Obg,

    ResponderExcluir
  126. Bom dia Fabiano, conseguiu descobrir como substituir a navbar padrão do blogger?

    ResponderExcluir
  127. @Matheus eu estava pesquisando sobre a barra do google friend, mas acho que não vale a pena falar sobre ela porque o serviço vai acabar em março/2012, veja o texto (tradução feita pelo google):

    Google Friend Connect-Friend Connect permite que os webmasters para adicionar recursos sociais a seus sites pela incorporação de um pequeno trecho de código. Estamos aposentando o serviço para todos os sites não-Blogger em 01 de março de 2012. Nós encorajamos locais afetados para criar uma página do Google + e colocar um badge + Google em seu site para que eles possam trazer sua comunidade de seguidores para Google + e usar novos recursos, como Circles e os locais para manter contato.

    caso queria pode ver a publicação original do google sobre esse e outros serviço no link abaixo (texto em inglês):
    http://googleblog.blogspot.com/2011/11/more-spring-cleaning-out-of-season.html

    ResponderExcluir
  128. mas vamos aguardar para ver se continuará funcionando no blogger

    ResponderExcluir
  129. @Propretario do Link use o ctrl F para achar

    todo site tem body, talvez seja necessário expandir o modelo para encontrar

    ResponderExcluir
  130. Pelo que eu pude entender, apenas os sites que foram hospedados fora do blogger, perderão o Google Friend Connect, já que o Google+ não está fazendo sucesso, eles querem incentivar o uso do mesmo.

    ResponderExcluir
  131. @Matheus

    se quiser pode fazer um teste colocando esse código no seu html junto com o CSS

    #NavbarMenu {
    width: 100%;
    height: 35px;
    margin: 0;
    padding: 0;
    }

    e depois encontre < body > e coloque isso:

    <div id='NavbarMenu'>codigo da barra</div>

    ResponderExcluir
  132. gente, aki em casa a nova barra esta na parte inferioir da tela, e a barra original ainda continua no lugar normal.

    tirem minha duvida : O que eu fiz de errado ??

    ResponderExcluir
  133. @Jeffym isso depende do template que você usa

    geralmente esse tipo de alteração dá erro em templates que baixa de sites

    ResponderExcluir
  134. @Julia saturnino mas qual o problema? não aparece? está sem configuração? os links não funcionam?

    ResponderExcluir
  135. @Julia saturnino mas qual o problema? não aparece? está sem configuração? os links não funcionam?

    ResponderExcluir
  136. Tem como colocar esse menu em baixo do título?

    ResponderExcluir
  137. Valeu eu conseguir colocar depois do título agora tá faltando centralizar os itens do menu!

    ResponderExcluir
  138. Valeuuuuuuuuuuuuuuuu!!!!! Eu conseguir e ainda ficou bem personalizado meu menu veja http://ponto-tecnico.blogspot.com/

    ResponderExcluir
  139. Eu quero colocar um gadget no lugar da navbar, como se faz ?

    ResponderExcluir
  140. Post muito bom, mas faltou dizer como configura a barra estou me batendo e nada de conseguir...! Me ajuda aí fabiano!

    ResponderExcluir
  141. como colocar a primeira letra maiúscula e as demais da mesma palavra minúsculas???

    assim não vai:

    (ul)
    (li)Ouriço Sônico(/li)
    (/ul)

    fica "ouriço sônico". quero que fique exatamente como eu coloquei.

    ps: tirei as tags e coloquei parenteses no lugar

    agradeço desde já.

    ResponderExcluir
  142. veja nesta parte:

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


    apague essa linha text-transform: lowercase; é isso que faz as letras sempre minúsculas

    ResponderExcluir
  143. vida saldavel para felicidade tem vida melhor curtindo tudo

    ResponderExcluir
  144. Bom dia amigo.
    como adiciono na navbar uma web radio.
    sendo que eu possuo o codigo html dela.
    como o desse site, http://radiomarianaresgate.com/
    porém com a opção pesquisar junto.

    ResponderExcluir
  145. João Vitor Calvelli se você já tem o código entre na pagina layout > adicionar gadget

    procure pelo gadget html/javascript e cole o código nele.

    ResponderExcluir
  146. desculpe, na verdade me expressei errado.
    não possuo o codigo, o que o provedor de stream me oferece é um link "barra no topo do site" mas não o codigo, segue ele:
    http://streaming05.maxcast.com.br/player/marianaresgate

    fiz algumas tentativas dentro desse codigo da postagem, mas não conheço muito.

    ResponderExcluir
  147. você pode tentar colocar esse endereço neste código:

    <iframe allowtransparency='true' frameborder='0' height='40' id='comment-editor'src='http://streaming05.maxcast.com.br/player/marianaresgate' width='100%'></iframe>

    ResponderExcluir
  148. iframe width='1000' height='20' frameborder='0' src='...'></iframe

    encontrei esse codigo antes de ver sua resposta.
    qual deles vc acha q seria melhor?ou tanto faz? no site da radio ao mudar de pagina o playr no topo nao recarrega, ou seja sem parar a radio, porem no blog isso nao acontece!
    tem como ficar tocando direto?
    coloquei o codigo por cima do codigo q vc colocou sobre da navbar. deixando a caixa de pesquisa junto ao plyer. pode dar conflito?

    ResponderExcluir
  149. mesmo se usar o iframe o player vai recarregar quando mudar a pagina.

    acho melhor colocar um player sem começar automaticamente assim se o visitante quiser ele pode ligar a musica. Isso porque se a musica começa sozinha e a pessoa estiver em algum lugar publico (trabalho, por exemplo) provavelmente vai sair do blog sem procurar onde para a musica.

    ResponderExcluir
  150. Gostei da dica.
    como faço para criar um popup com o playr bem bacana?

    ResponderExcluir
  151. é melhor achar um player pronto em algum site de musica

    ResponderExcluir
  152. Muito bom, vou tentar usar esse código, mas para mudar a barra de ferramentas no meu Fórum do Forumeiros.

    ResponderExcluir
  153. QUAL ON CÓDIGO PARA COLOCAR UM PLAYER MP3

    ResponderExcluir
    Respostas
    1. o código para o player é

      <audio controls="">
      <source src="endereço do audio" type="audio/mpeg"></source>
      </audio>

      Excluir