Follow Us @soratemplates

sexta-feira, 23 de novembro de 2012

Colorful Bubble Menu

 
Oie. Há algum tempo, dando uma olhada em um template cuja autoria pertence a Aimad, encontrei um menu feito com círculos coloridos que giravam ao passar o mouse. Achei super interessante e resolvi compartilhar com vocês. Vale lembrar que o efeito que o faz girar funciona no Google Chrome ok. Eu até já usei aqui no blog uma vez. Como é todo redondinho, dá para fazer de conta que bolhinhas estão saindo no local em que você o colocar.
Ficará mais ou menos assim
Bom, primeiro precisamos criar as bolhinhas coloridas com imagens ou HTML, escolher tamanho da fonte, estilos...ou seja, precisamos do CSS, que se adiciona acima de ]]></b:skin>:
 <!--Colorful Bubble Menu Inicio-->
#c1 {margin-left:348px;margin-top:-5px;height: 73px;width: 80px;  -moz-border-radius: 80px; border-radius: 80px;background:url(http://4.bp.blogspot.com/-CP25FmH7-sY/UK-TfkIntYI/AAAAAAAAG6M/gY70bAgabwQ/s80/bubble1.png) no-repeat;-webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; overflow: hidden; cursor: hand; font-weight: normal; font-family: 'Monotype Corsiva'; font-size: 44px; text-align:center; font-color: #FF99FF; z-index: 12345;position:fixed;}
#c1:hover {-webkit-transform: rotate(360deg);
 -moz-transform: rotate (360deg);
 -o-transform: rotate (360 deg);
 transform: rotate(360deg);
 -webkit-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
} 
#c2 {margin-top:70px; margin-left: 323px;height: 73px;width: 80px;  -moz-border-radius: 80px;border-radius: 80px;background: url(http://1.bp.blogspot.com/-mrRXULVRdP4/UK-WcijLdRI/AAAAAAAAG6w/QmkjbZaqU8E/s80/bubble2.png)no-repeat;-webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; overflow: hidden; cursor: hand; font-weight: normal; font-family: 'Monotype Corsiva'; font-size: 44px; text-align:center; font-color: #FF99FF; z-index: 12345;position:fixed;}
#c2:hover {-webkit-transform: rotate(360deg);
 -moz-transform: rotate (360deg);
 -o-transform: rotate (360 deg);
 transform: rotate(360deg);
 -webkit-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
}  
#c3 {margin-top:125px; margin-left: 270px;height: 73px;width: 80px;  -moz-border-radius: 80px;border-radius: 80px;background: url(http://3.bp.blogspot.com/-Te9WFuAhBwo/UK-WdU0DBaI/AAAAAAAAG64/wdSYCIewks8/s80/bubble3.png) no-repeat; -webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; overflow: hidden; cursor: hand; font-weight: normal; font-family: 'Monotype Corsiva'; font-size: 44px; text-align:center; font-color: #FF99FF; z-index: 12345;position:fixed;}
#c3:hover {-webkit-transform: rotate(360deg);
 -moz-transform: rotate (360deg);
 -o-transform: rotate (360 deg);
 transform: rotate(360deg);
 -webkit-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
}
#c4 {margin-top:155px; margin-left:200px;height: 73px;width: 80px;  -moz-border-radius: 80px;border-radius: 80px;background: url(http://4.bp.blogspot.com/-R5AMJdkAhsQ/UK-WeO4W1ZI/AAAAAAAAG7A/Snw77LvoHx8/s80/bubble4.png) no-repeat;-webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; overflow: hidden; cursor: hand; font-weight: normal; font-family: 'Monotype Corsiva'; font-size: 44px; text-align:center; font-color: #FF99FF; z-index: 12345;position:fixed;}
#c4:hover {-webkit-transform: rotate(360deg);
 -moz-transform: rotate (360deg);
 -o-transform: rotate (360 deg);
 transform: rotate(360deg);
 -webkit-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
}
#c5 {margin-top:126px; margin-left:46px;height: 73px;width: 80px;  -moz-border-radius: 80px;border-radius: 80px;background: url(http://4.bp.blogspot.com/-0sciUnYXQho/UK-We12OwJI/AAAAAAAAG7I/SZvMlR_mXRc/s80/bubble5.png) no-repeat;-webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; overflow: hidden; cursor: hand; font-weight: normal; font-family: 'Monotype Corsiva'; font-size: 44px; text-align:center; font-color: #FF99FF; z-index: 12345;position:fixed;}
#c5:hover {-webkit-transform: rotate(360deg);
 -moz-transform: rotate (360deg);
 -o-transform: rotate (360 deg);
 transform: rotate(360deg);
 -webkit-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
}
#c6 {margin-top:158px;margin-left:120px;height: 73px;width: 80px;  -moz-border-radius: 80px;border-radius: 80px;background: url(4.bp.blogspot.com/-vRz4uX1i-Pk/UK-WfpUCsQI/AAAAAAAAG7Q/uWC_BhanejY/s80/bubble6.png) no-repeat;-webkit-transition: all .5s ease-out;  -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; transition: all .5s ease-out; overflow: hidden; cursor: hand; font-weight: normal; font-family: 'Monotype Corsiva'; font-size: 44px; text-align:center; font-color: #FF99FF; z-index: 12345;position:fixed;}
#c6:hover {-webkit-transform: rotate(360deg);
 -moz-transform: rotate (360deg);
 -o-transform: rotate (360 deg);
 transform: rotate(360deg);
 -webkit-transition: 0.8s ease-in-out;
 transition: 0.8s ease-in-out;
 -moz-transition: 0.8s ease-in-out;
 -o-transition: 0.8s ease-in-out;
}
<!--Colorful Bubble Menu Final--> 

Note que se quiser substituir as imagens por cores, basta substituir
background: url(LINK DA IMAGEM) no-repeat;
por...
background-color: #código da cor;
...o qual você pode obter nesta tabela aqui.
Visualize e se tudo estiver bem, salve. Ainda não se vê nada de diferente.
Agora cole este código em qualquer lugar que quiser que o menu apareça:
 <div id="c1">
<a href="URL DO LINK" title="DESCRIÇÃO">TÍTULO DO LINK</a></div>
<div id="c2">
<a href="URL DO LINK" title="DESCRIÇÃO">TÍTULO DO LINK</a></div>
<div id="c3">
<a href="URL DO LINK" title="DESCRIÇÃO">TÍTULO DO LINK</a></div>
<div id="c4">
<a href="URL DO LINK" title="DESCRIÇÃO">TÍTULO DO LINK</a></div>
<div id="c5">
<a href="URL DO LINK" title="DESCRIÇÃO">TÍTULO DO LINK</a></div>
<div id="c6">
<a href="URL DO LINK" title="DESCRIÇÃO">TÍTULO DO LINK</a></div> 

Você poderá colar próximo a sua foto de perfil por exemplo, ou do ladinho do blog, ou próximo a algum gadget que prefira, tudo dependede onde se posiciona ^-^ Espero que gostem e beijus

15 comentários:

  1. Rô me ajuda? :/

    Não estou conseguindo colocar nenhuma barra de busca no blog, aliás eu até consigo, mas na hora de pesquisar não acha a postagem com a palavra relacionada.. o que pode ser?

    Até tava tentando colocar uma que vi aqui no seu blog... Testei nos meus outros blogs de teste e deu tudo certo. Só no meu atual que não quer dar.. e até ja tentei começar do zero e colocar a barra mas não dá.. eu sei que é problema no templante mas não tenho noção de onde tentar arrumar :S

    Obrigada!!

    ResponderExcluir
    Respostas
    1. Eu vou dar uma pesquisada para ver se encontro algo referente para te ajudar. Talvez seja alguma coisa nos feeds...
      Enfim, caso encontre algo, vou dividir com vc ok?
      Beijinhus...

      Excluir
    2. Ta bom, mt obrigado. é muito ruim quando a gente quer mudar algo e não dá certo :/ Já tentei tudo que eu sabia e não deu..
      Ps: não sei o que são feeds kkk

      Excluir
    3. Nossa, é mesmo neh; passo muito por isso :/
      Não sei definir corretamente o que é feed, mas acho que pode-se dizer que é um conteúdo atualizado do seu blog ou site na internet que pode ser acessado por todo mundo. Blogs privados não geram feed; vi que seu site está em construção neh; você tentou colocar a caixa de buscas em um blog de testes privado? Se foi, pode ser isso então.
      Ontem dei uma olhada na internet e não encontrei muita coisa relevante sobre problemas assim, só em relação à busca padrão do google, que seria resolvida pelo próprio Blogger.
      Vou continuar buscando, mas enquanto isso, dá uma olhadinha nesses tutoriais:
      1. Pesquisa dentro do Blog (do Dicas para Blogs);
      2. Caixa de Pesquisa personalizada (do Cherry Bomb);
      3. Menu com submenus e caixa de pesquisa (aqui do blog, na tag Tutoriais). Uma vez tive problemas com caixinha de busca e usando esse menu dava certo.
      Espero que te ajude ^^
      Beijus...

      Excluir
    4. É chato mesmo. Eu testei em um blog de testes privado e em um que não está privado. Pelo menos eu descobri o problema, a caixa de busca, qualquer uma que eu coloque está buscando só os post's recentes do meu blog. Por isso que os antigos não aparecem.. agora só me resta achar o porque disso, porque antes tava normal.

      Já mudei de código, coloquei um que tava no seu, do Cherry Bomb e vários outros e o problema permanece..
      Será que agora vai ficar mais fácil concertar depois que eu descobri isso?

      Muito Obrigado pela ajuda s2

      Excluir
    5. Acho que vai sim ^^
      Mas Dayanne, acho que então pode ser alguma coisa relacionada com os feeds. Por que você trocou de blog para site não é? Então as buscas ocorrem pelos posts mais recentes; isso acontece quando se muda de e-mail também. Daí é legal manter seus feeds pelo Feedburner ou então um índice de conteúdo como o da página Arquivos aqui do blog, que encontrei no Mundo Blogger (lá na página tem o link ^^) e mostra o conteúdo todinho publicado por você desde quando criou seu blog.
      Beijus...

      Excluir
    6. Entendi, mas acontece que eu não estou conseguindo fazer nada nos feeds.. será que tem como você olhar pra mim? Eu até te passo a senha se você puder.

      Brigadão.. Não sei o que fazer mais ;/

      Excluir
    7. Seria melhor que você obtivesse ajuda profissional, porque eu também não entendo muito sobre feeds. O que aprendi foi o que li no site Ferramentas Blog; caso queira ver estes artigos:
      1. O que são Feeds e Como Usar
      2. Como Configurar Feed corretamente no Blogger.
      Agora não sei se resolverá o problema das pesquisas. Acho que seria bom que você obtivesse o link do seu feed tudo certinho, como você poderá ver nos artigos, e criasse o mapa do seu site igual ao que te falei da página Arquivos, porque aí o que o leitor não encontrasse nas buscas, encontraria no mapa do site.
      Mas é como te falei, não entendo muito, estou aprendendo ainda, e talvez tenha solução sim.
      Beijus ;3

      Excluir
  2. Amei seu tutorial novo ,, na vdd amo todos os seus tutoriais q por acaso são bem uteis ^^ Besu! continue assi ^^

    sottotsutaete.blogspot.com.br

    ResponderExcluir
  3. Oiii... que lindo este blog... tudo muito fofo!
    Um capricho, adoro essas cores pastéis e muito brilho!

    Super original.

    Beeeijinhos <3

    http://www.euamoverao.com.br

    ResponderExcluir
    Respostas
    1. Muito obrigada meninas e sejam bem vindas sempre!!!
      Beijus...

      Excluir
  4. Muito legal e fofo esse tutorial, deve ficar bem lindo no blog. bjs

    ResponderExcluir
    Respostas
    1. Fica sim ^^ Fico feliz por ter gostado!!!
      Obrigada e beijinhus...

      Excluir
  5. Amei a música do play.. sempre ouvia nos rádios mas nunca sabia o nome

    ResponderExcluir
    Respostas
    1. Eu também gosto ^^ Descobri por acaso no Grooveshark rsrs...

      Excluir

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