março 09, 2011

Tutorial - Navbar personalizado

Esse tutorial não é complicado é grande, faça com calma para  não errar. Todos os créditos são do Dicas para blogs, eu vou explicar passo a passo, já que diversas pessoas tiveram dificuldades, para quem não sabe do que eu estou falando é do meu novo navbar no topo do blog ou se preferirem chamar (barra de ferramentas). Vá em Design > Editar HTML > e procure por ]]></b:skin> quando achar cole isso antes.

#NavbarMenu {
width: 100%;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color: #FFF;
font-weight: bold;
margin-top: -33px;
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;
}
#navbar-iframe { height: 0px; visibility: hidden; display: none; }

Salve as alterações, você ainda não verá nada apenas o navbar do blogger se você tiver tera sumido. Clique em expandir modelos de widgets Agora procure por: <body e vai aparecer uma linha mais ou menos como essa ou igual depende do modelo.
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
e cole isso depois dessa linha:

<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 visualize, se aparecer esta tudo certo, agora você pode mudar como quiser e colocar os
links que quiser, se quiser alterar as cores use a Tabela. Espero ter explicado melhor, beijos

53 comentários:

  1. Muito legal !!!
    eu nao consegui fazer em meu blog,me adc no msn?
    aaninha12@hotmail.com
    Obrigada

    ResponderExcluir
  2. Karol,help nao consigo tirar o navbar.

    ResponderExcluir
  3. #Ana Luiza: pronto ^^

    #Revista Spmania: vou ver, perai.

    ResponderExcluir
  4. Gente vocês tem que ver se estão fazendo corretamente, eu vou arrumar minha postagem e explicar um pouco mais ook?

    ResponderExcluir
  5. Ain *-* eu consegui fazer no meu blog de teste ficou lindo *-* depois vo passa pro sg *-* amei mesmo beeijos :*

    http://sweetgirl-blog.blogspot.com/

    ResponderExcluir
  6. Não consigui, mais deixa ASUHUHSAUH
    Eu queria pedir uma coisa *--* se você puder,faz um tuto de como botar o comentário do autor destacado? ninini

    ResponderExcluir
  7. Vou tentar Fazer,não sei se vou conseguir :(,mas tomara que de certo por que fica muito Cute *--*.
    Karol,como você faz para mudar a cor da C-Box sem perder as mensagens ? AAH, confere o novo post lá no Blog, Bjoo ;**

    http://theperfectkisses.blogspot.com/

    ResponderExcluir
  8. vou refazer toda a postagens garotas, e sobre o comentario do autor destacado, eu faço tambem ook? beijos

    ResponderExcluir
  9. oie amore faz parceria?

    http://roundround15.blogspot.com/p/contatos-e-parcerias.html

    ja estou seguindo =]

    ResponderExcluir
  10. atualizei o tutorial espero que entendam melhor agora, beijos

    ResponderExcluir
  11. pronto amore ja perquei o seu banner
    bjao

    ResponderExcluir
  12. Ahh, consegui colocar, mas eu queria saber como coloca a barra bem colada no topo da página como a sua u.u

    Beijo, seu blog sempre ajuda muito mesmo *-*

    ResponderExcluir
  13. bem no começo tem #NavbarMenu {
    mais a baixo tem margin: coloque
    margin: -30px;
    ook? beijos

    ResponderExcluir
  14. Não consigo por eu tentei mas ai aparece a navbar do blogger e a outra navbar fica em links da uma olhada la.

    http://www.chicletpop.com/

    ResponderExcluir
  15. Oi flor,como faço pra acertar "home"pois ficou escondido,o resto tá tudo certinho,qnd o blog tiver pronto passo aqui novamente pra vc visitalo,bjosss!!!

    ResponderExcluir
  16. Flor já acertei o "home"tá tdo OK,só me diz como configuro a caixa de pesquisa pois não tá aparecendo os resultados certinho,aguardo bjos.

    ResponderExcluir
  17. Brenda flor,por favor me diz como eu coloco a caixa de pesquisa pra funcionar pois a navbar ficou certinha mais a caixa de pesquisa não funciona.......SOS!!!!

    ResponderExcluir
  18. Consegui, ficou todo customizado e lindo, mas o home ficou escondidinho, como faço para arrumar ?

    ResponderExcluir
  19. ooi, como configuro a home? ela ficou escondida... me ajuda por favoor!
    deixe um comentário no meu blog respondendo, e depois vou querer algumas encomendas, pois estou começando o blog agora, estou "decorando" ainda, rs. mas depois eu peço. beeijos!

    http://blogjustteenager.blogspot.com

    ResponderExcluir
  20. Jaque Luiza e Bia:
    Amores vão em > Editar HTML > Ctrl+F > procurem por: #NavbarMenuleft {
    deve estar assim;

    #NavbarMenuleft {
    float: left;
    margin: 0px;
    padding: 0;

    substituam margin: 0px; por margin-left: 10px;

    e ajustem no valor que quiserem. beijos

    ResponderExcluir
  21. Amr,como coloco os links?
    Tipo eu fiz o menu,mas e os links?

    ResponderExcluir
  22. onde tem SubPage, tem a href=# substitua por seu link em cada page.

    ResponderExcluir
  23. é esse tuto mesmo que eu queria.
    o meu blog num tinha navbar, então eu pulei pro 2º passo

    mas num deu certo naum, fiz a segunda parte, o navbar ficou todo errado, capturei a imagem, olha:
    http://1.bp.blogspot.com/-FwB-ckKGcBo/TbLmgh0NPgI/AAAAAAAABFw/Wzduwile0tU/s1600/navbar.JPG

    o que devo fazer pra ficar certo? me ajuda, jah tentei arrumar um monte de vezes.

    ResponderExcluir
  24. agra fiz o tutorial sem pular a primeira parte, deu na mesma.

    ResponderExcluir
  25. Nikky: Flor, isso é porque a parte do CSS, você não colocou direito por isso ficou assim. Mas eu te ajudo. Me adicione no msn.

    ResponderExcluir
  26. Me adiciona no msn também? ><
    stellaheitorr@hotmail.com
    eu tento,tento e não consigo fazer :S

    ResponderExcluir
  27. Amooor , tipo onde ta o codigo pra mudar as cores ?

    ResponderExcluir
  28. color: cor da letra
    background: cor do fundo
    caso tenha borda é na border onde tem #...

    ook?

    ResponderExcluir
  29. não deu ): fazer oq, né'

    ResponderExcluir
  30. Oii! Karoline queria ajuda na edição das cores, e tem como mudar o tipo de letra?
    Beijos!

    ResponderExcluir
  31. Oii! Karoline como faço pra tirar o 'pesquise' sem dar erro?
    Beijos ;*

    ResponderExcluir
  32. Pra mim dá o mesmo problema da nikky q saco ;( ;( queria tanto! não tem como... slá, explicar melhor? fiz tudo certinho :(

    ResponderExcluir
  33. aninha: claro flor, para alterar a fonte vá em font:.

    Mirelle: explicar o que florzinha, me mande um recado no msn, ta on agora? beijos

    ResponderExcluir
  34. DEU TUDO ERRADO!!! Ao invés da navbar sumir ficou aparecendo o código do html que eu coloquei acima da navbar, e quando eu coloquei o menu ele ficou abaixo da navbar, ainda bem que eu salvei o modelo do blog antes de fazer, pq senão teria estragado tudo!!!

    ResponderExcluir
  35. Oie :) Eu estou seguindo aqui e amando, mas quando fui tentar fazer esse tutorial minha navbar apareceu na barra lateral e não quer sair, mesmo tendo tirado o código não adiantou :( Fui ver no layout e tentei mover a navbar de volta mas não funciona :/ Você poderia me ajudar por favor? Obrigada :)

    P.S : Adorei seu blog *-*

    ResponderExcluir
  36. Vi a sua navbar normal flor, acho que conseguis-te arrumar né?

    ResponderExcluir
  37. fiz tudo cm ta ai, o menu ta aparecendo la, so que funciona será pq??

    ResponderExcluir
  38. fucei ate conseguir..kkkkkkkkkkkkkkkkk mais tenho uma duvida.. eu queria q qndo clicasse o menu selecionado ficasse com um com fixa pra saber em qual ta, mas clica e fica sem nada igual os outro tem cm me ajudar?? Bjos

    ResponderExcluir
  39. Flor, ajudaaaa.. As paginas estão funcionando lindas, mas o sub page ñ, será pq??

    www.thaisllima.blogspot.com

    ResponderExcluir
  40. Me fala uma coisa como faz esse pontilado ai embaixo do titulo???? queria no meu ^^
    obrigada!!

    ResponderExcluir
  41. VIDA em um clic: Oi flor não sei porque isso do sub page,mas tem como mudar a cor sim, e sobre o pontilhado embaixo do titulo é bem fácil procure no seu html por post-title { e dentro das chaves coloque border-bottom: 1px dashed #CCCCCC;

    ResponderExcluir
  42. Muito mais bem explicado =D.
    O meu deu certo,porém ficou como uma coluna e não Navbar.
    Como fazer?

    ResponderExcluir
  43. If some one wants to be updated with newest technologies
    afterward he must be visit this web site and be up to date
    daily.
    Feel free to surf my weblog ... background screening

    ResponderExcluir
  44. Ajudaaaa! não consigo achar o ]]> de jeito nenhum, pesquisando ou olhando todo o HTML não acho, pode me ajudar? por favor *-*

    ResponderExcluir
    Respostas
    1. Oi flor, não vejo porque não acha, creioo que tem em todos os modelos isso. Qual é o seu modelo?

      Excluir