Menu Fixo no Topo


Testei no modelo Travel e funcionou direitinho!

 Faça sempre backup do seu template antes de modificá-lo , ou tenha um                               blog de testes, caso algo dê algo errado.






1 - Vá em Modelo => HTML => Crtl F => body





Após : body {
        min-width: $(content.width);
      } 
cole o código abaixo

#menutopo { background: #f49e9c; /* Cor do fundo */ border-left: 200px solid #f49e9c;  /* Cor da borda */ width: 100%; /* Largura */ height: 50px; /* Altura */ position: fixed; top: 0; left: 0; z-index: 999; }#menu { background: #fff;       font-family: Century, sans-serif; /* Fontes */ font-size: 16px; /* Tamanho da Fonte */ text-transform: uppercase; }#menu li { list-style-type: none; display: inline; float: left;  padding: 0px; }#menu li a { color: #fff; text-decoration: none; padding-right: 24px; line-height: 37px; }#menu a:hover { color: #eed5d2; /* Cor da fonte ao passar o mouse */ }#menu ul { list-style: none; margin: 0; padding: 0; background: #fff; margin-left: 40px; } #menu li ul { z-index: 9999; position: absolute; left: -999em; height: auto; width: 120px; padding-left: -40px; }#menu li ul a { font-size: 12px; line-height: 24px; }#menu li:hover ul ul, #menu li:hover ul ul ul, #menu li.sfhover ul ul, #menu li.sfhover ul ul ul { left: -999em; }#menu li:hover ul, #menu li li:hover ul, #menu li li li:hover ul, menu li.sfhover ul, #menu li li.sfhover ul, #menu li li li.sfhover ul { left: auto; }#menureparo { float: right; color: #fff; }

Agora vamos à Edição:


Background:  Definindo o fundo do seu menu: voce pode colocar cor ou imagem

Cor -  background: #f49e9ccoloque a cor que  combine com seu blog. 

Clic e vá  á  Tabela HTML

Imagem -  background url(“Link da sua imagem”) ;

O que estiver em negrito pode ser mudado para que fique de acordo com a personalização do seu blog


2 - Vá em Layout => Adicionar um Gadget => HTML/ JavaScript







Coloque o código abaixo:

<div id="menutopo"><div id="menu"><li><a href="URL-LINK">HOME</a></li><li><a href="URL-LINK">TÍTULO</a></li><li><a href="URL-LINK">TÍTULO</a></li><li><a href="URL-LINK">TÍTULO</a></li><li><a href="URL-LINK">TÍTULO</a></li></div><div id='menureparo'></div></div>


***Onde tem  "URL-LINK" insira os links das postagens
***Onde tem  "TÍTULO" insira o títulos dos gadgets das postagens




Nenhum comentário:

Postar um comentário