22/02/2014

Tutorial: Menu no topo do jeito mais fácil

||

Olá ^-^, tudo bem? Bem eu estou bem não que alguém queira saber pois ninguém perguntou o/, mas tipo no meu primeiro post aqui no blog a Wendy disse que deu um erro e que a postagem não apareceu o que resultou que a maioria nem chegasse a ver esta postagem que por sinal era sobre um menu bem fofo, mas tipo fazer o que né se não viram, mas o tuto está disponível aqui no blog, para quem quiser saber qual menu que é vá no meu blog de previews de efeitos, lá fora esse menu tem outros tutos também. E fora esse post do menu em 3d que passou batido, decidi criar outro menu, mas esse é um modelo de menu parecido com o menu no topo, já vi esse modelo em alguns blogs mas lembro que muitos pediam e os que conseguiam achavam ruim de aplicar ele no tema, então criei um bem  fácil!!

Sim bem mais prático eu acredito, tipo eu tentei criar o fundo dele apenas com cores básicas mas achei que ficou tão sem graça, então peguei e em vez de usar só a cor mesmo eu fiz uma faixa colorida com style e no fundo apliquei o menu, ele até é meio parecido mas o efeito hover dele é bem diferente. Amores por isso eu criei algumas faixas com cores variadas para se alguém querer usar, para quem quiser alguma cor diferente ou até mesmo com algum outro efeito o tamanho que eu fiz das faixas são 1380x30, nesse tamanho o menu ficará bem alinhadinho com o que eu arrumei, se quiserem outros tamanhos e larguras terão que alterar os códigos no html, mas para quem sabe é bem fácil é só ir mudando os valores onde se pede, resumindo, é um modelo de menu fofo para quem gosta de layouts sem banners pois acho que ficam melhores assim, então mais adiante prestem atenção certo?


Vá no seu modelo clique em editar html, dentro procure por: body { e abaixo dele cole este código para usar a faixinha que entrará no ludar do banner (cabeçalho)

background: url("IMAGEM FAIXA")no-repeat;
}

 Imagens das faixinhas:












Agora vá e dentro do html procure por ]]skin; e acima dele cole o código do menu:

/*Menu no topo by gnmh*/
.back {display: inline-block; text-align: center; color:#f7c6c6;float:center;font-family: silkscreen;font-size: 8px; padding:5px; height:auto;width:750px;margin-left:-6px;-webkit-border-radius: 5px;-moz-border-radius:5px;
}
.topo a{background:#; padding 5px; margin:3px;font-family: PF Arma Five;width:100px;
font-size: 8px; color: #fff;text-shadow: 1px 1px 1px #A190B1; padding-left:5px; padding-right:6px; padding-top:5px; padding-bottom:10px; border-radius:1px;-webkit-transition: all ease-out 0.99s;}
.topo a:hover{background:#E4DAED;font-family: silkscreen;width:100px;
font-size: 8px;color:#A190B1;padding:12px;text-shadow: 1px 1px 1px #fff;}

Para funcionar os links cole o código abaixo dentro de um gadget:

<div style="position: absolute; margin-top: -143px; left: -140px;">
<div class="topo">
<div class="back">
<center>
<a href="/">Home</a>
<a href="/">Tutioriais</a>
<a href="/">Materiais</a>
<a href="/">Parcerias</a>
<a href="/">Extras</a>
<a href="/">Layouts</a>
<a href="/">Faq</a>
<a href="/">Créditos</a>
<a href="/">Destaques</a>
<a href="/">Sobre a Dona</a>
<a href="/">Blogroll</a>
<a href="/">plágios</a>
</center></div></div></div>

E para finalizar, eu já deixei tudo editado nomes dos links quantidade, e a cor é a mesma do preview se quiser usar outra vá alterando conforme o seu gosto e preferência, e podem perceber que até os códigos de alinhamento no topo eu já deixei, isso é para vocês terem uma noção de espaço e irem mudando conforme necessidade, então é isso acredito que é bem mais prático e sem neuras, agora a parte dos créditos, não se esqueçam de creditar tanto a wendy quanto a mim pois criei este menu da base do meu menu atual, então créditos ao bunny e créditos a mim ok? Kissus e até um próximo post!!

23 comentários:

  1. Amei o estilo desse menu ^^
    h-holiday.blogspot.com

    ResponderExcluir
    Respostas
    1. Obrigada amore que bom que curtiu =3

      Excluir
  2. Realmente me ajudou muito e o menu está super lindo . Todos os menus para todo que eu tentava colocar eu não conseguia . Mas agora consegui <3
    Beijos

    cantinhodarebec.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Nossa sério amor? Fico muito feliz em saber disso ;)

      Excluir
  3. Amei o menu! Muito fofinho além de mais fácil de colocar. Sempre acho suas explicações ótimas, mas realmente ficou muito mais bonito assim do que só com cor. *3*

    ResponderExcluir
    Respostas
    1. Que bom que gostou amor da minha vida, tudo para lhe agradar <3

      Excluir
  4. Ainnn que tutorial ótimo, as vezes preciso muito de um menu para o topo mas não acho nenhum, agora conheço esse >u<

    h-worlds.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom fico bem feliz >.< deixa ele salvo dai quando querer usar já sabe onde está ;)

      Excluir
  5. Amei tutorial muito útil seu layout e lindo eu sempre fico assim quando eu entro no seu blog :O ashauhsuahsu bjkss
    http://thing-of-kawaii.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Opa obrigada amore, e sim os layouts da Wendy são lindos mesmo >.<

      Excluir
  6. Amei o tutorial >333< vou salvar o tuto nos favoritos para futuras utilizaçãos ashaushaushahus >333<
    ~~
    wearetheroyalty.blogspot.com

    ResponderExcluir
    Respostas
    1. Isso deixa salvo dai quando quiser é só olhar e fazer >.< beijocoas =3

      Excluir
  7. Oi Wendy, eu passei para te perguntar se sabes como transferir os seguidores de um blog para outro, é que eu estou a fazer um blog mais organizado este: http://xanimemangaxv2.blogspot.pt/, já transeferir as mensagens do blog anterior para este, mas agora não sei como transferir os seguidores, sabes como fazer, agradecia se me pudesses ajudar. ^^

    ResponderExcluir
    Respostas
    1. Olá Mei como vai? Compreendo sua situação, mas desejo boa sorte com o blog. Ate alguns anos (4 anos atrás), era possível sim fazer transferência de seguidores usando o Google Friends. Mas...infelizmente tiraram essa opção de transferências por causa de alguns erros e pouco uso. Um desses erros era que os seguidores apareciam na pagina inicial do blog, mas não recebiam atualizações do blog. Mas você pode deixar um anuncio no blog, assim as pessoas vão ver e seguir o novo blog. Ou organizar o já existente para não perder o numero de seguidores.

      Excluir
    2. Obrigado pela ajuda Wendy... como não consigo transferir o tema que fiz e dará mais trabalho modificar as postagens no 1º blog, acho que vou arriscar e colocar um aviso, apesar de saber que irei perder muitos dos seguidores do blog, logo agora que cheguei ao 100 >.<, mas mais vale ter poucos mas que seguem de verdade o blog do que aqueles que estão só a fazer número, não é mesmo, obrigado pela ajuda ^^

      Excluir
    3. Tem razão, mas desejo toda sorte para seu novo blog. E que nesse novo blog os 100 chegaram bem rapidinho!

      Excluir
  8. Gostei bastante do tuto, e estava procurando ele como uma doida! Mas tenho uma dúvida: Essa faixinha do menu funciona como aquelas cortininhas que a gente coloca? Porque eu coloquei uma no meu lay e não sei se precisaria colocar mais uma imagem desse menu, me ajudaa?? D:

    simsegredei.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada por gostar. Funciona sim como faixinha, é só colocar uma imagem "única" que ele se repete. ^^

      Excluir
  9. O meu não ficou dentro da faixa :( Pq ?

    ResponderExcluir
    Respostas
    1. Nussa serio? Qual imagem você usou? Talvez seja a altura.

      Excluir
  10. Minha imagem não ficou no topo, ficou nos posts e fiz do jeito que vc ensinou

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram