Menu fofo de bolinhas (fixo na lateral)
[ #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:
