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:

  1. Ja sabia como fazer mesmo assim acho super util e da um ar mais bunitinho no blog...
    Nhaaaack...
    xoxo

    imperfectsmiles- nathi.blogspot.com

    ResponderExcluir
  2. já usei esse menu no meu blog,é bem legal e diferente!
    ja estou participando*
    bjs
    Nois Conectados

    ResponderExcluir
  3. criativo (= rsr nunca tinha visto o tutorial o.o
    fashion em cores(.com)

    ResponderExcluir
  4. Que bacana que você não vai nos abandonar anjo! Eu estive com essa decisão nas mãos nos últimos dias, mas sabe, apesar da correria e as vezes o desanimo o blog é uma parte importante da gente, com um esforço sempre dá para manter!
    Olha qualquer coisa que precisar estou aqui viu? Força meu anjo!
    beijos da Érr#
    http://viceveersa.blogspot.com.br/
    https://www.facebook.com/viceveersa
    @err_ma

    ResponderExcluir
  5. Nossa vc voltou! ^^ Adorei, e ainda bem que relembrou de coisas boas, eu não estou aqui desde o começo mas quero ficar até o fim ^^
    O meunu eu ja sabia fazer! ^^ Mas ele é muito util!

    jovenclube(.blogspot.com)

    ResponderExcluir
  6. Que bom que voltou!!! Também já pensei nisso, mas acabei me tocando de que isso faz parte né, o desanimo as vezes vem, mas a gente lembra de todo o esforço e tal's..daí tudo volta *-*
    Não conhecia esse tuto *o* adoreei! (P.S.: Não tô participando do concurso porque não tenho facebook, daí é contra as regras T.T mas queria muito!)

    Beijoos ;33

    besteirolls.blogspot.com.br/

    ResponderExcluir
  7. Vc voltou!! Que saudadee!!
    Se vc deixasse o blog qm hiatos, eu iria ter sar uma surra ok?
    kkk Não leve minha pequena loucura a mal blz??
    Amei o menu e amei principalmente ter vc de volta.
    Desanimo faz parte e não desistir também.

    Beijo's

    [www]

    ResponderExcluir

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