Hey rilakkumas
Sumi? Acho que não, que dia é hoje? Caramba já estamos em julho? Sim, eu sei que sou cara de pau e sumi do Chá e CupCake, mas eu tenho uma ótima justificativa chamada 'preguiça crônica' então isso é grave e eu preciso dormir a noite e tarde inteira certo, sou tipo um panda. //Bj
Estava pensando em um tutorial legal para postar quando eu voltasse e então eu percebi que tem muita gente usando o mesmo menu aqui do blog, e lá na ask me pediram para postarem ela, então acá estoy. Fiz em duas partes esse tutorial, o primeiro é só o código do menu e o segundo é o código para colocar ele em cima do cabeçalho ou de uma faixinha, tentei deixar o mais explicado possível, é foi isso, até depois.
Preview aqui || Créditos do menu HTML My Love
Vá em Modelo >> Editar HTML e procure por <head> e cole isso
<link href='http://fonts.googleapis.com/css?family=unica+one' rel='stylesheet' type='text/css'/>
Agora procure por ]]></b:skin> e cole esse código
.menu { font-family:'unica one'; color:#fff; font-size:20px; text-transform: uppercase; padding-top:-20px; padding-left:10px; padding-right:10px; padding-bottom:-20px;-webkit-transition: all 1.5s ease-out;text-shadow: 0px 1px 0px #f4426f;text-decoration:none;} .menu a {color:#fff;text-transform: uppercase;text-shadow: 0px 1px 0px #f4426f; text-decoration:none;} .menu:hover{text-align:center; text-transform: uppercase; background: rgba(255, 255, 255, 0.5); padding-top:28px; -webkit-transition: all 1.5s ease-out; padding-bottom:25px; color:#f4426f; text-shadow: 0px 1px 0px #fff; text-decoration:none;}
Onde tem color:#fff; é a cor da fonte do menu, aqui tem uma tabela de cores para você usar, em font-size:20px; mudamos o tamanho da fonte para maior ou menos e onde tem padding-top:28px; é o tamanho da borda de cima quando passa o maouse e padding-bottom:25px; é a borda de baixo, mude os números para mais ou para menos para aumentar ou diminuir até onde a borda vai.
E agora para o menu aparecer vá em Layout >> Adicionar um Gadget >> HTML/JavaScript e cole esse código. Repita quantas vezes você precisar
<a href="LINK_AQUI" class="menu">NOME DO MENU</a>
CÓDIGO PARA O TOPO
Caso você não saiba colocar o menu no topo segue esses passos aqui.
Repita todo o tutorial de cima, mas ao invés de colocar aquele último código no HTML/JavaScript você vai colar esse
<div class="topmenu">
<a href="LINK_AQUI" class="menu">NOME DO MENU</a>
<a href="LINK_AQUI" class="menu">NOME DO MENU</a>
</div>
Repita o <a href="LINK_AQUI" class="menu">NOME DO MENU</a> quantas vezes você precisar mas sempre dentro da </div>
Agora para colocar o menu no topo você vai colar esse código em ]]></b:skin>
.topmenu{ position:absolute; margin-top:-100px; margin:left: -300px;}
O margin-top:-100px; é a distância do topo, aumente o número para ele ficar mais em cima e diminua para ele ficar mais em baixo, mas nunca tire o sinal de - que fica antes do número e o margin:left: 300px; é a distância da esquerda da tela, diminua o número para ele ir mais para esquerda e aumente para ele ir para esquerda, nele nós não usamos o sinal de menos -.
Será que ficou muito confuso para vocês? rsrsrs, é eu sou péssimo para explicar, mas qualquer dúvida é só deixar um comentário ou uma ask.
Bye bye
Ficou muito bem explicado mesmo, e o menu é muito lindo! *u*
ResponderExcluirPena que já está terminado o meu novo lay, senão usaria!
Aqui está muito lindo!
~kissus de morango~
Ahh muito obrigado, pensei que tinha falado um montão de coisas e ninguém iria entender. ufa.
ExcluirEu quero ver esse lay novo hein!
Valeu mesmo pelo carinho, fico feliz ^u^.
Kissu de panda, rsrsrs
Ótimo tutorial! Eu estava procurando esse menu por tudo que é blog. E não achava, obrigado Byel!
ResponderExcluirAlguém que não achou que eu era a Lovy, obrigado Kami-sama.
ExcluirObrigado, tinha muita gente me pedindo para postar ele mas eu só passava o link do original, rsrsrs.
De nada.
Amei o tutorial,vou usar no próximo lay do meu blog >w<
ResponderExcluirObrigado, vou querer ver o resultado.
ExcluirEsse menu é tão bem legal e diferente do que eu estou acostumado a ver por aí *-*
ResponderExcluirVou usar no layout em que estou a fazer! Thanks :3
Bye ~
Que menu legal '0'
ResponderExcluir