14 de out de 2012

Tutorial: Menu arredondado

imagem assim agora é modinha...
Hi people! Então, a Abbey do Oh Star, pediu o tuto do menu que está sendo usado atualmente no blog (u.u). E eu trouxe! Bom, vocês podem ver o menu no blog mesmo ou aqui, não é lá essas coisas mas confesso que achei ele muito fofo. Bom, comecemos...

Primeiramente, vá em modelo e clique em editar HTML. Clique em prosseguir, tecle Ctrl+f e pesquise por ]]></b:skin>. Em cima do primeiro código que aparecer cole:

/*** MENU ARREDONDADO  ***/
.arredondadodfy { padding:3px; height:auto; width:20px; margin:4px 5px 0px 0px;cursor:help; font-family:verdana; font-size:15px;color: #COR DO TEXTO AQUI ; background: #COR DO FUNDO AQUI;text-align:center; display: inline-block;  -webkit-border-radius: 75px; -moz-border-radius: 75px; border-radius: 75px; -webkit-transition-duration: .50s;  -webkit-box-shadow:0 0 1em #C9C9C9;}
.arredondadodfy:hover { padding:3px; height:auto; width:20px; margin:4px 5px 0px 0px;cursor:help; font-family:verdana; font-size:15px;color: #COR DO TEXTO HOVER AQUI; background:#COR DO FUNDO HOVER AQUI;text-align:center; display: inline-block; -webkit-border-radius: 5px; -webkit-border-top-left-radius: 5px; -moz-border-radius: 5px; -moz-border-radius-topleft: 5px; border-radius: 5px; border-top-left-radius: 5px; -webkit-box-shadow:0 0 1em #C9C9C9;}

Para ajustar as cores você pode usar essa tabela aqui. Feito isso, é só salvar. Depois, você vai m layout e clica em adicionar um gadget, clique em HTML/Java Script e cole esse código:

<div class="arredondadodfy" title="TÍTULO DA PÁGINA"><a href="ENDEREÇO DA PÁGINA">♛</a></div>

Prontinho? Agora é só salvar e ver como ficou. Você pode trocar a coroinha por qualquer outro símbolo ou letra. Gostaram?
crédito

15 comentários:

  1. Amei o tutorial, no próximo layout na certa eu irei usar. Kiss :3
    chramenaveia.blogspot.com

    ResponderExcluir
  2. Amei o tutorial, o menu fica super fofo, além, de ser bem útil, eu amei.

    ---> cherry-blog-official.blogspot.com.br
    Beijos.

    ResponderExcluir
  3. ótimo tutorial, espero que ajude muita gente *u*
    Cantinho da Menina Cristã (clique no perfil e visite)

    ResponderExcluir
  4. Esse menu é lindo mesmo, estou para usar ele...
    Amei seu blog flor, muito fofo e organizado.
    Beijos,
    Adolescentes do oposto (blog no perfil)

    ResponderExcluir
  5. Estava louca atrás desse tutorial, brigada fofa <3 Seu blog é lindo!

    Nhaac || cupcakeofshine.blogspot.com

    ResponderExcluir
  6. Adorei o tutorial, vou usar no meu próximo lay C:
    ultimanostalgia|blogspot

    ResponderExcluir
  7. O menu é super lindo e vou usar no proximo lay, foi amor a primeira vista!

    Cliquesnocapricho.blogspot.com

    ResponderExcluir
  8. Adorei o tuto!

    Kissus,
    blog-onedream.blogspot.com

    ResponderExcluir
  9. Ótimo tuto, vou testar no próximo layout!

    Beijinhos! :)

    Gotta-be-you-blog . blogspot . com

    ResponderExcluir
  10. Adorei esse menu, é bem lindo (: Já tinha visto parecido, mas com números e sem esse hover quadradinho.

    Beijos :3
    quinzedilemas.blogspot.com

    ResponderExcluir
  11. Que lindo esse menu, me apaixonei *--*

    beijos,
    Bruna
    Garota da Lua

    ResponderExcluir
  12. Nossa, me apaixonei por esse menu, em breve, no proximo lay irei colocar!
    Bjs bom domingo!
    upgrade-br.blogspot.com.br

    ResponderExcluir
  13. amei amei apaixonei pelo menu !

    Tudo bem linda? entsão estou aqui pra curtir mais um pouco do seu blog que eu sei que é um maximo :) parabéns sempre mesmo!

    Novidade sobre radios onlines la no blog maah music, bora anjo curtir la e deixar um racadinho se gostou ou não?

    http://estilloetendencias.blogspot.com.br/2012/10/dicas-de-radios-online.html

    beijo parabens sempre pelas postagem bacanas :)
    beijo
    @maahmusic

    ResponderExcluir
  14. Tá garantido. Vou colocar no meu próximo layout! É lindo! *3*
    Adorei o blog, to seguindo :)

    Beijos! ♥
    inmuchlove.blogspot.com

    ResponderExcluir
  15. Como eu credito ? sou nova neste mundo de blog.

    ResponderExcluir