Menu fofo de bolinhas (fixo na lateral)

abril 28, 2018


[ #15 | B E D A ]  Kon'nichiwaa fadinhas e elfos! Como vocês estão? Hoje venho ensinar como colocar esse menu super fofinho no blog! Ele tem animação e é personalizável, pode mudar as imagens, a cor, usar como menu de categorias, páginas, ou até mesmo de redes sociais! Fica um detalhe muito legal no blog, vem aprender, le'ts go?


Eu já tinha testado no meu blog de testes mas não tinha trago ainda pra cá, ele é no estilo de bolinhas e com bordas, e ao passar o mouse gira e aparece o link, como o exemplo a seguir:


Gostou? Quer adicionar no seu blog? É super simples:
Vá em no seu Painel do Blogger, clique em Layout, Adicionar um Gadget, HTML/Javascript e cole o código:

<style>
a.circ, a.circ2, a.circ3, a.circ4, a.circ5 {
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
margin:8px;display:block;
text-align:center;
color:#eee;
font-family:arial;
text-transform:uppercase;font-size:1px;
width:30px; height:30px;
border:5px solid #FFD685;
padding:2px;
border-radius:1000px;}

a.circ:hover, a.circ2:hover, a.circ3:hover, a.circ4:hover, a.circ5:hover{
color: #000000;
font-size:5px;
-webkit-transform: scale( -2.0) rotate( 540deg);
-moz-transform: scale( -2.0) rotate( 540deg);}

a.circ{background-image:url(https://imgur.com/sftmA73.png);border:5px solid #FFE0EC;}

a.circ2{
background-image:url(https://imgur.com/sftmA73.png);border:5px solid #E2DEF9;}

a.circ3{background-image:url(https://imgur.com/sftmA73.png);border:5px solid #FAF9C8;}

a.circ4{background-image:url(https://imgur.com/sftmA73.png);border:5px solid #D9F2FF;}

a.circ5{background-image:url(https://imgur.com/sftmA73.png);border:5px solid #DEEAD1;}

a.circ:hover{background: #FFF4FC;}
a.circ2:hover{background: #F1EEFF;}
a.circ3:hover{background: #FFFEE4;}
a.circ4:hover{background: #E8F8FF;}
a.circ5:hover{background: #EEF5E8;}
</style><br />

<div style="right: 40px; position: fixed; top: 150px;">

<a class="circ" href="LINK DA CATEGORIA"><br /><br />Tutorial</a>
<a class="circ2" href="LINK DA CATEGORIA"><br /><br />Recursos</a>
<a class="circ3" href="LINK DA CATEGORIA"><br /><br />Nome da categoria</a>
<a class="circ4" href="LINK DA CATEGORIA"><br /><br />Nome da categoria</a>
<a class="circ5" href="LINK DA CATEGORIA"><br /><br />Nome da categoria</a></div>

→ Está tudo explicadinho no código mesmo, pode alterar a vontade, as imagens são os que estão com endereço do imgur, hospede a sua no mesmo tamanho (36x34) e substitua.
Fiz essas com ícones, caso queira usar (parece destaques do instagram né? hehe): 


→  As cores das bordas está ao lado do link das imagens, substitua por uma '#' da cor que preferir.  (https://html-color-codes.info/)
→  A cor do fundo está na listinha dos a.circ:hover, substitua por uma '#' da cor que preferir.
→  Coloque o link das categorias, ou páginas e não esqueça de editar as palavras também!

Aproveite e leia também:

E prontinho! Qualquer dúvida é só perguntar nos comentários ok? Por hoje é só! Espero que tenham gostado! Estamos em BEDA então visite e siga o blog para não perder nada. CréditoAnnyzRedes Sociais do Sweet Magic: Facebook | Twitter | We heart It | Bloglovin | Pinterest *  Conheça meu trabalho: JD Design e Web! Até mais, Kissus! 

Leia também:

2 comentários

  1. Achei muito fofinho e adorei a ideia! Fica ótimo e não é difícil de adicionar ao blog.
    Parabéns pelo ótimo trabalho :)

    ResponderExcluir
    Respostas
    1. Fico feliz em saber que gostou! Sim, é super simples! Só alterar os links e salvar hehe. Obrigadaa! <3 Kissus!

      Excluir

© 2017 Sweet Magic. Re-Design: JD Design. Tecnologia do Blogger.