11/10/2014

[Tutorial] Menu double + Aviso

Oi oi minna-san! Já usei essa imagem? Não lembro... Yay! Vamos começar com meu aviso básico, esses são os meus últimos minutos de internet, meu pai está, nesse momento, cancelando a operadora porque o pacote subiu consideravelmente. Nem sei se vai dar certo postar isso aqui, mas enfim... Não sei por quanto tempo vou ficar sem internet, talvez quinze dias, não sei ao certo, até lá, minhas sinceras desculpas e já estou morrendo de saudades de vocês! Aqui nesse post está o outro tutorial que prometi pra vocês, é este do primeiro gadget.

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 double, por Diário de uma Otome*/
#double {
background: #8fc7b1; /*cor do fundo*/
color: #fff; /*cor da fonte*/
font: normal 12px verdana; /*tamanho e tipo da fonte*/
width: 60px; /*largura*/
height: 15px; /*altura*/
display: inline-block; /*não modifique*/
padding: 2px; /*distância entre o texto e a borda*/
margin: 2px; /*distância entre os botões*/
border-radius: 3px; /*borda redonda, se não quiser, apague a linha*/
text-align: center; /*alinhamento, muda para right (direita) ou laft (esquerda)*/
transition: all 0.8s ease-out; /*duração do efeito*/
}
#double:hover {
box-shadow: inset 0 0 1px 3px #5a9980; /*tamanho e cor da borda quando passa o mouse*/
background: #baccc5; /*cor do fundo quando passa o mouse*/
color: #fff; /*cor da fonte quando passa o mouse*/
}
/*Fim do menu double - diario-otome.blogspot.com*/
Para usar é só colar em um Gadget HTML/Javascript:

<a href="LINK"><div id="double" onmouseover="this.innerHTML='NOME 2'"
onmouseout="this.innerHTML='NOME 1'">NOME 1</div></a> <br />
Se quiser que ele apareça ao lado do gadget igual como eu fiz ali, ponha este código no início do código acima: 
<div style="position: absolute; margin-top: -200px; left: -60px;">
Caso a sidebar for na direita, troque "left" por "right". Mude os números para posicionar o menu. Não se esqueça de pôr </div> no final do mesmo código. 

Aí está meu tutorial diwo, se usar ponha créditos. Ah é! Se surgir alguma dúvida, é só falar, coloquei o que você deve modificar em negrito para não bugar ninguém, mas nunca se sabe né? Obrigada e até mais!

8 comentários:

  1. Entendo perfeitamente teu lado Hari, isso já aconteceu comigo, espero que possa voltar rápido >3<, estarei lhe esperando. Adorei o tutorial ~
    PS: Fiquei surpresa ao ver seu comentário no blog *u*, você nunca aparece lá ^~^

    www.wh-asia.net

    ResponderExcluir
    Respostas
    1. É horrível ficar sem net, ainda bem que já voltei, obrigada.
      Que bom que gostou *---*
      Eu decidi que deveria tomar vergonha na cara e comentar nos blogs alheios u.u

      Excluir
  2. Demorei pra ver o "Nome 1" mudando pra "Nome 2" na preview porque meu cursor estava em cima lol *burra*
    Amo seus tutorias *---* no aguardo dos próximos~
    Abraços~

    ~ Nankin Dust ~

    ResponderExcluir
    Respostas
    1. Sabe que eu também demorei quando fui fazer o tutorial -qq
      Obrigada, é bom fazer tutoriais, mas acho que vai demorar um pouquinho para surgir próximos por aqui u.u

      Excluir
  3. nossa ficar sem net e horrivel TT-TT Mas ficamos a espera que você volte Xd
    Com carinho, Hina || Aishiteru em Contos ||

    ResponderExcluir
  4. Nossa, ficar sem internet... a gente só percebe o quanto é viciado, quando isso acontece com a gente. Achei o menu bem bonitinho, pena que eu sou tão ruim em html que mesmo com um tutorial explicadinho como esse, eu faria merda haha.

    Ah, e só pra avisar, o meu blog voltou \o/. E desculpa por não ter feito aquela tag, prometo que ainda faço. Você provavelmente não vai ver isso, mas whatever...

    Beijos...

    ResponderExcluir
    Respostas
    1. É horrível, vou evitar mais fazer esse tipo de coisa, então sou viciadona kkkkkkk
      Eu gostei do menu, só fiquei com medo do tutorial não ficar explicado, agora tenho certeza que está, que bom!!
      Seu blog voltou \o/
      Tudo bem, fico surpresa que você ainda lembre da tag *--*
      Ei, eu vi sim!

      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!