17 de nov de 2015

Como colocar menu no topo do blog

Oi amores!

Para quem tem dúvida de como colocar o menu no topo do blog assim como no meu blog ou em vários outros por ai, vou dar um passo a passo de como fazer isso sem complicação!

Esse código eu já uso á um bom tempo e sei que muitas meninas querem saber como que se faz então ai vai. Antes de tudo não esqueçam de fazer um backup do seu layout caso alguma coisa dê errado, façam sempre com cautela e qualquer dúvida me perguntem.

O resultado é igual ao menu que uso aqui no blog, exceto as cores, isso vocês podem mudar diretamente no código.



Créditos para Place Style


Em primeiro lugar você vai em modelo> editar HTML e clicar em CTRL + F. Na caixinha de pesquisa que abrir dentro da caixa de código do seu blog (não pode ser fora, tem que abrir do lado de dentro) você pesquisa ]]></b:skin>

Quando encontrar cole acima dessa tag todo o código abaixo:

#mymenuda {
background: #CD6090; /* Cor do background */
border-left: 200px solid #CD6090; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */
width: 100%;
height: 34px;
position: fixed;
top: 0;
left: 0;
z-index: 9999; 
}
#mymenu {
background: #fff; /* Cor da fonte */
font-family: 'Arial', corsiva; /* Nome da fonte */
font-size: 16px; /* Tamanho da fonte */
text-transform: uppercase; 
}
#mymenu li {
list-style-type: none;
display: inline;
float: left; /* Posicionamento do menu */
padding: 0px;
}
#mymenu li a {
color: #fff;
text-decoration: none;
padding-right: 24px;
line-height: 37px;
}
#mymenu a:hover {
color: #EED5D2; /* Cor da fonte em hover */
}
#mymenu ul {
list-style: none;
margin: 0;
padding: 0; 
background: #fff;
margin-left: 40px;
}
#mymenu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: -40px;
}
#mymenu li ul a {
font-size: 12px;
line-height: 24px;
}
#mymenu li:hover ul ul, 
#mymenu li:hover ul ul ul, 
#mymenu li.sfhover ul ul, 
#mymenu li.sfhover ul ul ul {
left: -999em;
}
#mymenu li:hover ul, 
#mymenu li li:hover ul, 
#mymenu li li li:hover ul, 
#mymenu li.sfhover ul, 
#mymenu li li.sfhover ul, 
#mymenu li li li.sfhover ul {
left: auto;
}
#mymenuright {
float: right;
color: #fff;
}
/* BARRA DE PESQUISA */
.search{
float: left; /* Flutuando a esquerda */
font-family: Georgia, Tahoma; /* Nome da fonte */
}
.searchbar{
margin-top:7px;
height: 14px;
width: 240px;
color: #ccc; /* Cor da fonte */
-moz-border-radius: 6px;-webkit-border-radius: 6px;-goog-ms-border-radius: 6px;background: #FFF; /* Cor de fundo */
}
.searchbut{
background: url('http://i43.tinypic.com/2evyidy.png'); /* Link da imagem do botão de pesquisar | tamanho: 20x20px */
width:20px;
height:20px;
border: 0;
padding:6px;

}

"/* .. */" foi usado para identificar todas as cores, fontes e tamanhos que podem ser alterados.

Depois disso salve, vá em Layout> Adicionar Gadget e escolha o "HTML/Javascript" e dentro cole esse código:

<div id="mymenuda">


<div id="mymenu">


<li><a href=" Link ">Título</a></li>

<li><a href="Link ">Título</a></li>

<li><a href=" Link ">Título</a></li>

<li><a href=" Link ">Título</a></li>
<li><a href=" Link ">Título</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 id='mymenuright'>
</div></div>

Ali está escrito o lugar para colocar o link da página e o nome de cada uma, se quiser mais páginas é só copiar uma linha daquelas e colar.

Depois salve e vai aparecer! Legal, né? Se você tem medo de fazer sozinha, não entende muito de HTML ou tá com preguiça, clica na aba Layouts lá em cima que a gente combina e eu posso fazer pra você.

Já se você quer um layout completo com esse menu, logo, posts recentes, tudo do seu jeitinho sem ter que meter a mão na massa, fala comigo em contato ou no site da agência que podemos fazer o layout dos seus sonhos á partir de R$50,00 (temos três opções de planos, até com o domínio incluído e arte da fanpage)

Se gostaram do post, curte a fanpage do blog que logo vai ter outros bem interessantes, pacotes de materiais, sorteios de layouts (só para quem curte a página, não vou postar aqui no blog) e muuuuito mais. 

Beijinhos e tudo de bom!

2 comentários :

  1. Como faço para tira a linha que separa os nomes dos ícones do menu ?

    ResponderExcluir
  2. Como faço para centralizar a fonte do menu????

    ResponderExcluir