08/10/2014

[Tutorial] Menu sombrinha -tags-

Será que só eu estou ansiosa pra Book of MurderOe oe! -erro proposital porque sou "indiota"- Era pra eu estar estudando agora, mas eu me cansei -passei o dia nos livros- e fui jogar LoL -viciada detect-, aí quando eu não tinha mais o que jogar, vim pra cá e estou fazendo esse post que prometi de um dos menuzinhos do Layout atual, aquele de Tags. Ele também pode ser usado como Menu Sidebar e outros por aí, eu usei como tags. Enfim, parey  -proposital de novo nessa joça- de falar e vamos lá clicar em Leia Mais o/ 

Preview (www)
Vá em modelo, abra seu Html, aperte Ctrl+F e procure por ]]></b:skin>. Acima do código encontrado coloque: 
/*Início do menu sombrinha, por Diário de uma Otome*/
@font-face {font-family: "handy"; src: url('http://static.tumblr.com/lnvca6d/E6vm63ih7/pf_ronda_seven__1_.ttf');}
sombrinha{
background: #eee; /*fundo*/
text-align:center; /*alinhamento do texto*/
font: 8px "handy", small fonts; /*tamanho e tipo da fonte*/
color: #8fc7b1; /*cor da fonte*/
text-transform: uppercase; /*fonte maiúscula, se não quiser, apague*/
letter-spacing: 1px; /*espaçamento das letras*/
padding: 1px; /*espaço entre o texto e a borda*/
float: left; /*alinhamento do menu, deixe assim*/
margin: 2px; /*distancia entre um e outro botãozinho*/
width: 45%; /*tamanho*/
border:1px dashed #5a9980; /*tamanho, tipo e cor da borda*/
-webkit-transition-duration: .8s; /*duração do efeito*/
}
sombrinha:hover{
background: #5a9980; /*fundo ao passar o mouse*/
color: #baccc5; /*cor da fonte ao passar o mouse*/
border:1px solid #8fc7b1; /*tamanho, tipo e cor da borda ao passar o mouse*/
box-shadow: inset 0 0 1px 3px #8fc7b1; /*tamanho e cor da sombrinha*/
-webkit-transition-duration: .8s; /*duração do efeito*/
}
/*Fim do menu sombrinha - diario-otome.blogspot.com*/
Para usar é só colar em um Gadget HTML/Javascript:
<a href="LINK"><sombrinha>NOME</sombrinha></a>
Para ficar mais fácil, modifique só o que está em negrito, que são as cores e o tamanho, eles podem variar. Não retirem os créditos, pode até parecer com uns menus do GNMH, mas eu peguei só uma base do KW -sentido? Cadê você?- 

12 comentários:

  1. Olá! a quanto tempo? Adorei o menu! E tão simples e tem um efeito tão bonitinho!!

    Republic City | republic-city.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Yeah, muito tempo -qq
      Obrigada, menuzinho orgulho da mamãe *o*

      Excluir
  2. AMEI.
    Ia procurar um tutorial desses uma hora ou outra! Assim que estiver com mais tempo, utilizarei. Detesto blog desorganizado e, mesmo que o meu esteja no começo, vou me esforçar pra organizar desde agora.
    Thank yooooouuuu~

    ~ Nankin Dust ~

    ResponderExcluir
    Respostas
    1. Obrigada, fico feliz que gostou u.u
      Que legal, também não gosto de blogs desorganizados, eu achei o seu bem organizadinho e fofo, ainda estou para comentar, mas tenho muito coisa pra fazer então desculpa!
      E, mais uma vez, obrigada u.u

      Excluir
    2. Ei, ei. dsjhsjkdsd
      Comecei a usar esse menu. Ainda não creditei porque vou fazer uma página separada para colocar os créditos. Não me mate ;-;

      Excluir
    3. Eu vi, ficou muito bonitinho, mas credite depois, ok? Faça uma página de créditos u.u

      Excluir
  3. Esse menu ficou muito bom Hari...
    Depois posta um ensinando como fazer aquele ali onde os símbolos japoneses trocam para PT quando passa o mouse? Gostei do efeito.
    aTé+ Hari.

    ResponderExcluir
    Respostas
    1. Obrigada Thiago u.u
      Vou postar ele hoje ou amanhã, você vai se surpreender em como é fácil o/

      Excluir
  4. Ahaha q lindinho o menu ^^
    Vou pensar se vou colocar esse menu no meu blog porque daqui a uns dias eu irei colocar menu em um dos gadgets da coluna :3
    Seguindo aqui.
    Visite e siga se gostar www.blognekokawaii.blogspot.com
    Bjinhos

    ResponderExcluir
    Respostas
    1. Obrigada Nekawii, estou seguindo seu blog também, ele é muito fofo. Eu vou tentar comentar nele sempre que for possível também o/
      Obrigada de novo -q

      Excluir
  5. "indiota"» morri de rir

    Ah, esqueci-me de comentar no post anterior, então vou dizendo que, sim, antes de visitar o blog e só tinha lido o título na lista do blogger, julgava que seria de halloween. Mas além das cores e do tema vampire knight combinarem um bocado com a data, ficou muito, muito bonito. Aliás, o menu de tags foi dos detalhes que mais gostei, então ainda bem que você o ensinou a fazer aqui. Posso reblogar no meu blog de tutoriais? Com créditos, claro.

    Jaa! Ah, sobre kuroshitsuji, eu também estou ansiosa pela próxima temporada.

    ResponderExcluir
    Respostas
    1. Pois é, eu também ri enquanto escrevia -qq
      Tudo bem, não tem problema, o que importa é ler mesmo... Não, ler não importa, aquele post não tem nada de útil, só que troquei o Lay, mas enfim... Pensando bem, Vampire Knight combina um pouco com Halloween o/
      Obrigada, que bom que gostou do menu, pode reblogar à vontade, sei que você sempre põe os créditos u.u
      Kuoroshitsuji VENIMI

      Excluir

Vai comentar? Leia as regrinhas:

~ Pode abusar dos palavrões o quanto quiserem, mas ofensas serão excluídas. Caso queiram criticar, críticas construtivas por favor;
~ "Seguindo, segue de volta?" Sim, mas fale um pouco do post também;
~ Pedidos? Fiquem a vontade;
~ Lemos a todos os comentários e sempre os respondemos;
~ No fim do comentário deixe o link de seu blog, se gostarmos, seguimos com prazer .

Pode comentar agora!