sexta-feira, 19 de agosto de 2011

Como inserir uma caixa de busca no Menu Horizontal




Neste tutorial vamos aprender como inserir uma caixa de busca - semelhante a do Blogger - no canto direito do menu horizontal.


Tomei como exemplo o menu do blog "RumoaoINSS2011". Veja como fica:



1º Passo) - No painel do Blogger, clique em "Design/Editar HTML" e procure pela seguinte linha de código:

]]></b:skin>

Acima dela copie e cole o código abaixo:


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


#searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 6px;}
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;}


2º Passo) - Agora cole o código (em negrito), logo após o trecho de código do menu, conforme abaixo:




<div id='navigation'>

<ul>
<li><a href='http://rumoaoinss2011.blogspot.com/' title=''>Home</a></li>
<li><a href='#' title=''>Noticias</a></li>
<li><a href='#' title=''>Editais</a></li>
<li><a href='#' title=''>Apostilas</a></li>
<li><a href='#' title=''>Resumos</a></li>
<li><a href='#' title=''>Simulados</a></li>
<li><a href='#' title=''>Dicas</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>





Salve as alterações e veja o resultado!

14 comentários:

  1. Como diminuir a largura???? Me responde por favor???

    ResponderExcluir
  2. E ae @Alexsandro blz?
    Para alterar o comprimento do widget basta alterar o atributo width de #searchcont no inicio do codigo CSS.

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

    Abraço!

    ResponderExcluir
  3. Eu faço isso mais não muda nada, o comprimento sempre fica o mesmo!!!! Tem outra solução não?

    ResponderExcluir
  4. Fiz isso mas fica do mesmo jeito, o comprimento não muda nada, me ajuda por favor....

    ResponderExcluir
  5. Ola @Alessandro
    Vc tem de alterar o valor de width para menos de 100%
    e para dar certo
    senaum especifique o valor em pixels
    abraco

    ResponderExcluir
  6. não está pegando sempre quando boto em visualizar para ver como ficou aparece essa mensagem "Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The element type "bod-y" must be terminated by the matching end-tag "".

    Error 500"
    Mas sem os "-" nas tags.
    Porque isso acontece e como posso resolver?

    ResponderExcluir
  7. Ola eu ja consegui botar a caixa mas ela está desalinhada
    olha: pivotprimeproducoes.blogspot.com
    Como arrumo esse erro

    ResponderExcluir
  8. Ola @Wenis
    Agradeço pela visita e pelo comentário
    Tente diminuir o comprimento da caixa para menos de 100%
    na primeira linha do codigo css
    #searchcont { width: 100%; margin: 12px auto 12px auto; }
    ou entaum altere os valores de "height" e "line-height" (segunda linha do codigo):
    #searchform { height:26px; line-height:25px; float:right; margin: 0px; padding: 6px;}
    Abraço!

    ResponderExcluir
  9. Muito Obrigado, deu certo, era justamente o que eu queria, veja http://clikafilmes.blogspot.com.br/ o meu site.

    ResponderExcluir
  10. TEM QUE COLOCAR O UL NO FINAL DO CODIGO PARA QUE A CAIXA DE PESQUISA FAÇA PARTE DA LISTA

    ResponderExcluir
    Respostas
    1. Ola Luana,
      A posição do gadget no codigo é entre as tags /UL e /DIV para que seja exibido após o menu, conforme o exemplo mostrado no inicio do post. As tags UL e /UL sao utilizadas somente no elemento menu. As tags que controlam o gadget sao FORM.../FORM, sendo que os dois elementos - menu e caixa de busca - ficam "dentro" da DIV, ok?
      Espero ter respondido sua pergunta qq duvida é só deixar um comentário q responderei o mais breve possível.Obrigado por visitar e comentar aqui no blog. Abraço!

      Excluir
  11. Respostas
    1. Boa noite @Nalanda,
      Com certeza sim. Você pode modificar as cores, fontes, bordas e estilizar o gadget da forma que mais lhe agrade. Como ficaria difícil explicar para você aqui na seção de comentários, postei um tutorial mostrando algumas maneiras de personalizar a caixa de busca. Dá uma olhada. Agradeço pela visita e pelo comentário!

      Excluir

Se você gostou deste artigo poste um comentário!

Observações:
1º) Somente usuários com conta no Google poderão publicar seus comentários aqui no Blog do SM@rtiN.
2º) Todos os comentários serão avaliados pelo administrador do blog para posterior publicação.
3º) Os textos com conteúdo impróprio, ofensas e palavrões serão automaticamente excluídos. Se houver reincidência, o acesso do usuário ao blog será bloqueado.

Obrigado!