Tutorial-Menu no topo do blog
Hey galerinha,hoje resolvi trazer um tutorial para vocês :) faz um tempinho que não trago tutoriais,tanto que a aba Tutoriais do blog está bem vazia,então prometo procurar mais tutos para vocês.
Peguei o tutorial do blog Honey Pixel,mas eu modifiquei algumas partes,tentei deixar o mais simples possível para vocês,vamos lá :)
Seu menu vai ficar assim:
Primeiramente coloque em Modelo>Editar Html
Assim que carregar a página clique em qualquer palavra na caixinha do html e aperte Ctrl+F no seu teclado,procure por <head> e acima dele cole o seguinte código
<link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'/>Para esclarecer:essa é uma fonte especial que será usada no menu,mas ela precisa estar no blog para funcionar,por isso é preciso colocá-la acima de <head>
Depois disso procure por <b:skin> e clique nos três pontinhos para expandir,em seguida procure por ]]></b:skin> e acima dele cole o seguinte código
/*** Menu fixo por honey-pixel ***/Explicando os códigos: Sugiro que não mexa em nada além das partes em azul.O primeiro,o segundo e o último background são relacionados a cor do menu,no caso a cor que está no código é a mesma do meu blog.O terceiro background é relacionado a cor da fonte e o quarto é a cor quando estiver em hover,ou seja,quando você aproximar o mouse da palavra.O float ali em azul é a posição do menu,se você quer ele na esquerda mude para left,se quer para a direita mude para right,se quiser ele centralizado não mude nada.
#menufixedbg {
background: #00BFFF;
width: 100%;
height: 42px;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
#menufixed {
background:#00BFFF;
font-family: 'Nunito', sans-serif;
font-size: 14px;
text-transform: uppercase;
}
#menufixed li {
list-style-type: none;
display: inline;
float: center;
padding: 0;
}
#menufixed li a {
color: #E6E6FA;
text-decoration: none;
text-shadow: 1px 1px 0px #424242;
padding-right: 24px;
line-height: 42px;
}
#menufixed a:hover {
color: #FFE4E1;
}
#menufixed ul {
list-style: none;
margin: 0;
padding: 0;
background: #00BFFF
margin-left: -40px;
}
#menufixed li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 120px;
padding-left: 40px;
}
#menufixed li ul a {
font-size: 12px;
line-height: 24px;
}
#menufixed li:hover ul ul,
#menufixed li:hover ul ul ul,
#menufixed li.sfhover ul ul,
#menufixed li.sfhover ul ul ul {
left: -999em;
}
#menufixed li:hover ul,
#menufixed li li:hover ul,
#menufixed li li li:hover ul,
#menufixed li.sfhover ul,
#menufixed li li.sfhover ul,
#menufixed li li li.sfhover ul {
left: auto;
}
Salve as alterações e está quase pronto,agora falta você acrescentar as páginas ao menu,para isso vá em Layout>Adicionar Gadget>HTML/Java Script> e cole o código a seguir fazendo as alterações necessárias
<div id="menufixedbg">O código é auto explicativo,mas mude apenas as partes grifadas ok
<div id="menufixed">
<li><a href="LINK1">Home</a></li>
<li><a href="LINK2">Sobre</a></li>
<li><a href="LINK3">Tutoriais</a></li>
<li><a href="LINK4">Créditos</a></li>
<li><a href="LINK5">Contato</a></li>
</li>
</div></div>
Depois disso salve e está pronto,sugiro que deixe o gadget como está no meu,pois não testei deixá-lo de outro jeito.
Espero que tenha dado certo,qualquer dúvida estou a disposição.
Agora vocês tem que me ajudar e dizer qual tutorial preferem:
1-Perfil da autora personalizado com imagem+descrição
2-Botões de redes sociais+modelos de botões
3-Rodapé personalizado como o daqui do blog
Beijos doces ^.^
0 comentários
Obrigada por ter lido a postagem
Conte-me o que achou *--*
Deixe seu link nos comentários para que eu possa retribuir a visita <3
Se preferir para deixar seu link use
Esse código para comentar