InícioSobrePerfilLinks

26/08/2015

[Tutorial] Menu simples

Amo essa imagem *u* ~
Oi pessoal ~!

Como estão?? Bem, post de hoje será bem rápido ~
Esse é um tutorial eu sei, tá no título para o menu que uso no layout, que fiz à pedido da Bunny. E como já tá escrito no título ele é bem simples o3o
Para ver como fazer, clique em Ler mais...

Não tem essa coisa vermelha envolta, não. ÓBVIO Desculpe pela edição bosta.
1. Vá para Modelo > Editar HTML no blogger, clique em Ctrl + F e procure por:
]]></b:skin>

2. Acima do código que procurou, cole esse código:
simple{
float: center;
text-align: center;
font-family: georgia; /* fonte */
font-size: 14px; /* tamanho da fonte */
padding: 2px;
width: 200px; /* Largura do menu */
color: #fff; /* Cor da fonte */
background: #000; /* Cor do menu */
display: inline-block;
-webkit-transition-duration: .60s
}
simple:hover{
background: #000; /* Cor do menu HOVER */
-webkit-transition-duration: .60s
}
Daí edite da maneira que quiser c:

3. Vá para Layout > Cross-Column > Adicionar um Gadget > HTML/Java Script. Então copie isso:
<a href="LINK"><simple>NOME</simple></a>
LINK --> Cole o link da página no lugar
NOME --> Cole o nome da página no lugar

Esse código corresponde à um menu, copie de novo dependendo de quantos queira. E para deixar juntinho que nem o meu não deixe nenhum espaço entre "</a>" e "<a href="LINK">".

Se usar lembre de dar os créditos ao Sakura Drops.


Espero que tenham gostado do meu primeiro tutorial xD Bem, talvez eu faça outros se quiserem o3o
Bem, é isso amores! Kissus~ >3<

14 comentários:

  1. Olá Yumi-chan~
    Adorei o tutorial *u* ficou bem explicadinho~
    Se eu decidir usar para os futuros layouts do blog irei creditar <3 Já vou deixar nos favs hehe
    Kissus~
    Yuurei Neko

    ResponderExcluir
    Respostas
    1. Oie!! :D
      Valeu X3 Ah, que bom, tava com medo de que eu não tivesse explicado direito ~
      Ok, obrigada desde já então xD

      Kissus ~!

      Excluir
  2. Olá, Yumi-chan <3
    Faz tempo que eu não comento aqui ~disgulp~
    Obrigada pelo tutorial >u< ficou bem fácil de entender, talvez eu use no próximo layout ^^

    ~~chu
    just-neko.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Oie xD
      Oh, sim ~tudo bem~
      De nada >u< Espero que use, heh *3*

      Kissus ~!

      Excluir
  3. Yaaay \0/
    Obrigada Yumi-chan! *abraça* >-<
    Ele é bem fofo mesmo *-*
    Um dia eu uso pq eu amei esse menuzinho u-ú

    Kissu~

    ResponderExcluir
  4. Yumi o/
    Olha só seu primeiro tutorial! Ficou bem explicadinho <3
    Eu fico imaginando o quão perdida eu ficaria fazendo alguma coisa no blogger XD, eu nunca nem tinha visto "]]>< / b:skin>"

    Até mais o/
    [ Maa Maa ]

    ResponderExcluir
    Respostas
    1. Que bom~ *u*
      Hahah, já eu com certeza não saberia fazendo algo que não seja o blogger! heh xD
      Kissus ~!

      Excluir
  5. Cara, EU TAVA QUASE INDO TE IMPLORAR POR ESSE MENU MANO!
    Ia ser legal se você postasse mais tutos assim não que eu esteja te obrigando
    (Mas que sou eu para dar opiniões?Cale esses dedos, Yurippe!)
    Bjs~~
    htmlejapao.blogspot.com

    ResponderExcluir
    Respostas
    1. Pelo visto muitos gostaram do menu heh XD
      Posso postar sim o3o Mas não sei direito quais eu podia fazer, gostaria de sugestões ~
      auhsuashua

      Kissus ~!

      Excluir
  6. Yay o/
    Eu acho esse menu tão bonitinho, talvez eu use algum dia *-*
    Kissu~~

    ResponderExcluir
  7. O tutorial ficou bastante explicativo, gostei... Mas eu fiquei com uma dúvida, quando eu coloquei o menu no meu blog ficou um "espacinho" entre os botões, e isso me irritou muito :/ e também estou tendo problemas quando tento subir o menu para ficar mais perto do cabeçalho, já tentei usando o padding-top negativo e nada... Ajude-me, pls!

    ResponderExcluir
    Respostas
    1. Sobre o espaço entre os botões, eu realmente não sei :/ O blogger é bem bugado às vezes... Qualquer coisa me mostre como é que tá o código que talvez eu consiga ver qual é o problema.
      Ah, eu acabei não lembrando de falar sobre como subir o menu. Mil desculpas! D: Esta parte é realmente difícil de saber como fazer.
      Mas então, busque por este código: html body .region-inner {
      Abaixo dele, cole isto: margin-top: -13px;

      Espero ter ajudado ^^' Qualquer outro problema é só me falar, ok?
      Kissus ~!

      Excluir