Follow Us @soratemplates

quinta-feira, 15 de novembro de 2012

Cupcake Dock Menu

Olá! Hoje lhes trouxe um tutorial para a criação de um menu interessante, que vai fazer com que seu blog tenha "cara de PC". Isso porque nesse tutorial, encontrado no Vagabundia, faremos um menu com estilo de dock.
Ficará igual ao deste dock de cupcakes que uso em meu computador (na parte superior da imagem), para XWidget:
Faça o download do dock para PC aqui
Caso ainda não conheça o XWidget leia estes posts aqui e aqui.
Só que nesse tutorial será feito com HTML para blog, ou seja, precisaremos apenas das imagens ^-^ E o melhor: tudo será feito em 3 passos! Lembrando que pode não funcionar em alguns modelos do Blogger, portanto faça em um blog de testes.
Vamos começar?
1. Acima de </head> cole este script:
<script src='http://kawaiiicode.github.io/dockmenu.js' type='text/javascript'/>
2. Acima de  ]]></b:skin> cole este código:
#dock {
    position: relative;
    text-align: center;
    width: 100%;
    border-bottom: 20px solid #fcc;
  }
  #dock a, #dock a:visited { text-decoration: none; }
  #dock img { border: none; width: 0px; }
  #legend {
    color: #fcc;
    font-size: 24px;
    font-family: 'Lobster Two', cursive;
    text-shadow: 1px 2px 3px #fff;
    text-align: center;
    width: 100%;
  }
As áreas destacadas em vermelho são as que deverão ser editadas basicamente; em border-bottom: 20px solid #fcc; significa que o menu terá uma borda abaixo, para ficar tipo um dock mesmo, com espessura 20 ou outro valor que preferir, com código na cor rosa. Width é a largura do menu.
O restante se refere ao texto que vai aparecer quando passar o mouse em cada imagem. Se quiser usar a fonte Lobster Two, tem que colar isso aqui antes de </head>, conforme mostrei nesse tutorial para usar fontes diferentes no blog:
<link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet' type='text/css'>
Caso deseje que seu menu apareça como no PC mesmo, por exemplo, na parte inferior do blog, use esse CSS acima de ]]></b:skin>:
#dock {
    position: fixed;
    bottom: 0px;
    left: 0px;
   z-index: 100;
    text-align: center;
    width: 100%;
    border-bottom: 10px solid #fcc;
  }
  #dock a, #dock a:visited { text-decoration: none; }
  #dock img { border: none; width: 0px; }
  #legend {
    color: #fcc;
    font-size: 24px;
    font-family: 'Lobster Two', cursive;
    text-shadow: 1px 2px 3px #fff;
    text-align: center;
    width: 100%;
  }

Edite como preferir. Visualize e se nada der errado, salve. Ainda não vai aparecer nada diferente.

3. Cole o código abaixo onde desejar que o menu apareça:
<div id="dock">
  <a href="URL1" target="_blank"><img src="http://3.bp.blogspot.com/-Ci_g2pErU1Q/UKUcTe5s_jI/AAAAAAAAGy8/30IK93ngHOA/s1600/1.png" lang="LEGENDA1"></a>
  <a href="URL2" target="_blank"><img src="http://3.bp.blogspot.com/-ndfiyUpZAhw/UKUcVArdthI/AAAAAAAAGzE/kUGKMxiZzvk/s1600/2.png" lang="LEGENDA2"></a>
  <a href="URL3" target="_blank"><img src="http://2.bp.blogspot.com/-XHGUaHwbOVQ/UKUeC7gxqVI/AAAAAAAAGzk/tzJRGhaTqDg/s1600/3.png" lang="LEGENDA3"></a>
  <a href="URL4" target="_blank"><img src="http://1.bp.blogspot.com/-GZTkNWdPJLU/UKUcuskFGVI/AAAAAAAAGzM/N7-TlmnElbA/s1600/4.png" lang="LEGENDA4"></a>
  <a href="URL5" target="_blank"><img src="http://1.bp.blogspot.com/-lKtByhBdNPI/UKUdDF1MxBI/AAAAAAAAGzU/rM1veLbDw4Q/s1600/5.png" lang="LEGENDA5"></a>
</div>
<div id="legend"></div>
Em que:
O que está em vermelho você substituirá por algum link;
O que está em lilás são os endereços das imagens, as quais você pode substituir;
E o que está em azul é o local em que você coloca o nome do link.
Prontinho! O resultado será mais ou menos assim:
 
Ao passar o mouse em um cupcake ele aumenta e a legenda aparece
Espero que tenham gostado e mil beijinhus ;3 Ah sim! Não se esqueçam de curtir no Facebook ok?

18 comentários:

  1. MUUUITO FOFO o seu blog e menu muuuuito cute, parabéns pelo blog perfeito! Seguindo aqui segue de volta?
    Cupcakezandooficial.blogspot.com
    Espero por você lá =D

    ResponderExcluir
  2. Fica muito fofo. bjs
    no-planetaroom

    ResponderExcluir
  3. Respostas
    1. Muito obrigada a todas meninas!!!
      Fico super contente por terem gostado ^^
      Beijus...

      Excluir
  4. Ei Rô tudo bem?

    Bom, andei tirando algumas páginas do meu blog e depois que fui perceber que o espaço que eu tinha colocado para os filiados sumiu...
    Estou editando um novo templante para o blog, então logo logo o seu link estará de novo tá?

    Espero que entenda, um grande beijo s2

    ResponderExcluir
  5. Queria muito aprender a colocar essas coisinhas no meuu blog, pena que não sei, tô começando no blog agora, espero aprender um dia. :)

    ResponderExcluir
  6. Com o tempo vai ficando fácil ^^
    Esse tutorial, por exemplo, é bem facinho; tenta para vc ver :3
    Sucesso para você e seja bem vinda sempre!!!
    Beijus...

    ResponderExcluir
  7. legal XD http://souotomeecomorgullhoo.blogspot.com.br/

    ResponderExcluir
  8. Oi. Tentei colocar esse menu no meu blog, mas avisa que
    The element type "img" must be terminated by the matching end-tag "".

    ResponderExcluir
    Respostas
    1. Parece que tem que fechar as imagens no HTML. Vou verificar aqui direitinho ok?

      Excluir
    2. Como prometi, fiz a revisão do código testando em um modelo Viagem do Blogger e deu certo. Não uso mais o código nesse layout, por isso coloquei a imagem para mostrar como fica.
      Tente de novo ^^
      Beijus...

      Excluir
  9. Obrigada,. Roberta, mas a imagem do seu post fica com o efeito opacity. mas eu lembro o efeito do menu dock.
    Vou testar no meu blog.
    Obrigada mesmo pela atenção. Teu blog é muito fofo e lindo.
    Parabéns!

    ResponderExcluir
  10. Deu tudo certinho, até eu colocar o código das imagens.
    Então aparece a mesma mensagem:
    The element type "img" must be terminated by the matching end-tag "".

    Uso o modelo viagem, das cortininhas brancas.
    Caso queira olhar o blog, Emaranhado De Maluquice.

    ResponderExcluir
    Respostas
    1. Tentei de novo e deu certo novamente :/ Não sei o que pode estar ocorrendo...talvez haja algum conflito com outros códigos do seu template.

      Excluir
  11. Ah...que pena. Achei perfeito esse menu porque uso 2 dock no meu pc...
    Obrigadão mesmo assi, viu?!

    ResponderExcluir
  12. |Amei, mais não esta dando certo no meu blog :c

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart