27 julho 2015

Menu Up

| |
Olá! Quem já segue um blog faz um tempo já deve ter percebido que eu estou com uma crise. Já faz um tempo que eu estou sem diversidade aqui. Isso me deixa muito frustrada. argh.

Bem, indo direto ao assunto. Trago um menu que fiz há algum tempo. Pra ser honesta, eu já tinha me esquecido da existência dele. É um menu de imagem que eu geralmente uso. Exemplo.

Espero que gostem.




1. Abram o Editor e procure por ]]>< . Acima desse trecho, cole:

#isa-hi:hover #menu-up-isa {
opacity: 1;
}
#menu-up-isa {
opacity: 0;
position:absolute;
-webkit-transition: all .60s ease-in-out;
-moz-transition: all 1s ease-in-out;-ms-transition: all .60s ease-in-out;transition: all .60s ease-in-out;
margin-left: 4px; /* Move o menu para os lados */
margin-top: -39px; /* Move o menu para cima ou para baixo */
}
#menu-up-isa a {
-webkit-border-radius: 3px; /* Borda Arredondada */
-moz-border-radius: 3px; /* Borda Arredondada */
-o-border-radius: 3px; /* Borda Arredondada */
border-radius: 3px; /* Borda Arredondada */
padding: 3px;
width: 50px; /* Tamanho das caixinhas do menu */
float: left;
background-color: #B5B5B5; /* Cor do fundo */
margin-left: 2px;
font-family: 'font-family: 'Ubuntu Mono';
font-style: normal;
font-size: 11px; /* Tamanho da fonte */
text-align: center;
margin-top: 2px;
color: white; /* Cor da fonte */
text-transform: uppercase;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ie-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out; }
#menu-up-isa a:hover {
color: white; /* Cor da fonte ao passar o mouse */
background-color: #B5B5B5; /* Cor do fundo ao passar o mouse */
-webkit-transform: translatey(-12px);
-moz-transform: translatey(-12px);
-o-transform: translatey(-12px);
-ie-transform: translatey(-12px);
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-ie-transition: all 0.5s ease-out;}

2. Vá em Layout - Adicionar Gadget - HTML/Java e cole:

<div id="isa-hi">
<img src="http://31.media.tumblr.com/09b79b5e9a0045ea6800606109a9e15e/tumblr_inline_n0olleNAGJ1rcn02m.png"><br><div id="menu-up-isa">
<a href="http://SEU%20LINK">#1</a>
<a href="http://SEU%20LINK">#2</a>
<a href="http://SEU%20LINK">#3</a>
<a href="http://SEU%20LINK">#4</a>
</div>
</div>

3 comentários:

  1. Olá Isa S. <3~
    É a primeira vez que eu venho aqui no seu blog, pelo visto você posta muitos tutoriais não é? Eu não conhecia direito o blog, até porque é minha primeira vez aqui. Mas pelo que disse você era uma pessoa bastante diversa. Bem, por mim você nem precisa ter frustração. Até porque por mim, esse blog já está perfeito, se é que seja um que só poste tutoriais.
    Seria até bom se você postasse outras coisas divertidas.

    Achei o menu muito diferente, não havia lido nenhum tutorial dele. Acho que vou usar mais nas postagens do que nos gadgets. Na verdade usando em qualquer lugar já está bom. *Seguindo o bloguinho <33*

    ✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖✖
    Xoxo~ -------
    { Cake-sugar } ~
    - <33!

    ResponderExcluir
  2. Olá Isa, tudo bem?
    Essa crise é horrível, mas entenda que você é perfeita e seu blog também!
    Enfim, eu adorei esse menu. * amo menus que ficam na imagem do blog, tenho certas paixões por eles *
    Adorei o tutorial ;*

    Beijos,
    http://designer-lovers.blogspot.com.br/

    ResponderExcluir
  3. OI oi Isa o/
    Como vai?
    Ai essa crise é horrível, tanto que estou retribuindo o comentário que tu fez em meu blog 1 mês atrás :v ~le desvia de tapa tiro e bomba~
    Enfim, devo dizer que amei o menu <3 mega básico e fofinho sem contar que pode ser usado em qualquer layout (desde de que se tenha uma imagem né :v) amei amei <33
    Beijos no kore~~
    ☆ Colorful Dream~

    ResponderExcluir

« »