Menu Obli

Postado por em
visibility
Aprenda a como fazer o menu continuando a ler a postagem!

1 Vá para Tema > Editar HTML > Clique na caixa de código e aperte Ctrl + F ou F3 > Procure por <head> > Cole o seguinte código abaixo: <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/> Isso irá importar os ícones do Google Material.
2 Ainda dentro da caixa de códigos do seu blog, procure por ]]></b:skin> e cole a seguinte parte de código acima: obliBox { display: block; float: left; position: fixed; background: #a7383b; /* Cor de fundo */ padding: 15px; margin-top: 100px; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } obliBox a { color: white !important; /* Cor dos links */ display: block; margin-top: 15px; } obliBox a:hover { transform: translate(5px, 0px); -webkit-transform: translate(5px, 0px); -moz-transform: translate(5px, 0px); -o-transform: translate(5px, 0px); -ms-transform: translate(5px, 0px); } obliBox, obliBox a, obliBox a:hover { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; } obliBox a:first-child { margin-top: 0px !important; } @media only screen and (max-width: 1000px) { obliBox { margin-left: -47px; -webkit-border-bottom-right-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; } obliBox:hover { margin-left: 0px; } } 3 Faça as alterações necessárias.

4 Ainda dentro da caixa de códigos do seu blog, procure por <body> e cole a seguinte parte de código abaixo>
home person mail_outline folder grade 5 Faça as alterações necessárias.
Obtenha mais ícones em fonts.google.com/icons (opção "Filled").
6 Salve.

Comentários

  1. Karla Cunha17/12/13

    Esse menu é bem legal para sites executivos. Bom, eu acho.

    etcforme.blogspot.com

    ResponderExcluir
  2. Unknown17/12/13

    Curti muito! Vou pensar em usá-lo dependendo da forma que eu fizer o novo layout do blog.
    xo, Nicolle

    Dias e Flores ♡

    ResponderExcluir
  3. Bebê Cruel17/12/13

    Esse menu é muito lindo, eu adoro.
    xoxo Magia Teen

    ResponderExcluir
  4. Andressa25/1/14

    Ola este teu tutorial,tinha esquecido de dar creditos pos postei ele no meu blog,foi levado como plagio,me perdoe,nao pense mal de mim,nunca plagiei ninguem,acho isso horrivel,sou uma pessoas digna,pra mim pode ser que tudo fique horrivel mas nao vou aprender a melhorar meu html plagiando.Espero que isso foi apenas um mal intendido.Bjs sucessos.

    ResponderExcluir
  5. Cute ♡29/1/14

    Eu gostei desse menu pena que não combina com meu blog :3
    Amei seu layout, é tão prft *--*
    Beijos da Mih :*

    http://garotasdohtml.blogspot.com.br/

    ResponderExcluir

Postar um comentário

Fique à vontade para interagir e tirar dúvidas.
• Peça tutoriais em Contato
• Você pode usar as tags negrito (<b>), itálico (<i>) e links (<a>)
• Comente com o link do seu blog para que eu possa visitá-lo ♪(^∇^*)