29 outubro 2012

Tutorial: Menu Passe o mouse

Meu noivo, nom é lindo? =w=

Yooooooooo Minnaaaaa o/
Daijobu? :3
Desculpa eu to com dificuldade de postar utilitários porque fiz besteira com o photoshop e com o resto do computador --'
Mas vim aqui postar um tutorial de um menu que eu acho uma graça *-*


                (Tirei do meu velho blog -qq)

Let's Go!?




1º Entre em Modelo - Editar HTML - Prosseguir

2º Depois procure por:

]]></b:skin>

Cole o seguinte código ANTES do código que acabou de encontrar:


.menuam { width: 185px; padding: 13px; height: 100%; border-right: 8px solid #cbd6df; background: #efefef; color: #; 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: #6881AB; color: #fff; 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: #919191; -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; }


3º Agora procure por:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

 Quando encontrar cole o seguinte código ACIMA do código que acabou de achar:


<div class='menuam'>
<a rel='nofollow'><font style=' text-transform: none; font: italic 20px georgia;'><div align='left'>NOME DO BKOG</div></font></a>
<a href='/'>volte ao início</a>
<a href='URL DO LINK' onClick='changeNavigation(&apos;profile&apos;);'>NOME DO LINK</a>
<a href='URL DO LINK' onClick='changeNavigation(&apos;ask&apos;);'>NOME DO LINK</a>
<a href='URL DO LINK' onClick='changeNavigation(&apos;extras&apos;);'>NOME DO LINK</a>
<a href='URL DO LINK' onClick='changeNavigation(&apos;extras&apos;);'>NOME DO LINK</a>           
</div>

ATENÇÃO: O código é meio complexo para ser alterado, recomendo que só faça isso se entender bastante de HTML.

Se quiser mais links cole:

onClick="changeNavigation('ask');">NOME DA PAGINA</a> <a href="URL DA PÁGINA" 
Antes de </div>

Bem gente, é só. Qualquer duvida é só perguntar ^-^

Ja nee ~

Um comentário:

  1. *o*
    Queria tanto um menu assim... Achei!
    Irei usá-lo no meu próximo lay :I
    Sayo~

    ResponderExcluir