7/05/2013

Tutorial - Como colocar o menu lateral hover


Minhas lindinhas hoje venho aqui para trazar um tuto , do blog Sweet Gilr que é um Blog otimo..O tutorial e como coloca menu lateral hover.Menu lateral hover , e  tipo uma linha personalida no canto do blog e ao passar o mouse o menu aparece assim:



(Desculpe tive problemas para colocar a imagem)


Se você gostou e quer no seu blog clique em leia mais e vamos lá !!
1- vá  no  inicio do seu blog ,clique em modelo >Edital HTML
2- Clique dentro do quadrado onde tem os codigo e aperte Ctrl + F3  no seu teclado e procure por

 ]]></b:skin>

Se você não achou ,bom não sei o que dizer porque deveria estar lá
mas se você achou  faça o seguinte

3-Cole acima de    ]]></b:skin>  o seguinte codigo .


.menuam { width: 185px; padding: 13px; height: 100%; border-right: 8px solid #FF3E96; background: #FFC0CB; 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: #FFFAFA; color:#FF69B4; 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; }

Entendendo o Codigo :


*Pode mudar as cores do jeito que quiser. Clique aqui para ver a tabela de cores.menuam → border-right (borda).menuam → background (fundo do menu).menuam a → background (fundo das páginas).menuam a → color (cor do link).menuam a:hover → (fundo das páginas quando passa o mouse)* 


Agora do mesmo jeito que procurou o outro codigo ,procure este:

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

Achou ? agora Cole bem acima  o seguinte codigo .

<div class="menuam"><a rel="nofollow"><font style=" text-transform: none; font: italic 20px georgia;"><div align="left">Título do Blog</div></font></a><a href="/">volte ao início</a><a  href="URL DA PÁGINA" onClick="changeNavigation('profile');">NOME DA PÁGINA</a><a  href="URL DA PÁGINA" onClick="changeNavigation('ask');">NOME DA PÁGINA</a><a href="URL DA PÁGINA" onClick="changeNavigation('extras');">NOME DA PÁGINA</a>   </div>



Agora e só substituir "URL DA PÁGINA" pelo URL que você deseja colocar  e substituir "NOME DA PÁGINA" pelo no  que o link vai abrir

Entenderam ? se Não comentem que eu ajudo um beijão 
                                                                       

Nenhum comentário:

Postar um comentário

Leia as regras:
Todos os comentários são lidos e respondido previamente.

-Seu comentário precisa ter relação com o assunto do post.
-Proibido Comentários Anônimos
-Não xingue ou desrespeite a dona e os outros comentaristas
*Não faça propaganda de seu blog aqui.

Leu tudo?
Então comente!