Menu Fixo para Blog com caixa de pesquisa | Quero Dicas Quero Dicas : Menu Fixo para Blog com caixa de pesquisa

Quero Dicas : Menu Fixo para Blog com caixa de pesquisa

Menu Fixo para Blog com caixa de pesquisa

| |


Vamos aprender a colocar um menu fixo para Blog com caixa de pesquisa. Ele é bonito, bastante funcional e acompanha a rolagem do visitante em toda a extensão do blog, dando mais destaque aos seus itens e sem falar que está na moda.

Ele é fica igual a da imagem acima ↑ , com textos e a caixa de busca já adicionada. Claro você poderá alterar cores, fonte e se quiser poderá retirar a caixa de busca.

Essa postagem é um pedido da visitante e minha seguidora Layza Passos. Espero que todos gostem! =D Vamos ao tutorial?


  TUTORIAL


1 - Acesse o painel do seu blog

2 - Vá em "Layout", "Adicionar um gadgets" e "HTML/Javascript" 

3 - Cole o código abaixo:
 

<div id="menufixo"> 
<div id="Menu">
<li><a href=" # ">ITEM 1</a></li>
<li><a href="# ">ITEM 2</a></li>
<li><a href=" # ">ITEM 3</a></li>
<li><a href=" # ">ITEM 4</a></li>
<li><a href=" # ">ITEM 5</a></li>
</div>
<form action="/search" class="search" method="get">
<input class="searchbar" id="s" name="q" type="text" value="" />
<input class="searchbut" type="submit" value="" />
</form>
</div>
</div>


Não faz diferença onde você posicionar. 
4 - Agora, vá em "Modelo" e "Editar HTML" e procure por: ]]></b:skin>

]]></b:skin> 


5 - Aguando achar, cole o código que está abaixo, acima do encontrado.

/* Menu criado por Bia Barros - www.querodicasde.com.br */
#menufixo {
font-family: tahoma;
background:#CD6090; /* cor do fundo */
opacity:0.7; /* Deixa transparente - retire se quiser */
height: 42px; /* Largura */
border-left: 150px solid #CD6090; /* Borda e cor- não retire pq ela centraliza o menu */

  position: fixed; /* Não mexa */
  top: 0; /* Não mexa */
  left: 0; /* Não mexa */
  width: 100%; /* Não mexa */
  z-index: 99; /* Não mexa */
}

#Menu {
background: #fff; /* cor da fonte */
font-family: 'Arial', corsiva; /* nome da fonte */
font-size: 20px; /* tamanho da fonte */
text-transform: uppercase; 
}
#Menu li {
list-style-type: none;
display: inline;
float: left; /* posicionamento do menu - não mexa*/
padding: 0px;
}
#Menu li a {
color: #fff; /* cor da fonte */
text-decoration: none;
padding-right: 24px; /* Distancia entre os itens*/
line-height: 42px; /* Distancia topo*/
}
#Menu a:hover {
color: #EED5D2; /* cor do link hover */
}


6 - Faça as alterações que deixei ao lado de cada código, visualize e caso esteja tudo certinho, salve.

Aqui tabela de cores
Caso altere onde NÃO deixei marcado, haverá erros. É por sua conta e risco!
Espero que tenham gostado. 
Beijinhos

Clique e veja também outros estilos de Menus





Compartilhe

* Você reservou um tempinho para comentar? *

Desde já agradeço!

Devido a falta de tempo, não prometo responder a todos os comentários. Mas farei o possível!


11 comentários:

  1. Bia vc não sabe o quanto tem me ajudado com os seus posts! São maravilhosos! Continue assim querida!

    ResponderExcluir
    Respostas
    1. Muito obrigada Sandreanny.Fico muito lisonjeada por estar ajudando ;)

      Excluir
  2. Muito obrigaado por fazer meu pedido me ajudou muito!

    ResponderExcluir
    Respostas
    1. Por nada Laysa.
      O blog Quero Dicas é para vocês mesmo, pede eu faço! =D
      Se precisar de algo mais, é só avisar na página direcionada a pedidos.
      Beijinhos ♥

      Excluir
  3. Respostas
    1. Olá Gabriel.
      Você pega os links que disponibilizei nas caixas estendidas, iguais as daqui onde você escreveu e deixou sua mensagem para mim.
      Espero que seja isso que eu tenha entendido. :/ Se não for, escreva mais detalhado, por favor. =D
      Beijinhos ♥

      Excluir
  4. Não to conseguindo copiar os htmls :/

    ResponderExcluir
    Respostas
    1. Oi Milena.
      Gostaria de saber se você está vendo a imagem escrita "Copie ao lado →". Caso você não esteja vendo, me informe por favor =D

      Caso esteja vendo, há um ícone " <> " é só clicar sobre ele e irá aparecer uma janela pop-up e copiar o código.
      Gostaria de saber se conseguiu, algumas das informações?

      Excluir
  5. Olá Bia, tudo bem? Coloquei o menu no topo da página e gostei do resultado, mas por outro lado vieram outras ideias depois de colocar as categorias, pois ele não tem multi abas como o seu, que é lindo. Eu gostaria de, se possível, poder aproveitar o que já tenho ou de criar uma página além para ir aprendendo num blog de testes. Dá pra aproveitar o menu no topo e adicionar os multiníveis? OU posso criar um menu horizontal abaixo do topo para ir aprendendo? Grata por sua atenção.

    ResponderExcluir
    Respostas
    1. Olá Regina.
      O menu desse tutorial, realmente, é simples. Por outro lado você poderá adicionar outras abas para adicionar sub-menus a ele. Mais para isso você deve entender um pouco de CSS.

      Obrigada por gostar do meu. Muito em breve criarei menu fixo com sub-menus. ok? Só estou sem tempo para criá-los =(
      Assim que possível criarei e colocarei eles aqui. Por isso, não deixe de me visitar.

      Beijinhos ♥

      Excluir

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir