Menu Obli


Oi gente, tudo bem? Estou bem, Como faz um tempinho que não posto algum tutorial que eu fiz, decidi postar um menu que estarei usando no próximo layout do blog(já estou fazendo o próximo layout do blog). Ele é bem simples, ele fica fixo no lado esquerdo do seu blog, e contem imagens.


Se achou interessante, clique em Leia Mais :3

1. Vá em Modelo > Editar HTML > Clique na caixa de código e aperte Ctrl + F, procure por ]]></b:skin>, acima cole:
.caixamenu {
float: left;
margin-top: 50px; /*-- Distância do topo do blog e da caixa do menu --*/
width: 45px;
display: block;
background: url("http://static.tumblr.com/wkafvsi/RFKmvlxnw/35.png") repeat;
position: fixed;
z-index: 100;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
#obli {
margin-top: 5px;
margin-bottom: 5px;
opacity: 0.5;
-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;
}
#obli:hover {
opacity: 1;
-webkit-transition: all 0.2s linear;-moz-transition: all 0.2s linear;-o-transition: all 0.2s linear;
}
2. Procure por <body> ou </header>, abaixo cole:
<div class='caixamenu'>
<a href='/' title='início'><img id='obli' src='http://static.tumblr.com/1ixsykm/MfImibil2/home.png'/></a>
<a href='LINK' title='pergunte'><img id='obli' src='http://static.tumblr.com/1ixsykm/NlZmibipu/ask.png'/></a>
<a href='LINK' title='marcadores'><img id='obli' src='http://static.tumblr.com/1ixsykm/gI1mibiti/tags.png'/></a>
<a href='LINK' title='Goodies'><img id='obli' src='http://static.tumblr.com/wkafvsi/odsmxwikj/goodies.png'/></a>
<a href='LINK' title='Layout Free'><img id='obli' src='http://static.tumblr.com/1ixsykm/Cpwmibiux/themes.png'/></a>
</div>
3. Visualize, se ficou certo salve.

3.1 Você pode adicionar mais abas, apenas cole este código antes de </div>
<a href='LINK' title='TÍTULO DO TOOLTIP'><img id='obli' src='LINK DA IMAGEM'/></a>
Mais imagens: x x x x
Crédito das imagens: CH

Se quiser tirar alguma aba, apague de <a href até </a>.

Qualquer dúvida comente, se usou credite ao We Heart HTML! Tchau :3
Compartilhe no Facebook
Compartilhe no Twitter
Compartilhe no Google+

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

Créditos



O Projeto Aurora foi criado completamente, com tutoriais disponíveis no blog, por mim, Alan Felipe Jantz.

Para as postagens 'reblogadas', os créditos do local de origem dos tutoriais está no final da postagem.

Todos os ícones utilizados neste template foram pegos no flaticon.com, todos os direitos reservados para os autores dos mesmos.





Algo que é seu está aqui, mas não foi creditado?
Entre em contato clicando na aba 'Contato' do menu para receber seus créditos!
BouquetNOVO
The Only ExceptionNOVO
Wide AwakeNOVO
Simple BaseNOVO
NatureNOVO
Why so Pink?NOVO
Why So Blue?NOVO