#Tutorial Menu Fixo Roll
Olá Pessoal^^
Tudo bem com vocês? No post de hoje eu irei ensinar a colocar um menu super básico que esta sendo muito usado ultimamente, sabe aquele menu que quando você desce a pagina e o menu desce no Topo também? Então e esse menu que irei ensinar a vocês pra colocar no seu blog^^.
Confira o tutorial a baixo:
Você ira entrar em Layout>Adicionar Gadget> HTML/javaScript> Logo em Seguida você ira colocar esse codigo.
<div id="menufixo">
<div id="menufixo"><li><a href="Link da Pagina">Inicio</a></li>
<li><a href="Link da Pagina">Inicio</a></li>
<li><a href="Link da Pagina">Inicio</a></li>
<li><a href="Link da Pagina">Inicio</a></li>
</div>
</div>
E ira alterar o Link da Pagina eo Nome da Pagina. Você salva o Gadget e vai em Modelo>Editar HTML>. Clica no Ctrl+F e procure por ]]></b:skin>, em cima do ]]></b:skin> você ira colocar esse Codigo.
/* Menu fixo no topo do blog by Elaine Gaspareto --------------------------- */ #menufixo { width: 72%; text-aling: center; color: #f38630;/*--cor da fonte--*/ padding-left: 100px; font-weight: none; margin: 183; height: 40px; /* altura do menu */ position: fixed; top: 0; left: 183px; background: #a7dbd8; /* cor de fundo do menu */ font-family: 'Josefin Slab'; /* nome da fonte */ font-size: 14px; /* tamanho da fonte */ text-transform: none; opacity: .90; } #menufixo li { list-style-type: none; display: inline; float: center; /* posicionamento do menu */ padding: 0px; } #menufixo li a { color: #fff; text-decoration: none; padding-right: 24px; line-height: 42px; } #menufixo a:hover { color: #f27c15; /* cor do link da fonte em hover */ } #menufixo ul { list-style: none; margin: 0; padding: 0; background: #f38630; 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; } #menufixo { margin: 0; float: center; padding: 0; } #menufixo ul { float: center; list-style: none; margin: 0; padding: 0; } #menufixo li { list-style: none; margin: 0; padding: 0; } #menufixo li { float: center; padding: 0; } #menufixo li ul a { width: 140px; } #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul { left: -999em; } #menufixo li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #menufixo li li.sfhover ul, #nav li li li.sfhover ul { left: auto; } #menufixo li:hover, #nav li.sfhover { position: static; }
Creditos By:
Elaine Gaspareto
E pronto o Menu estará no blog, se vocês quiser alterar o código é super fácil.
Então Gente se vocês gostaram do Post ou tem uma Duvida e só comentar que irei responder, ah fiquem ligados no blog em breve irá ter a Tag #Personalizando Meu Blog do Zero.
Deixe sugestão de tutorial nos cometários!
Eu queria a sua ajuda. Tem vários códigos que não aparecem no meu blog mas, no meu blog teste sim e o meu blog teste é o modelo travel, o mesmo do meu blog que eu uso o que faço???
ResponderExcluirhttp://nekasecrets.blogspot.com/
Oi Lais Tudo Bem? Deve ter alguma coisa no seu blog que esta afetando os codigos ou Gadgets aparecer. Eu acho melhor voce trocar o seu Template, e colocar outro aqui no blog tem varios templates. Beijos Yuuh
ExcluirOlá,eu gostaria muitíssimo de saber como fazer um menu igual ao daqui do Sugoi,em que passa o mouse e aparece o ícone.Você poderia fazer um tutorial?
ResponderExcluirOi Mariana, o menu daqui é aquele do blog cherry bomb, o link é esse
Excluirhttp://sugoitutoriais.blogspot.com.br/2013/01/menu-em-imagen-com-efeito-over.html
Ah,obrigado Jéss,vou usar,os tutos daqui do sugoi e do Cherry sempre me ajudam! bjs
Excluirhttp://damasdorabisco.blogspot.com.br/
https://www.youtube.com/watch?v=oB9SDiWayw4
ResponderExcluir