> Miki Candy。: Tutorial - Menu galaxy (4 modelos)

10/02/2015

Tutorial - Menu galaxy (4 modelos)

| |
Hoy Como vão? Bom, por onde eu começo? Hoje eu fiquei desde as 6:40 da manhã até as 19h fora de casa, estou exausta x_x'. Primeiro foi as escola, depois fui direto para a casa da minha amiga para a festa surpresa dela e então eu tive médico logo depois, que fiquei 3 horas esperando para ser atendida. Descobri que estou com uma gastrite nervosa, que está causando uma anemia, mas por sorte não é nada tão grave. Deixando a parte ruim de lado, a festa surpresa da minha amiga foi muito legal, nossos amigos mais próximos da escola foram almoçar lá na casa dela e a gente se divertiu (e comeu) bastante. Como vocês devem ter notado, faz tempo que não atualizo o gadget "what's new" do blog, que na teoria deveria estar com as postagens mais recentes do blog, sdgfuksdyg. Isso é porque eu tenho preguiça e estou completamente desanimada com esse layout atual do MC, pretendo trocar o quanto antes.

Hoje eu trouxe um tutorial para vocês, é de como fazer fazer um menu com o fundo galaxy, praticamente o mesmo do layout free que eu fiz, mas eu trouxe também em outras três novas cores. Enfim, é bem simples de fazer e eu acho que fica bem fofinho e organizado, só peço para se usarem derem os créditos ao MC, já que o código foi feito por mim, qualquer erro ou duvida me avisem por favor. Se quiserem reblogar não tem problema nenhum, só creditem. Espero que gostem e me desculpem pelos códigos enormes ~

Clique para visualizar

Primeiro vá no Editar HTML do seu blog, abra a barra de pesquisa (Ctrl + F) e procure por:
]]></b:skin>
Em cima disso, cole o código do menu que você quer usar.

Modelo 1 (Azul):
menu1{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhG53CiBYdaXihVyOeHX_i8AUF3djf2v5q1L7tlelK8il7N_DPwxWp-l0A2TmCeS8K_HI_o9DRCYAb7jMlysETDHSJ6z8uRlwCUo6-s3NarX8np0YFhxEaW0abL29PoxyaPhS_hFXFVoXCQ/s1600/234.png);
font-family: Georgia;
color:#fff;
outline-offset: -3px; outline: 1px solid #fff;
font-size: 10px;
letter-spacing: 2px;
text-transform: lowercase;
font-style: italic;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 3px;
padding-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
text-align:center;
text-decoration:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
float: left;
width: 46%;
height: 15px;
text-shadow: 0px 0px 0px #fff;
-webkit-transition-duration: .40s;
}
menu1:hover{
opacity: .70;
-webkit-transition-duration: .40s;
}
menu2{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU9q1jo00tS7Z93OBs2ykAGlcfwS1GbXgyYyKVnnfwZQGcnEHTgETdkexni7ntgjz12vzmWQBCA6IqtNcPpMZuWAGzPjmvGGh4SwIEWCAq4BUXOc3UtQLbZb6XzipGk6mCfsF1CAEY2uku/s1600/idk2.png);
font-family: Georgia;
color:#fff;
outline-offset: -3px; outline: 1px solid #fff;
font-size: 10px;
letter-spacing: 2px;
text-transform: lowercase;
font-style: italic;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 3px;
padding-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
text-align:center;
text-decoration:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
float: left;
width: 46%;
height: 15px;
text-shadow: 0px 0px 0px #fff;
-webkit-transition-duration: .20s;
}

Modelo 2 (verde):
menu3{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgimJR_fTNd2WuEDI4D72L0x-KI_d4EnK5Z_EiYQUuP4doODY6RBKdd8Uem3gVXPe-GLeqzlhqtx2MY64Up9SUqU8Gf7QI16_UOhVlxgTveI47ObQ51SZvqyUjY_VE39q9whJEqEJkFCmI/s1600/green1.png);
font-family: Georgia;
color:#fff;
outline-offset: -3px; outline: 1px solid #fff;
font-size: 10px;
letter-spacing: 2px;
text-transform: lowercase;
font-style: italic;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 3px;
padding-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
text-align:center;
text-decoration:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
float: left;
width: 46%;
height: 15px;
text-shadow: 0px 0px 0px #fff;
-webkit-transition-duration: .40s;
}
menu3:hover{
opacity: .70;
-webkit-transition-duration: .40s;
}
menu4{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSHdg1iD4uFH6YPKj8loAgJIl_24J9_6XLhod2nEOKFtKLqhv21R3sl6a_wjg5ed4CThhYLMiRqZXu3aXqj-XMZ0Qb179W1PoDEI2f9pYvSP11svjvgt_qSVujy9NOTS_xrNFGz1Oh7iM/s1600/green2.png);
font-family: Georgia;
color:#fff;
outline-offset: -3px; outline: 1px solid #fff;
font-size: 10px;
letter-spacing: 2px;
text-transform: lowercase;
font-style: italic;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 3px;
padding-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
text-align:center;
text-decoration:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
float: left;
width: 46%;
height: 15px;
text-shadow: 0px 0px 0px #fff;
-webkit-transition-duration: .20s;
}
menu4:hover{
opacity: .70;
-webkit-transition-duration: .20s;
}

Modelo 3 (amarelo/laranja):
menu5{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBxgdCu-PX1jQMngSx46xy48EWp00yvL6c42IviWnXjcFS3zFfIlU5RT4M87wxOqjkasmxfLSPciO4RIymrFc2qW9uTBn7H7XdkJGauy-61ewyhnuN-U1NcmjgsOXFBmli1Y6Kp8jCr84/s1600/11.png);
font-family: Georgia;
color:#fff;
outline-offset: -3px; outline: 1px solid #fff;
font-size: 10px;
letter-spacing: 2px;
text-transform: lowercase;
font-style: italic;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 3px;
padding-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
text-align:center;
text-decoration:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
float: left;
width: 46%;
height: 15px;
text-shadow: 0px 0px 0px #fff;
-webkit-transition-duration: .40s;
}
menu5:hover{
opacity: .70;
-webkit-transition-duration: .40s;
}
menu6{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfrVkGz4B96ykDfFWJ_KzRwVk-9ghAIYjFV_6mQlNhyphenhyphenLKaKpPEhRX81_oMJQAX8Luvu2pa0zGUSnB_mXiY1SfLzGcFhGUBxqZ0CmVYEslbvePArjnRoNffVvRvQ-2HOgtkMxySGHNRHzg/s1600/22.png);
font-family: Georgia;
color:#fff;
outline-offset: -3px; outline: 1px solid #fff;
font-size: 10px;
letter-spacing: 2px;
text-transform: lowercase;
font-style: italic;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 3px;
padding-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
text-align:center;
text-decoration:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
float: left;
width: 46%;
height: 15px;
text-shadow: 0px 0px 0px #fff;
-webkit-transition-duration: .20s;
}
menu6:hover{
opacity: .70;
-webkit-transition-duration: .20s;
}

Modelo 4 (rosa):
menu7{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAst6Qsg8BGDV8sPR1I82Tsdx_pCFvu3TPzOMBjo_dHnKnvmt69CrQeA-apW3hCgGykmKnKhoiez6RVrWO1_3x_XuDBWdy2zdVTS09Dqr2-kkyXHQGPQxBSI1BFYqWPUoVbfmEwKbDrUc/s1600/pink1.png);
font-family: Georgia;
color:#fff;
outline-offset: -3px; outline: 1px solid #fff;
font-size: 10px;
letter-spacing: 2px;
text-transform: lowercase;
font-style: italic;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 3px;
padding-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
text-align:center;
text-decoration:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
float: left;
width: 46%;
height: 15px;
text-shadow: 0px 0px 0px #fff;
-webkit-transition-duration: .40s;
}
menu7:hover{
opacity: .70;
-webkit-transition-duration: .40s;
}
menu8{
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxrnXtMDWSxkcjrdsbN2A6HWNziB8E8y-wDx57e_PIREVzqMb46BqEQvXQsYZF6Mct8BkREmoR9NIhe-l2gy5m_7xZNK96zg-QveTwVnVp_3PksX2OgOww_nrEImVd7JxJa2xf5FxxrJY/s1600/pink2.png);
font-family: Georgia;
color:#fff;
outline-offset: -3px; outline: 1px solid #fff;
font-size: 10px;
letter-spacing: 2px;
text-transform: lowercase;
font-style: italic;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 3px;
padding-left: 3px;
margin-right: 3px;
margin-bottom: 3px;
text-align:center;
text-decoration:none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
float: left;
width: 46%;
height: 15px;
text-shadow: 0px 0px 0px #fff;
-webkit-transition-duration: .20s;
}
menu8:hover{
opacity: .70;
-webkit-transition-duration: .20s;
}

Depois disso, para fazer o menu funcionar adicione um Gadget HTML/JavaScript e cole o código seguinte (de acordo com o menu que você escolheu) e faça as alterações necessárias.

Modelo 1 (Azul):
<a href="LINK1" title=""><menu1>NOME</menu1></a>
<a href="LINK2" title=""><menu2>NOME</menu2></a>
<a href="LINK3" title=""><menu2>NOME</menu2></a>
<a href="LINK4" title=""><menu1>NOME</menu1></a>
<a href="LINK5" title=""><menu1>NOME</menu1></a>
<a href="LINK6" title=""><menu2>NOME</menu2></a>

Modelo 2 (verde):
<a href="LINK1" title=""><menu3>NOME</menu3></a>
<a href="LINK2" title=""><menu4>NOME</menu4></a>
<a href="LINK3" title=""><menu4>NOME</menu4></a>
<a href="LINK4" title=""><menu3>NOME</menu3></a>
<a href="LINK5" title=""><menu3>NOME</menu3></a>
<a href="LINK6" title=""><menu4>NOME</menu4></a>

Modelo 3 (amarelo/laranja):
<a href="LINK1" title=""><menu5>NOME</menu5></a>
<a href="LINK2" title=""><menu6>NOME</menu6></a>
<a href="LINK3" title=""><menu6>NOME</menu6></a>
<a href="LINK4" title=""><menu5>NOME</menu5></a>
<a href="LINK5" title=""><menu5>NOME</menu5></a>
<a href="LINK6" title=""><menu6>NOME</menu6></a>

Modelo 4 (rosa):
<a href="LINK1" title=""><menu7>NOME</menu7></a>
<a href="LINK2" title=""><menu8>NOME</menu8></a>
<a href="LINK3" title=""><menu7>NOME</menu7></a>
<a href="LINK4" title=""><menu8>NOME</menu8></a>
<a href="LINK5" title=""><menu7>NOME</menu7></a>
<a href="LINK6" title=""><menu8>NOME</menu8></a>
44 comentários ♥
  1. Sinceramente vou matar você , isso tá super lindo. Parabens. Odeio pessoas perfeitas kkk.
    ~ Faith And Hope ~

    ResponderExcluir
    Respostas
    1. Annw, muito obrigada! Não se mata não moça wdifygeui.
      Estou bem longe de ser perfeita, huashuah.

      Excluir
  2. Olá! Eu estou bem, e você? Oh, espero que você melhore rapidamente.~
    O menu é lindo em todas as cores, mas o azul ganhou o meu coração sz.

    {Space*Ship}

    ResponderExcluir
    Respostas
    1. Olá! Estou bem também, obrigada por perguntar!
      Fico feliz que tenha gostado, muito obrigada ♥

      Excluir
  3. vê isso :( eu também tenho uma gastrite horrível que dói demais da conta e também sou bem anêmica. akiwej e,que menu lindo meu anjo! adorei <3

    http://euamotutoriais.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Pois é, fico enjoada toda hora x_x' Melhoras para você.
      Muito obrigada! ♥

      Excluir
  4. Adorei, posso acabar usando mais tarde, mas não tenho certeza.
    Seu blog é muito fofo.

    Visite o meu depois?
    Beijos
    -Secret Base-

    ResponderExcluir
  5. Que lindo, que fofo, amei demais <3

    Mr-Exemplar.blogspot.com.br

    ResponderExcluir
  6. Nossa, que lindo! Acho que vou usá-lo quando for fazer um templante. :)
    Ah, melhoras!

    Eu, Garota Anônima

    ResponderExcluir
  7. Meu Deus, que lindo o menu <3 <3 Muito amor.
    Nossa, melhoras pra você, meu irmão tem gastrite e não pode comer nada gostoso, principalmente coca-cola, se alimente melhor, porque anemia é horrível, eu já tive.

    ♥ Abraços |  www.h-oneypie.com

    ResponderExcluir
  8. Perfeeeeeito, estou apaixonada pelo verde ♥
    Melhoras pra vc!

    ResponderExcluir
  9. Melhoras pra ti! Gastrite é muito ruim mesmo >.< Amei os modelinhos! Quanto tempo que eu não via um tutorial perfeito assim *O* Vou usar no próximo layout com certeza ♥

    ~September Rains

    ResponderExcluir
  10. OMG amei os menus ... principalmente o Azul e o Dourado! ♥

    http://animesjaychan.blogspot.com.br/

    ResponderExcluir
  11. Eu adoro ir em festas surpresas, e imagino como deve ter sido legal
    Mdssss. que menus fofos. Qualquer dia irei usar em um lay, porque ficaram perfeitos.

    Beijos ❤
    www.p-perfectsthings.com | Quietly Pink

    ResponderExcluir
    Respostas
    1. Eu também! Foi muito legal mesmo :3
      Muito obrigaada, usa sim ♥

      Excluir
  12. adorei o menu, vou usar no meu proximo lay :)
    adorei seu lay, super cute >.< adorei o roxinho ^^
    dá uma passadinha no meu blog? e se gostar segue? já sigo seu cantinho ^^
    aceita afiliação flor? u.u
    kissus u3u
    www.girlzofunicornland.blogspot.com.br

    ResponderExcluir
  13. Yoo!
    Que menu perfeito ^3^ Quem sabe eu use no próximo layout do meu blog.
    Melhoras!
    Visita? I I http://darkrss.blogspot.com.br/

    ResponderExcluir
  14. Ooi <3
    Eu estou bem até :3 Estou comendo então é claro que estou bem! (É normal contar pra alguém o que se está fazendo quando se visita um blog pela primeira vez e nem conhece a autora? Mds ~me processem~ kkkk
    Espero que sua gastrite passe rápido, assim como a anemia, pois ambas são horríveis... Meu primo tem anemia e tem que tomar ferro 3 vezes por dia :/
    Eu sinceramente gosto do seu lay, ele é original u.u
    Mas se você trocar eu vou babar como sempre (sim, acompanho o blog como fantasminha há um ano eu acho kk), sempre quis fazer lays bonitos para poder odiá-los e então trocar de novo, mas infelizmente os meus lays ficam sempre horrores dai eu nem faço :/ kkkkk
    Chega de ficar falando disso....
    Gostei muito do menu :3 Principalmente do azul, é muito bonitinho <3
    Talvez eu use para tags :3

    Beijo!!!

    http://umagarotanadaencantada.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Oie ❤
      Que bom que está bem, auhsuhasu' Não sei se é normal, mas pode contar o que quiser, não me incomodo nem um pouco >3<
      Pois é, é muito ruim mesmo mas acho que depois que eu começar a tomar o remédio direitinho vou melhorar rápido.
      Anw, muito obrigada ♥ Fico muito feliz que goste dos lays do blog ^^.
      Obrigaada (de novo ♥).

      Excluir
  15. Oi helena. Amei os modelos ^^ Eu estou projetando um proximo layout pra mim, não sei se coloco hoje mas vou ver se uso >,<
    Kissus da Isa
    By || Doce bunny ||

    ResponderExcluir
  16. Adorei o tutorial, assim que eu precisar, venho aqui hihi
    Teu blog é muito fofo <3 Traz tutorial sempre porque eu sou uó nessas coisas
    www.iamcamilakellen.blogspot.com
    www.facebook.com/iamcamilakellen

    ResponderExcluir
    Respostas
    1. Obrigaada, venha sim heheh *3*
      Nhow, muito obrigada, pode deixar que vou trazer sempre que der <3

      Excluir
  17. Nossa, o resultado fica show :o :o
    Por favor, você poderia dar uma passadinha no nosso blog ?
    Se gostar, poderia seguir ?
    já estou seguindo o blog.
    bjs

    http://girlzofunicornland.blogspot.com.br/

    ResponderExcluir
  18. Oi Helena ♥
    Uau, que dia cansativo, ein? Espero que essa gastrite melhore logo, viu?
    Esse menu é a coisa mais linda! O código, apesar de imenso, é simples, já que você já deixou pronto kdajs ♥
    Um beijo, Lu do Daisies.

    ResponderExcluir
    Respostas
    1. Oi Lu <3
      Nem me diga, hahah. Anw, muito obrigada, acho que com os remédios vai passar rapidinho ^^ (espero).
      Muito obrigada, fico feliz que esteja simples de entender ^^.

      Excluir
  19. QUE MENU MAIS LINDO DA L A I F E !

    Amei demais, poooô, morri aqui! Diveza em um só menu. É engraçado porque o blog de PREVIEW fica: MC preview UAHUHAK'

    Eu sei, sou idiota c=

    Eu particularmente amei mais o azul <33'

    Poxa, mesmo a gastrite nervosa não sendo grave, melhoras! D: Poxa que dia farto ein, UHAUA' eu também estou assim, e contando com o calor, tudo fica tão ruiiiim :c ~dang.

    Trocar o layout? O, 0 Marrénti? Trocar essa diveza pastel goth aqui? Chorei* Mas sinto emoção em pensar em um novo layout, deverá ficar lindo pelo talento. rashetegui dedos de ouro*

    Adolescente Nerd // Oficial [] 彡

    ResponderExcluir
    Respostas
    1. OMG OBRIGADA SUA L I N D A ♥
      Anw, fico muito feliz que tenha gostado, de verdade! Que louco isso né? ehjgfkvwufvyglw mágica.
      Tudo bem, eu também sou :3 ehueheuh
      O azul foi o primeiro que eu fiz, e continua o melhor xP
      Obrigaada, o médico disse que não é nada muito preocupante, e que com os remédios vou melhorar rápido ^^. Nem me diga! Esse calor está insuportável x_x'
      Diveza pastel goth FAIL dgfwieuygfie. Omg para de me iludir me fazendo pensar que sou boa hjhgfwjeryvuioe. Obrigada ;^; ♥ /emoçaun

      Excluir
  20. Oi c:
    Achei os menus lindos *O*
    Talvez eu use qualquer hora e-e
    Beijos!
    ||Crazy Cake ||

    ResponderExcluir
  21. Nhaw, que lindo! Você não tem ideia de como eu queria manjar do HTML pra fazer/usar essas coisas lindas ♥ Enfim, pretendo criar um blog em breve e vou usar esse menu maravilindo *3* Na verdade, vou usar tudo de tutorial que você tiver a me oferecer, porque sou péssima e as coisas daqui são perfeitas jskhjerhug. Sério que está desanimada com esse layout? eu acho ele tão fofo! mas mesmo que você mude sei que será um mais perfeito ainda hahah ♥

    Beijos :*
    - Katy Yumi

    ResponderExcluir
    Respostas
    1. Obrigaaaada, que isso, eu nem manjo dos HTML não x_x' Mas muito obrigada de qualquer forma ♥ Fico muito feliz que goste dos tutoriais Katy! Vou postar mais sempre que tiver algo legal, ahsuahs. Sério mesmo que gosta? anw! Obrigada ♥ Eu até gostava quando terminei de fazer e coloquei aqui no MC, mas agora já enjoei e-e'

      Excluir
  22. Cara, que legal, você indo em festinhas e eu aqui, jogando e dormindo ;-;
    Cara, eu gosto muito deste layout, fica com ele mesmo ou disponibiliza ele :v Por que ele é muito lindo, eu particularmente amo roxo/lilás. Melhoras, sei como é complicado ficar doente, eu estou com dor de ouvido no momento slaksaklaslk' Amei os menus, muito kawaiis ♥
    Paradise ♥ Bunnies ll Se increve no meu canal? ♥

    ResponderExcluir
  23. Esqueci de perguntar -q Estão aceitando afiliados ?

    ResponderExcluir
  24. Olá :3 Aiw, eu achei esses menus uma fofura ♥ Amei

    dreamworld012.blogspot.com

    ResponderExcluir

post mais recente post anterior Home