Menu Obli


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: 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>
5 Faça as alterações necessárias. Obtenha mais ícones copiando os nomes deles de material.io/icons.

6 Salve.

5 comentários, comente também!

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

    etcforme.blogspot.com

    ResponderExcluir
  2. 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. Esse menu é muito lindo, eu adoro.
    xoxo Magia Teen

    ResponderExcluir
  4. 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. 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

• Peça tutoriais em 'Contato'
• Comente com o link do seu blog para que eu posso visita-lo
• Você pode usar as Tags negrito, itálico, links...