02/02/2013

Tutorial: Menu Out

||

Yo!!! Fui tomar café e tive que sair com minha mãe, fomos fazer algo especial para melhorar o blog, sem dizer que passamos em uma livraria e lojas de CDs. Comprei bastante cds e um livro (A Batalha do Labirinto),  inclusive 2 mangás (Mirai Nikki 1- Black Butler 3), estou louca para ler. Mas antes vamos ao primeiro tutorial do dia. Ele se chama "Menu Out", achei ele no KW então ai esta os merecidos créditos. Vamos ao menu? Ele e super fácil de fazer, o efeito e super simples mas é perfeito para menus de sidebar. Caso queira dar uma olhada veja aqui.


Vá ate seu HTML e procure por ]]><b:skin , assim que o achar acima dele adicione esse código:

.menu {width: 100px; font-size: 15px;  font-family:'Stars From Our Eyes'; color: #fff;float:left;  letter-spacing:1px; text-align:center; margin:2px;-webkit-transition:All 1s ease;-moz-transition:All 1s ease;-o-transition:All 1s ease;-webkit-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(0.828) skew(1deg) translate(0px); }
.menu:hover {-webkit-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);-moz-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);-o-transform: rotate(0deg) scale(1.02) skew(1deg) translate(0px);}
/** Fonte personalizada **/
@font-face {font-family: 'Stars From Our Eyes';src: url('http://static.tumblr.com/mmrynko/17Dm6e4ef/starsfromoureyes.ttf') format('truetype'); font-weight: normal; font-style: normal;}

Modifique as partes marcadas em vermelho, e salve. Vá ate seu layout e abra um gadget de HTML Java/Scripte dentro dele adicione:

<a href="link" class="menu"> <div style="COLOR: #fff;">Home</div></a>

Arrume as partes em negrito, e prontinho. E ai gostaram?

4 comentários:

  1. Olá ~ ^^ Gostava de saber uma coisa <__< Quando terminei a edição, as letras ficaram brancas (e como o fundo é branco, não se consegue ler) e não consigo mudar a cor O__O Como posso mudar? o:

    ResponderExcluir
    Respostas
    1. É sómudar a cordafonte que esta no código como color: #fff;

      Excluir
  2. kkkk esqueça o: já consegui xD Obrigado pela atenção na mesma (:

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram