28/08/2013

Tutorial: Menu Crown

||

Ohayou Gozaimasu! Como vão? Recebi alguns pedidos para postar o menu que estou usando atualmente, então não querendo enrolar muito vim trazer a vocês, ele se chama Crown. Achei ele lá no R.O, mas a Sakune Mei disse que fez com base de um dos menus do KW, então creditem as duas. Falando no R.O sinto uma saudade das postagens de Sakune-san ... ate hoje não entendi do porque que entrou em hiatus. Bom vamos lá o menu é bem fácil de compreender mas o efeito dele vai depender muito da cor que usar ao fundo. Parando de blá blá blá vamos ao tutorial?


1. Vá ate seu HTML e procure por ]]></b:skin> , assim que o achar cole acima dele o código seguinte:
.Crown {
float:center;}
.Crown a {
color: #texto;
margin-left: 15px;
font: 30px fonte;
font-family: 'Open Sans Condensed', sans-serif;
text-shadow: -2px -1px -1px #sombra;
-webkit-transition-duration: .200s}
.Crown a:hover {
color: #textohover;
text-shadow: -2px -1px -1px #sombrahover;
-webkit-transition-duration: .300s}
Arrume as partes em negrito nesse código eu só acrescentei a fonte. Salve!


2. Agora vá ate Layout e adicione um novo gadget Hmtl JavaScript e dentro cole:
<div class="Crown">
<a href="www.seublog.com.br">link</a>
<a href="www.seublog.com.br">link</a>
<a href="www.seublog.com.br">link</a>
<a href="www.seublog.com.br">link</a>
<a href="www.seublog.com.br">link</a>
<a href="www.seublog.com.br">link</a>
<a href="www.seublog.com.br">link</a>
</div>

Bem é isso se usarem não esqueçam de creditar o R.O, nossa aqui no Rio esta tão friozinho... vou encerrando a postagem por aqui e vou indo para de baixo das cobertas, ate mais tarde minna-san.

32 comentários:

  1. Achei esse menu lindo! Que bom que postou, vou salvar a postagem nos favoritos *-*

    - Lovely Zombies

    ResponderExcluir
  2. Achei muito legal, amei o blog!

    http://muundodamosa.blogspot.com.br/

    ResponderExcluir
  3. Anw, gostei desse efeito! <3

    - HTML Secret

    ResponderExcluir
    Respostas
    1. <3 Que bom, thanks por comentar.

      Excluir
  4. que lindo...........vou usar daqui uns tempos..pois meu lay atual é novo............seguindo
    *_* tem um tutorial bem fácil no blog hoje

    http://postagensparavc.blogspot.com

    ResponderExcluir
    Respostas
    1. Entendo, ah que legal espero que use então futuramente.
      Darei uma olhadinha *--* Thanks por seguir

      Excluir
  5. Que bonitinho que fica! Amei! *u*

    ResponderExcluir
  6. Que fofo, vou salvar o tutorial para meu proximo layout! Ainda não conhecia o R.O, que pena que entrou em hiatus :/
    Você tambem é do RJ? Ta um vento muitooo frio aqui gente!

    Beijoooooks
    http://moda-teensworld.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. *----* Torço para que use. Verdade é uma grande pena pior que nem soube o porque do hiatus...
      Sou sim, *--* que legal saber que também é de RJ, verdade hoje esta um vento muito frio aqui a onde moro esta ate garoando.

      Beijokas linda.

      Excluir
  7. Awn, Que menu lindo *o* Talvez use no meu próximo lay ^^
    Beijos ~

    - Lovely Dream

    ResponderExcluir
    Respostas
    1. Verdade o acho bem fofo. Tomara que use. ^^

      Excluir
  8. Bem legal esse menu :)
    Já estou te seguindo!

    http://colorful-mushrooms.blogspot.com.br

    Beijoos ;*

    ResponderExcluir
    Respostas
    1. Que bom, que gostou.
      Obrigada por seguir *3*

      Excluir
  9. Que lindo ^^
    Acho que vou usar num lay free que estou fazendo, só não uso no meu blog porque acabei de mudar de layout e já tenho um menu pra ele T3T.

    Beijos!
    cantinhodak4mile.blogspot.com

    ResponderExcluir
    Respostas
    1. Compreendo mas também a graça de por um menu é assim que coloca o novo lay, ne?
      Mas sem duvidas todos vão gostar do lay free com esse menu.

      Obrigada por comentar Kamile <3 beijokas

      Excluir
  10. nuss, se aí está friozinho imagina eu que moro em SC! tive que sair de manhã para ir a escola e minhas vias respiratórias quase congelaram >w<

    breaking-doubts.blogspot.com.br || Visit and break your doubts ~

    ResponderExcluir
    Respostas
    1. Serio em SC? Nossa imagino t.t tomara que esquente logo.

      Excluir
  11. Adorei o tutorial, bem explicadinho ><

    ~ Beijos ;*
    cantinhodaslovelys.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Thanks Tauane. *-*
      Sempre é bom vela por aqui.

      Excluir
  12. *-* que bom que gostou do meu menu c:
    Desculpe entrar em hiatus sem avisar nada, é que estou terminando o novo lay do r.o e organizando minha vida -q
    Consegui superar minha doença nos ossos, e já tenho previsão para voltar!, desculpe por não ter comentado no blog, mais sempre que posso eu visito ok?
    Beijos c:

    ResponderExcluir
    Respostas
    1. Saaaaaakuneee Meeeeeeeeeeeeeeeeiiiiii!!!!! Você voltou!!!!!
      Sim ele é muito lindo! <3 Tudo bem acontece só fiquei preocupada, mas eu entendo. Nossa serio!? Eu não sabia que era isso mas que bom que esta melhor de verdade fico feliz por isso. Hihi não se preocupe com isso, mas sempre que aparecer será uma honra para mim.

      Excluir
  13. Oi ^^ eu comecei a seguir seu blog a pouco tempo .. e também criei o meu ainda ontem, eu não entendo muito de edição.. então oque significa 'Open Sans Condensed'? onde encontro os tipos de sombra? se você pude-se me ajudar nisso ficaria agradecida! *-*

    ResponderExcluir
    Respostas
    1. Olá linda fico contente que tenha seguido meu blog. Oh serio fez um blog? Deixa o link depois adoraria conhece-lo, hihi tudo bem tudo sempre tem o começo né? Vamos lá o Open Sans Condensed é o nome da fonte todo lugar que você ve escrito "font-family:" é para definir a fonte. No menu o tipo de sombras já estão arrumada que são os números -2px -1px -1px. Sobre como arrumar sombra aconselho aprender depois do básico, mas a aparte para defini la se chama text-shadow. Ali a onde deixei escrito "sombra" me referi a cor de fundo que deseja por na sombra #sombra. #textohover é a cor que vai aparecer quando passarem o mouse em cima do menu, já o #sombrahover é a mama coisa do anterior e a cor que vai ficar a sombra quando passarem o mouse sobre ele. A fonte Open Sans Condensed não vai aparecer ela tem que estar instalada dentro do blog, ai você usa esse tutorial aqui: http://www.bunnycrazy.net/2012/11/fonte-diferente-no-blog.html

      Também tem o tutorial mostrando como criar um layout lá ensina o básico: http://www.bunnycrazy.net/2012/11/big-tutorial-criando-um-layout-template.html

      Espero que tenha ajudado ^^

      Excluir
  14. Nunca consigo mudar a cor da letra nem colocar a sombra... já nao é a primeira vez que acontece... pq? :/

    ResponderExcluir
    Respostas
    1. Estranho isso acontecer pode ser o tom de cores que estejam se encaixando muito então não dá muito destaque na sombra. Mas experimenta colocar abaixo de .mobile em vez de ]] as vezes pode ser algum código acima que esteja impedindo dele funcionar direitinho.

      Excluir