Yoo Anjos! :3
Como vocês estão? u-u Eu tô ótimo. Obrigado à quem me desejou melhoras, ontem eu fui pro hospital e era de fato infecção no estômago. Tomei um litro de soro com medicação, fiquei com a visão embaçada e dormi a noite toda. rç Quando acordei voltei a vomitar, mas foi a última vez graças ao Trono. u_u Hoje de manhã consegui voltar a me alimentar normalmente, sem nenhum impedimento, e então acho que é isso... estou bem!
Hoje estava preparando algumas coisas para meu novo layout do Dark Flame e criei um menu, é bastante simples e como desisti de fazer esse novo layout resolvi disponibilizar o menu para vocês. Quem quiser uma preview, vem aqui (XX). Como podem ver, é um menu fixo no topo do blog, como uma cortininha meio transparente, vocês podem colocar o fundo branco ou preto, dependendo da cor do layout de vocês. Ela desce junto com o layout do blog, depois se der, eu ensino como colocar o menu sem essa faixinha. u_u
Clique em "Leia Mais" para aprender.
Bom, para começar, cole isto logo após <head>:
<link href='http://fonts.googleapis.com/css?family=Courgette|Economica' rel='stylesheet' type='text/css'/>
Agora, cole isto no seu CSS (ou seja, antes de ]]></b:skin>):
/* Menus HEAVEN por Josh Hofstadter
----------------------------------------------- */
#margin {margin-left: 300px; }.menuoneexclusive {color: #fff; font-family: Economica; text-transform: uppercase; float: left; padding: 5px; background:#151515; text-align: center;font-size: 18px; margin-top: 3px; margin-right: 10px;}.menuexclusive {color: #151515; font-family: Economica; text-transform: uppercase; float: left; padding: 5px; background: transparent; text-align: center;font-size: 18px; margin-top: 3px; margin-right: 10px; -webkit-transition-duration: .80s;}.menuexclusive:hover {color: #fff; font-family: Economica; text-transform: uppercase; float: left; padding: 5px; background: #151515; text-align: center;font-size: 18px; margin-top: 3px; margin-right: 10px; -webkit-transition-duration: .80s;}
.menuexclusive a {color: #151515;} .menuexclusive a:hover {color: #fff;} .menuoneexclusive a{ color: #fff; }
Agora, vou explicar o código. Em #margin é onde se define quantos pixeis que o menu vai para o centro. Ou seja, basta mudar margin-left: 300px por um número maior e ele se moverá mais para a direita.
Em .menuoneexclusive é onde definimos as atribuições à primeira parte do menu, onde na preview está "Home". Perceba que ele é diferente dos outros e não há hover, então basta alterar "color: #fff" pela cor da letra e "background: #151515" pela cor do fundo.
Em .menuexclusive é a mesma coisa do anterior, você muda apenas a cor e o background, eu recomendo que deixe o background transparente.
Em .menuexclusive:hover você define o hover do menu, de mesmo modo que os outros, mude apenas a cor do fundo e da letra.
Por fim, em .menuexclusive a, menuexclusive a:hover, e .menuoneexclusive mude pela cor que você colocou anteriormente.
Por fim, basta colocar este código num gadget de HTML/JavaScript, de preferência, deixe o gadget abaixo do cabeçalho:
<div style="background: rgba(255, 255, 255, 0.65); top: 0px; left: 0px; width: 100%; height: 42px; z-index: 100; position: fixed;"><div id="margin"><a href="/" title="Titulo"><div class="menuoneexclusive">Home</div></a><a href="/" title="Titulo"> <div class="menuexclusive">About</div></a> <a href="/" title="Titulo"><div class="menuexclusive">ASK</div></a> <a href="/" title="Titulo"><div class="menuexclusive">Tutoriais</div></a> <a href="/" title="Titulo"><div class="menuexclusive">Free</div></a> <a href="/" title="Titulo"><div class="menuexclusive">Créditos</div></a></div></div>
Espero que gostem, se usar não esqueça de creditar. u3u
XOXO,
Josh Hofstadter.
Ai q legal e Josh voce é o melhor postador :D
ResponderExcluirPera, eu li isso? o_o
ExcluirAwn, muito obrigado Caio. ♥
XOXO
d nada :DDD
ExcluirQue bom que está melhor, Josh *-*
ResponderExcluirO menu é muito bonito, acho que irei usar no próximo template, que vou começar a aprontar agora *0* (e provavelmente aplicar daqui a um mês, na verdade) Claro, com os créditos. u3u
Achei simples, e lindo. Fica, provavelmente, mas bonito nos templates escuros, eu acho.
Chu ♥ leitora--anonima.blogspot.com
Obrigado. :D
ExcluirQue bom que vai usar. >-<
Ah, eu havia esquecido de avisar, se quiser usar ele mais escuro, troca o background: "rgba(255, 255, 255, 0.65)" no último código por "background: rgba(0, 0, 0, 0.65)". :D
XOXO
Que bom que melhorou Josh, aí podemos ter nosso postador de volta u.u Adorei o menu, além de simples e cute, é suuper diwo ~.~ <3
ResponderExcluirKissus!
http://criticas-on.blogspot.com.br/
Muito obrigado. u_u
ExcluirÉ bem simples mesmo, fiz ele com essa intenção. c:
XOXO
Que bom que você está melhor Josh :3
ResponderExcluirAdorei o menu *-*
um abraço ~
Obrigado. :D
ExcluirXOXO
Perfeito. <3'
ResponderExcluirBeijos, Building Stars || Retribui comentário? :3'
Obrigado. <3
ExcluirXOXO
Preciso de postadoras , pode publicar em seu post? = http://girls-nerd.blogspot.com.br/2013/07/querem-postar-aqui.html
ResponderExcluirCara vc é um anjo!!!!
ResponderExcluirAi, amo você <3 HAHAH.
ResponderExcluirTava procurando um menu assim desde que voltei de Los Angeles! Mentira, nunca fui. Desde que entrei na blogsfera mesmo.
Obrigada, casa comigo. -q AHUHAUAH, parei