Menu Fixo para Blog | Quero Dicas | Tutoriais para seu blogs


Menu Fixo para Blog


Vamos hoje aprender a colocar um menu fixo no blog. 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. (risos)
Ele é fica igual a da imagem acima ↑ (extensão total do blog), com os textos e a caixa de busca já adicionada. Claro você poderá alterar cores, fonte e se não 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.
Este menu foi criado por mim. Caso queira reblogar, criar sua própria postagem, me dê os devidos créditos!

Espero que tenham gostado. E, não se esqueçam, deixe seus comentários! Ele é muito importante para mim. Beijinhos

Clique e veja também outros estilos de Menus.

Me Contrate!

11 comentários

Clique e deixe seu comentários
sábado, 12 setembro, 2015 ×

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

Resposta
avatar
admin
sábado, 12 setembro, 2015 ×

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

Resposta
avatar
admin
domingo, 13 setembro, 2015 ×

Muito obrigaado por fazer meu pedido me ajudou muito!

Resposta
avatar
admin
domingo, 13 setembro, 2015 ×

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 ♥

Resposta
avatar
admin
Lua
segunda-feira, 21 setembro, 2015 ×

O meu não deu certo :(

Resposta
avatar
admin
domingo, 04 outubro, 2015 ×

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 ♥

Resposta
avatar
admin
sábado, 28 novembro, 2015 ×

Não to conseguindo copiar os htmls :/

Resposta
avatar
admin
sábado, 28 novembro, 2015 ×

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?

Resposta
avatar
admin
sexta-feira, 02 dezembro, 2016 ×

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.

Resposta
avatar
admin
sexta-feira, 02 dezembro, 2016 ×

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 ♥

Resposta
avatar
admin


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

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

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.