Menu Pixel vertical flutuante

Olá pessoal, como vai o dia de vocês? O meu vai ótimo assisti a primeira seção de Esperança parte 1 aqui na minha cidade. Amei, amei, amei o filme! Estava uma agitação que só, parecia um Mar de Monstros rsrs de tanta gente, mas foi bem divertido, até, tirei fotos com tributos que nem conhecia rs me chamaram e eu fui, ué. Ainda bem que não sai tão feia na foto, porque tenho cara de tributo que já morreu a mais de um mês. Mas irie repetir a dose no dia 20, pois filme de livros que eu amo vejo duas ou mais vezes quando posso. Mas chega disso, vamos falar da postagem de hoje. Nesse belo dia trago um pedido da Ask menu vetical flutuante.

É bem fácil de colocar além de ser uma graça, pelo menos eu acho uma gracinha. É um ótimo menu para quem gosta de economizar espaço, mas, não recusa colocar um no blog (meu caso). Os códigos são bem fáceis de entender é coloquei com explicação. Coloquei dois modelos diferente saindo de dentro de um gadgdet e flutuando ao lado de um gadget é o mesmo menu, apenas mudei a margem e distancia.

OBS: Quando se usa esse código e necessário arrumar o "margin top", porque se colocar texto ou outra coisa acima do menu, ele vai descer e se ficar sozinho irá subir. Então aconselho arrumar tudo dentro do gadget primeiro, para depois adiciona-lo e ajeitar ele.

Exemplo 1: Menu

(Bunny Crazy - Layout Wa)

1. Vá ate o Modelo >> Editar HTML. Ao entrar na área dos códigos procure por ]]></b:skin>, e acima dele cole:

Códigos

#menubc{ opacity: 1; /* nao mexa */ position:absolute; /* posiçao */ margin-top:-160px; /* margem para subir */ margin-left:223px; /* margem para o lado */ overflow:hidden; /* nao mexa */ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; } #menubc a{ display: block; /* nao mexa */ line-height: 4px; /* nao mexa */ padding-right:5px; /* nao mexa */ margin-left:0px; /* nao mexa */ margin-bottom:1px; /* nao mexa */ padding:4px; /* espaço dentro do menu */ width:35px; /* largura */ height: 6px; /* altura */ background: rgba(238,223,199,.5); /* cor de fundo */ border-right:4px #e26b71 solid; /* borda */ font-family: PF Arma Five; /* fonte */ font-size:8px; /* tamanho de fonte */ color:#baaa90; /* cor de fonte */ text-align:right; /* posiçao de fonte */ text-transform: uppercase; /* tipo de fonte */ -webkit-transition:all .3s linear; -moz-transition:all .3s linear; -ms-transition:all .3s linear; } #menubc a:hover{ border-right:0px #CCC solid; /* borda */ padding-right:6px; /* nao mexa */ }

2. Agora vá até "Layout" e crie um novo, ou abra um, gadget html/javascript e dentro dele cole:

Códigos

<div id="menubc">
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
</div>

Exemplo 2: Menu

(Bunny Crazy - Layout Sweet Food)

1. Vá ate o Modelo >> Editar HTML. Ao entrar na área dos códigos procure por ]]></b:skin>, e acima dele cole:

Códigos

#menubc{ opacity: 1; /* nao mexa */ position:absolute; /* posiçao */ margin-top:-102px; /* margem para subir */ margin-left:216px; /* margem para o lado */ overflow:hidden; /* nao mexa */ -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out;transition: all 1s ease-in-out; } #menubc a{ display: block; /* nao mexa */ line-height: 4px; /* nao mexa */ padding-right:5px; /* nao mexa */ margin-left:0px; /* nao mexa */ margin-bottom:3px; /* nao mexa */ padding:4px; /* espaço dentro do menu */ width:35px; /* largura */ height: 6px; /* altura */ background:#dbcfc0; /* cor de fundo */ font-family: PF Arma Five; font-size:8px; /* tamanho de fonte */ color: #a3998d; /* cor de fonte */ text-align:center; /* posiçao de fonte */ text-transform: uppercase; /* tipo de fonte */ box-shadow: 1px 1px 1px #a3998d, inset 0px 0px 5px #dbcfc0; /* sombra */ -webkit-transition:all .3s linear; -moz-transition:all .3s linear; -ms-transition:all .3s linear; } #menubc a:hover{ background: rgba(250,250,00,0.00); box-shadow: 0px 0px 0px #a3998d, inset 0px 0px 0px #dbcfc0; }

2. Agora vá até "Layout" e crie um novo, ou abra um, gadget html/javascript e dentro dele cole:

Códigos

<div id="menubc">
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
<a href="#">edit</a>
</div>

OBS do menu 2: No hover vai aparecer a sombra do último botão, o segredo de não aparecer é a cor da sombra, deve ser similar ao do fundo do blog, se for imagem é só selecionar uma cor que disfarce.

É isso! Espero que tenham gostado do tutorial, consegui criar esse menuzinho com ajuda do Dicas Para Blogger. Então até aproxima amores, kiss kiss.