1 de novembro de 2012

16

Menu Horizontal com caixa de busca para o seu Blog



Menu Horizontal com caixa de Busca para o Blogger
Vou mostrar a como colocar um "Menu Horizontal com caixa de busca" no Blog...










[TUTORIAL ATUALIZADO  PARA NOVA INTERFACE DO BLOG]

Este menu horizontal é editável e você pode adicionar qualquer link ou página do Blog para ser exibido no Menu. O legal é que, você poderá mudar as cores do menu e deixá-lo combinando com as cores do template Blog.
Para colocar este Menu no Blog é fácil, porém, será preciso inserir alguns códigos no HTML do Blog.

Veja um exemplo do Menu na imagem abaixo. (clique na imagem para visualizar):
Menu horizontal com caixa de busca para Blog

Menu Horizontal com Caixa de Busca para Blog

Vamos começar!

1º Passo: Acesse o painel de edição do seu Blog, e clique na opção Modelo >> depois em Editar HTML.


2º Passo: Agora, clique em qualquer parte do código, em seguida, pressione as teclas de atalho "Ctrl+F" do seu Teclado e busque por esta Tag:
]]></b:skin>
3º Passo: Após encontrar a Tag, logo acima da mesma acrescente este código CSS do Menu

/*-- CSS do Menu Horizontal-- */
#navtop { background: #dcdcdc ; height: 26px; width: 100%; margin: 0px auto 24px auto; font: bold 14px "ms sans serif",Gill Sans, sans-serif; font-weight: bold; color: #737374; font-size: 14px; border-bottom: 1px solid #afafaf;}
.nav {width: 950px; margin: auto;}

ul.navtop { padding: 0px;}
ul.navtop li { list-style: none; display: inline;}
ul.navtop li a { background: transparent; color:#737374; display: block; float: left; padding: 4px 7px 3px 7px; margin-right: 3px; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf;}
ul.navtop li a:visited { text-decoration: none; color: #737374;}
ul.navtop li a:hover { background: #4F4F4F; color: #ffffff; text-decoration: none; border-right: 1px solid #afafaf; border-left: 1px solid #afafaf; }
ul.navtop li a:active { text-decoration: none; color: #737374; }
ul.navtop li a:focus { color: #41a5c3; outline: 1px dotted #e1477d; }
ul.navtop li.current_page_item a { text-decoration:none; color:#fff; background: #E1477D ; }
ul.navtop li ul { float:left; margin:0; padding:0; }

#searchcont { width: 100%; margin: 12px auto 12px auto; }

#searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 0px;}
input#s {color: #e1477d; width: 283px; background:#fcfcfc; padding: 2px 4px 2px 4px; border: 1px solid #afafaf;}
input#searchsubmit{ background:#afafaf; color:#fff; font-size:13px; padding: 2px;}
/*-- Fim do CSS do Menu Horizontal-- */

4º Passo: Vamos procurar no código outra Tag, então, utilize novamente o atalho "Ctrl+F" e encontre esta Tag:
</header>
5º Passo: Depois de encontrar a segunda Tag, logo abaixo dela acrescente este código (código Script do menu):

<!-- Menu horizontal -->
<div id='navtop'>
<div class='nav'>
<ul class='navtop'>
<li><a href='/'>Ínicio</a></li>
<li><a href=' http://link da página 1' title='Contato'>Contato</a></li>
<li><a href=' http://link da página 2' title='Sobre'>Sobre</a></li>
<li><a href=' http://link da página 3' title='Parceria'>Parceria</a></li>
<li><a href='http://link da página 4' title='Mapa do site'>Mapa do site</a></li>
</ul>
<form action='/search' id='searchform' method='get' style='display:inline;'><input id='search-box' name='q' type='text'/><input id='search-btn' type='submit' value='Buscar'/></form>
</div>
</div>
<!-- Fim Menu horizontal -->

  • Depois de adicionar o Script do Menu Horizontal, vamos ter que EDITAR, para isso, siga as instruções mostradas abaixo


Editando o Menu Horizontal 

Veja que eu destaquei o código em cores diferenciada, isto, para facilitar o entendimento na hora de editar.
  • A parte que esta destacada em Azul, é para você substituir pelo link da página.
  • Em cor Vermelho, é para você colocar o "Título" da página.
Observe: Veja um exemplo da alteração:
<li><a href='http://variasdicasparablogs.blogspot.com.br/p/contato.html' title='Contato'>Contato</a></li>  

 Alterando as cores do Menu

Se você deseja mudar as cores do menu, veja como fazer.
  • ´Para alterar a cor de fundo do Menu: substitua a parte destacada em Azul "#dcdcdc" pelo código da cor em HTML que deseja colocar. (clique aqui para escolher uma cor em HTML).
  • Cor da Letra: Substitua a parte destacada em cor de Rosa "#737374" pelo código da cor em HTML . (clique aqui)
  • Quando passamos o cursor do mouse sobre uma opção, a cor do fundo muda, e para alterar a cor do segundo fundo, basta substituir a parte destacada em Vermelho "#4F4F4F" por uma outra cor. (clique aqui)
  • Cor da leta do link: substitua a parte destacada em cor Verde "#ffffff". (clique aqui)
Prontinho a alteração é só isso, agora clique em visualizar veja se tudo ocorreu bem e depois salve. Obrigado

16 comentários:

  1. AFF O QUE MAIS QUERIA MAIS PARECE QUE O MEU BLOG E DIREFERENTE NÃO TEM A OPÇÃO PARA PROSSEGUIR O QUE FAÇO PLISSS

    ResponderExcluir
    Respostas
    1. Olá!
      A opção PROSSEGUIR não existe mais no blog, devido a uma nova atualização na plataforma blogger..
      mas pode continuar com o tutorial, eu atualizei para a nova versão.

      Excluir
  2. Opa.. bem bonito, só não instalei porque não sei se tem como colocar sub-categorias.. tem?

    ResponderExcluir
  3. Ficou show de mais so me ensina como trocar a cor da barra ...

    ResponderExcluir
  4. O meu não ficou horizontal, ficou na vertical =/

    ResponderExcluir
  5. No meu funcionou.

    Gostava porem de aumentar a caixa da procura, e aumentar a letra e a cor da barra.

    Se puder indique.

    Abracao!

    ResponderExcluir
  6. Cara Valeu... seu blog tá me ajudando muito... Agora como eu faço para mudar a cor do item em foco? No caso tá rosa escuro ou roxo ou violeta... eu queria que ficasse azul...

    ResponderExcluir
    Respostas
    1. OLÁ!
      eu fiz uma atualização no tutorial para a nova interface do blog, e ao mesmo tempo eu explico como mudar as cores do Menu.
      Obrigado!

      Excluir
  7. Oi, eu já tenho a barra de menu com as páginas. Como transformo agora para menu drop dow?

    ResponderExcluir
  8. Meu Menu ficou vertical. Sabe me responder o que fiz de errado? Poxa, obrigada pelas dicas!

    ResponderExcluir

Observe:
Faça seu comentário dentro do assunto tratado na postagem.
Não pode divulgar endereço de Sites ou Blog.
Comentário que conterem divulgação serão moderados, somente serão aceitos links caso necessite de informar alguma fonte.


Copyright © - Todos os Direitos Reservados: Várias Dicas para Blogs |
Design by Kelven Pedro | Tecnologia do Blogger - É Proibido a copia do conteúdo deste blog sem autorização
    Twitter Facebook