22.5.13

Menu Breaking Free



Hey Cherries!
To aprendendo francês, mas o problema é que só sei falar petit. Vô me ferrar
Então, estou trazendo o segundo tuto do dia. Talvez amanhã eu traiga um tutorial de como aplicar tooltip... Agora vou ensenhar a aplicar outro menu de sidebar. Sabem, eu tinha um blog antes mas deu xabu no HTML dele e aconteceu que puf! Não funciona mais. Mas eu tinha um blog de preview dele e vou usar pra cá. Ele é feinho mas é so pra vocês terem uma noção do que se trata cada menu.
O nome desse menu se originou de quando eu soube que não tinha aula e me senti livre. Irônico não? OK, o peview é esse daqui, está no primeiro gadget. Comecemos!


1) Vá para Modelo > Editar HTML.

2) Aperte ctrl + F e procure por:

]]></b:skin>

3) Em cima  desse código, cole o seguinte faça as modificações de acordo com a legenda.


.menu3 {background: #eee; font-family:Pf Arma Five; font-size:8px; text-transform: uppercase; color: #262626;
text-align: center; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out;
padding:2px 0px 2px 10px; opacity: 1;margin-bottom:4px; border-right:12px solid #121212; border-left:12px solid #121212; }
.menu3:hover { border-right:2px solid #000; border-left:2px solid #000;  }
.menu3 a { color: #262626;  }
.menu3 a:hover { color: #fff;}
.gallery { list-style: none; margin: 1px auto; padding: 0; width: 502px; font-size: 0; } .gallery li{ display: inline-block; *display: inline; zoom: 1; width: 160px; height: 160px; margin: 1px; transition: all .3s ease; } .gallery:hover li:not(:hover){ -webkit-filter: blur(2px) grayscale(1); opacity: .7; }
.hbri {background-image: url(http://static.tumblr.com/no9dwxu/i5Emfzdv1/brilhoilove.png);
background-repeat: no-repeat;
background-position: -250px -250px;
position: absolute;
left: -5px;
top: 0px;
width: 76px;
height: 76px}
.hbri:hover {background-position: 20px -20px;
-webkit-transition:All 0.9s ease-in-out; -moz-transition:All 0.9s ease-in-out; -o-transition:All 0.9s ease-in-out;}
.pbri {position: relative;
float: left;
margin-left: 18px;
margin-top: 10px;
width: 78px;
height: 78px;
margin-bottom: 1px;
margin-right: 1px;}


PS: As palavras em AMARELO são parte da barrinha preta que se afasta e vai pra margem, a parte em LILÁS, é a parte cinza, onde está escrito. NÃO MUDE A PARTE EM VERMELHO.

4) Em um gadget de HTML cole o seguinte código e modifique com os links e o nome da página.

<div class="menu3"><a href="SEU LINK">Nome da Page </a></div>

Entenderam tudo? Deu certo? Tem dúvidas? Qualquer coisa envia um comentário!

6 comentários:

  1. Mais que divo esse menu , adorei *o*
    ~simples e meigo~
    http://meubloguinhofofo.blogspot.com.br/

    ResponderExcluir
  2. Que menu fofinho !!!!Acho que fui um dos poucos a visitar seu blog !!!Mas ele ta super organizado e fofo,assim você vai longe !!!

    Segue ?http://clube-dos-blogueiross.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada! Vi seu blog e tamém achei fofo e organizado! Obrigada por comentar!

      Excluir