Blog Quero Dicas : Menu responsivo com caixa de pesquisa


Menu responsivo com caixa de pesquisa

| |


Como informei no post anterior, menu multinível responsivo para blog, neste início de mês de Junho irei disponibilizar alguns menus responsivos para vocês. Portanto, eu fiz mais este post com um menu responsivo simples e com caixa de busca ao lado para vocês.

Este modelo não é multinível, portanto, não há sub menus. Estou disponibilizando este menu simples responsivo pois muitos não utilizam sub categorias em seus blogs.

Eu o construí com base em menus responsivos, HTML e CSS e, infelizmente, eu não tenho ele para demostração ao vivo, pois não utilizo mais blogs de teste abertos em meus tutoriais. Mas o menu é o mesmo que está na  imagem de chamada deste post, lá em cima ↑.

Se deram pra notar, ao lado esquerdo ao passar o mouse, há um efeito em cada categoria e ao lado direito há a caixa de pesquisa.

Gostou? Vamos aprender a instalá-lo. É muito fácil!
Sempre recomendo: Faça um backup do seu template ao instalar qualquer tipo de implementação de códigos dentro do HTML do seu blog e claro, de preferências a um blog de teste! Não saiba fazer Backup? Não tem problema, acesse: Como fazer um Backup ou restauração do seu blog.
1. Agora que você já fez o backup ou preferiu instalá-lo em um blog de teste, Acesse ao blog de códigos e scripts do Quero Dicas. Deixe-o aberto.


2. Agora acesse o painel do blog que deseja instalar o menu e depois clique me Tema  e Editar HTML.

3. Clique em qualquer lugar dentro da área de código e pressione CTRL + F para para abrir a caixa de busca.

4. Ao abrir a caixa, cole e procure pelo código:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Assim que o encontrar, logo ABAIXO dele, cole o Código 1.

Dica: Abra um espaço para colar o código copiado, dessa forma você poderá fazer alterações sem maiores problemas.

Agora edite os links em azul e os nomes do seu menu em negrito.

• Caso você tenha alguma dificuldade para alterar os nomes e os links do menu, veja essa postagem: Como colocar marcadores no menu do Blog


5. Agora procure por ]]></b:skin> e logo ACIMA dele cole o Código 2.

• Para alterar as cores do menu, mude somente o local que eu destaquei em vermelho ao lado de cada item.

Tabela de cores aqui

6. Agora pesquise por </head> e ACIMA dele, cole o Código 3

7. Agora salve e prontinho! Seu menu responsivo com caixa de pesquisa está instalado e finalizado.

Fácil não é?
Espero que tenham gostado. Qualquer dúvida deixe seus comentários.
Claro, mesmo que tenha ficado tudo esclarecido, também comente! Adoro conhecer vocês =D

Beijinhos



Compartilhe

* Você reservou um tempinho para comentar? *

Desde já agradeço!

Mas, devido a falta de tempo, não prometo responder a todos os comentários.

Mais, farei o possível, ok? Beijinhos!


Nenhum comentário:

Postar um comentário

subir