13 de ago. de 2014
Menu - Outline ♡
trago para vocês um menuzinho, o primeiro de muitos que ando pensando em fazer. Ele é bem bonitinho, fica bom pra se usar acima da área de posts ou mesmo numa faixinha no topo, mas não recomendo muito pra side, por ser meio grandinho.
Querem ver como fica?
Demo (tem hover, passem o mouse em cima! \o/):
Para usar esse menu, siga os passinhos abaixo:
Primeiro, procure no seu HTML pela tag ]]></b:skin>. Achou? Ótimo, agora, é só colar o código a seguir imediatamente acima dessa tag:
Dê uma olhada no seu blog para ver se está tudo bem, e se estiver, salve as alterações. Depois, é só criar um gadget HTML/Javascript onde quiser que o menu apareça e colar o seguinte dentro dele:
<a href="#"><div class="outline">Menu</div></a>
<a href="#"><div class="outline">Menu</div></a>
<a href="#"><div class="outline">Menu</div></a>
<a href="#"><div class="outline">Menu</div></a>
Pode repetir o código do gadget quantas vezes forem necessárias para ocupar todas as suas páginas, e é só substituir os # pelos links e onde está escrito Menu pelos nomes das suas páginas. ^3^'
Espero que tenham gostado. Lembrem-se apenas de não modificar nada além das cores, certo?
See ya! ~♡
por : Mari Mysteria
Querem ver como fica?
Demo (tem hover, passem o mouse em cima! \o/):
Primeiro, procure no seu HTML pela tag ]]></b:skin>. Achou? Ótimo, agora, é só colar o código a seguir imediatamente acima dessa tag:
.outline {
background: #EFCDCC;
border: 1px solid #E3BABE;
font-size: 12px;
font-family: Open Sans;
color: #fff;
padding: 1px 10px 1px 10px;
width: 60px;
text-align: center;
text-shadow: 1px 1px 0px #E3BABE;
margin: 1px;
display: inline-block;
outline: 1px solid #F8E4D9;
outline-offset: -2px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-ms-border-radius: 1px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
}
.outline:hover {
background: #F5DDD3;
border: 1px solid #F8E4D9;
color: #E3BABE;
padding: 1px 10px 1px 10px;
text-align: center;
text-shadow: 1px 1px 0px #FEF4EF;
margin: 1px;
display: inline-block;
outline: 1px solid #F8F2EE;
outline-offset: -2px;
}
background: #EFCDCC;
border: 1px solid #E3BABE;
font-size: 12px;
font-family: Open Sans;
color: #fff;
padding: 1px 10px 1px 10px;
width: 60px;
text-align: center;
text-shadow: 1px 1px 0px #E3BABE;
margin: 1px;
display: inline-block;
outline: 1px solid #F8E4D9;
outline-offset: -2px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
-ms-border-radius: 1px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
}
.outline:hover {
background: #F5DDD3;
border: 1px solid #F8E4D9;
color: #E3BABE;
padding: 1px 10px 1px 10px;
text-align: center;
text-shadow: 1px 1px 0px #FEF4EF;
margin: 1px;
display: inline-block;
outline: 1px solid #F8F2EE;
outline-offset: -2px;
}
<a href="#"><div class="outline">Menu</div></a>
<a href="#"><div class="outline">Menu</div></a>
<a href="#"><div class="outline">Menu</div></a>
<a href="#"><div class="outline">Menu</div></a>
Pode repetir o código do gadget quantas vezes forem necessárias para ocupar todas as suas páginas, e é só substituir os # pelos links e onde está escrito Menu pelos nomes das suas páginas. ^3^'
Espero que tenham gostado. Lembrem-se apenas de não modificar nada além das cores, certo?
See ya! ~♡
por : Mari Mysteria
Assinar:
Postar comentários
(Atom)
0 comentários:
Postar um comentário