19/11/2014

Tutorial: Menu 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:



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

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



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

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

Nenhum comentário:

Postar um comentário