6 de ago. de 2014

Menu no topo

Me foi pedido na ask como fiz o menu no topo. Este menu é fofo, pequeno e não
acumula espeço.


Coloque acima de ]]></b:skin>

.position {margin-top: -150px; margin-left: 920px; position:absolute;-webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s;z-index:101;}

.position:hover {margin-top: -5px;}
.menu1{background: rgba(0,0,0,0.03);padding: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.15), 0 1px 1px rgba(255,255,255,0.35); text-align: just;cursor:pointer;}
.menu {display : block;font-size: 8px;font-family: 'Arial', sans-serif;letter-spacing : 0;margin-left: 1px; margin-right: 1px; background-repeat : no-repeat;text-indent :7px;vertical-align : middle;text-decoration : none;line-height : 21px; margin-bottom : 1px;padding: 0px;border-top: 1px solid #fff;background : #f5f5f5; text-shadow: 1px 1px 1px #fff; text-transform:uppercase; color: #999;}
.menu a {color:#fff;text-transform: uppercase;text-shadow: 0px 1px 0px #fff;text-decoration:none;}
.menu:hover {display : block;font-size: 8px;font-family: 'Arial', sans-serif;letter-spacing : 0;margin-left: 1px; margin-right: 1px; background-repeat : no-repeat;text-indent : 8px;vertical-align : middle; text-decoration : none;line-height : 21px; margin-bottom : 1px;padding: 0px;border-top: 1px solid #fff;background : #f5f5f5; text-shadow: 1px 1px 1px #fff; text-transform:uppercase; color: #999;
}

Abaixo de  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
coloque:

<div class='position'><div class='menu1'>
   <a class='menu' href='LINK'>NOME</a>
<a class='menu' href='LINK'>NOME </a>
   <a class='menu' href='LINK'>NOME</a>
   <a class='menu' href='LINK'>NOME</a>
<a class='menu' href='LINK'>NOME</a>
<a class='menu' href='LINKl'>NOME</a>

</div>
<img src=' URL DO BOTÃO DO MENU- DIMENSÕES LARGURA 100PX- ALTUAL 28PX '/>
 
</div>

Onde tem: link-coloque o link da postagem e nome-coloque o nome da postagem.

8 comentários :

  1. esse menu dá para usar em simultâneo com o menu padrão do blogger?

    ResponderExcluir
    Respostas
    1. Sandra, se quiser dá, mas precisa colocar os links e o nome para ser redirecionado a postagem.

      Excluir
  2. - Adorei o tuto e o menu é lindo!
    ~Kiss ~>Mini Realeza<~

    ResponderExcluir
  3. Adorei flor ! Já estou te seguindo , pois o blog é ótimo ! Beijão ;3 .
    http://diamondiamonds.blogspot.com.br/

    ResponderExcluir
  4. Ai obrigado pelo tuto, estava louca procurando, pois vou usar no meu layout free eu acho realmente esse menu é fofo e não acumula espaço *¬*

    XOXO || Candy Girl

    ResponderExcluir
  5. Venho aqui direto para ver os tutoriais e adoro ! Parabéns flor, já tô seguindo, segue de volta ?
    Sigo todos que seguirem o meu blog. Beijocas

    http://blogmichelecaroline.blogspot.com/

    ResponderExcluir

Qualquer dúvida pergunte que
responderei com prazer.
Só peço que seu comentário
seja relacionado à postagem.

© Princess Tutoriais- Agradece sua visita
2014. Todos os direitos reservados
Pedidos? dúvidas? nos comentários ou na Ask.
imagem-logo