17.8.13

Tutorial - Menu Sparkle

Olá, pessoas. Tudo bem? Bem acho que perceberam a mudancinha básica que fiz aqui, não é? Eu vi que alguns blogs andavam fazendo isso e acabei tentando também e isso acaba prolongando minha vontade de ficar mais alguns tempos com este layout. Bem eu apenas mudei o back e adicionei um gadget contendo mais alguns que vocês poderam mudar, além de ter mudado o header e as imagens do about e do gadget "here ends" e com certeza é legal dar uma inovada de vez em quando no layout. Bem, trouxe para tutorial um menu que fiz hoje e acho que iria ficar bem fofinho em blogs normais e não de testes, hihi. Fiz bem rapidinho para atualizar. Preview

01. Procure por ]]></b:skin> Assim que achar cole o código do quote abaixo acima dele:
.sparkle a{
background:#ffbdc2;
width:70px;
box-shadow: inset 0px 0px 4px #ff8992, 0px 0px 4px #ffd1d5;
padding:4px 1px 4px 1px;
display: inline-block;
font-family:silkscreen;
font-size: 8px;
color: #fff;
text-shadow: 1px 1px 0px #ff99a1;
border-right: solid 4px #ff8e97;
border-left: solid 4px #ff8e97;
text-transform: uppercase;
text-align:center;
margin-bottom:3px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-transition-duration: .50s;
}
.sparkle a:hover{
background:#c2d6da;
box-shadow: inset 0px 0px 4px #b3ccd1, 0px 0px 5px #b3ccd1;
text-shadow: 1px 1px 0px #a5cad1;
border-right: solid 4px #a5cad1;
border-left: solid 4px #a5cad1;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topright: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
transform: rotateY(-360deg) scale(1) skew(0deg);
-moz-transform: rotateY(-360deg) scale(1) skew(0deg);
-webkit-transform: rotateY(-360deg) scale(1) skew(0deg);
-o-transform: rotateY(-360deg) scale(1) skew(0deg);
-webkit-transition-duration: .50s;}
02. Após isso em Layout adicione um gadget de Html/Java e cole o código abaixo editando o possível.
<div class="sparkle">
<a href="LINK">NOME</a>
<a href="LINK">NOME</a>
<a href="LINK">NOME</a>
</div>

22 comentários

  1. O menu é muto lindo *u*
    Essas mudanças ficaram muito lindas ^3^

    Diamond Resources || diamond-resources.blogspot.com.br

    ResponderExcluir
  2. 'o' Mas que menu perfeitooo <3

    - HTML Secret

    ResponderExcluir
  3. Adorei as mudanças, e o menu é PERFEITO u3u

    Beijos

    Julia | @HM

    ResponderExcluir
  4. Awnnnnnnnn, essas mudanças no layout ficaram perfeitas demais, dá licença OuO Continua divo, UAHSUSHA' ;3

    Ah, menu perfeito *u* Estava precisando de um neste estilo e tu me ajudou muito, divosa u__u

    Beijinhos,

    Juu-Chan ;3 | Nescau com Nutella

    ResponderExcluir
  5. Eu amei esse menu, sério. Mas estou a procura de um, de tags/marcadores. Você podia fazer um pra mim? <'3
    Obrigada, com carinho Lets.
    i-fireflies.blogspot.com | Fireflies

    ResponderExcluir
  6. Que menu perfeito demais, acho que irei usá-lo :3

    Adolescente Nerd

    ResponderExcluir
  7. oii aceita afiliação?amo seu blog,e claro já o sigo.Espero sua resposta .Beijo
    http://kawaiiofdream.blogspot.com.br/

    ResponderExcluir
  8. Adorei o menuzinho, acho que vou usar no próximo lay ^o^
    Beijos
    Purple Star

    ResponderExcluir
  9. Peguei Mack, vou creditar vcs, :*

    kawaii-things.net

    ResponderExcluir
  10. Que lindo vou usar!
    http://pinkkawaiipk.blogspot.com.br/

    ResponderExcluir

O blog não é mais atualizado com novas postagens. Mas fique à vontade para perguntar algo do seu interesse, seja relacionado às postagens ou dúvidas que lhe inquietam, estou algumas vezes entrando no blog e certamente verei se tiver comentários pendentes. Obrigada pela visita, leitor!