Boas Vindas + Menu "Passe o Mouse".


  Olá pessoal, quanto tempo, né?! Senti muitas saudade de todos vocês, meus queridos leitores que sempre visitam o eJhonas.com, que estão comigo desde o começo de tudo.. Eu pensei muito na decisão de deixar o blog em Hiatus permanentemente, porém eu recordei de alguns momentos, muito especiais, como a primeira meta comprida, os grandes comentários elogiando ou dando dica.. daí não consegui ir em frente com a decisão de deixar ele fora do ar para sempre.. a parti de hoje mesmo, o eJhonas voltará ao normal. Gostaria de falar mais uma coisinha para vocês, nesse tempinho eu ainda visitei o blogger, aceitei comentários, e tudo mais, vi que não tem muitos participando do concurso .com, para os que não sabem do concurso clique aqui, tem uma clausula bem especifica na noticia.. na qual é: "Caso menos de 100 pessoas participem do concurso até o dia 04/09, o prazo poderá ser maior (De acordo com o número de participantes no momento atual)." Então é isso que gostaria de falar, agora vamos ver o tutorial é muito interessante e, fica perfeito no Layout.
 Vá no Blogger  Layout  Adicionar Gadgets  HTML/Javascript  Cole este código:
<div class="menuam">
<a rel="nofollow"><font style=" text-transform: none; font: italic 20px georgia;"><div align="left">Título do seu Blog</div></font></a>
<a href="/">Volte ao Início</a>
<a href="Url da Página" onclick="changeNavigation;">Nome da Página</a>
<a href=" Url da Página" onclick="changeNavigation;">Nome da Página< </a>
<a href=" Url da Página" onclick="changeNavigation;">Nome da Página< </a>
</div>
<style>.menuam { width: 185px; padding: 13px; height: 100%; border-right: 8px solid #000;background: #fff; color: #000; top: 0; margin: 0; position: fixed; left: -200px; height: 100%; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; overflow: hidden; cursor: default; font-weight: normal; z-index: 12345; }
.menuam:hover { left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }
.menuam a { border: none; background: #000; color:#b5b5b5; padding: 5px; display: block; width: 100%; text-transform: uppercase; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; font-size: 7pt; margin: 5px -10px; text-shadow: 0 1px 1px #; }
.menuam a:hover { background: #000; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; padding-left: 20px; }
.menuam a:first-child { margin-top: 10px; } .menuam a:last-child { margin-bottom: 0px; }
.menuam a { padding: 4px 6px; }</style>
Entendendo um pouquinho mais: 
border-right: 8px solid #000 : É a borda do menu, onde você passará o mouse, e as opções aparecerão.
background: #fff : É o fundo todo do menu.
.menuam a { border: none; background: #000 : É a cor do fundo das opções do menu.
color:#b5b5b5 : Cor das letras do menu.
background: #000 : É a cor do hover das opções, quando passa o mouse por cima.
Consegui este tutorial com o blog World Of Tutos, porém eu adaptei algumas coisas, mais é claro, o crédito é todo deles!
Não poderia me esquecer de avisar vocês né, o eJhonas está tendo o seu primeiro Concurso valendo um domínio .com (Perfeito, não acham?), Caso queira participar basta clicar aqui.

7 comentários

Postar um comentário

© eJhonas - 2012. Todos os direitos reservados.
Design Jhonas Balsas.
Tecnologia do Blogger.
imagem-logo