5 de dez de 2013

Menu horizontal no topo do blog

Olá pessoas! Desculpem meu sumiço, mas é que tenho me preocupado com algumas coisas. Por enquanto não posso dizer nada, mas logo explico para vocês o que é. Isso tem a ver com uma prova que vou fazer domingo e outra que fiz domingo passado. Pois é, estou naquela época chata de tentar todos os vestibulares do mundo, afinal de contas, quero estudar bastante e arrumar um emprego que eu goste.

O tutorial de hoje é daquele menuzinho que a gente costuma usar em Templates estilo galeria, que fica no topo e é uma barrinha. Muita gente tem usado ele, mas como o Kawaii World está fechado (foi de lá que eu tirei, pelo menos) resolvi ensiná-lo aqui, já que esse menu é fofo demais e fica lindo em qualquer blog. Se eu não tivesse usado esse menu em cima da imagem, teria usado esse menu barrinha no lugar da cortininha, ficou lindo também.


1- No HTML do seu blog, procure por </head>, abaixo, cole:
<div class='bar_top'>
<div class='bar_topd'>
<ul class='menu_barrax'>
<li><a href='LINK' title='Texto do tooltip'>Nome</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome</a></li>
</ul></div></div>

2- Agora cole acima de ]]></b:skin>:

.bar_top {
width: 100%;
height: 31px;
background: #CORDABARRINHA;
Border-bottom: 10px none #F4D998;
}
.menu_barrax {
float: center;
margin: 0;
padding: 0;
}
.menu_barrax li {
float: left;
list-style: none;
font-size: 10px;
font-weight: bold;
font-family: Verdana, Arial;
text-transform: uppercase;
border-right: 4px none #dddddd;
margin: 0 0 0 10px;
padding: 9px 0px 0px 0px;
text-shadow:0 1px #CORDASOMBRA;
}
.menu_barrax li a{
background: #CORDOFUNDODOMENU;
padding: 10px;
color: #CORDAFONTE;
text-decoration: none;
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.menu_barrax li a:hover {
text-decoration: none;
color: #CORDAFONTEHOVER;
background: #CORDOFUNDODOMENUHOVER;
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
text-shadow:0 1px #CORDASOMBRAHOVER;
}
.transit {
-webkit-transition:all 0.4s ease;
-o-transition:all 0.4s ease;
-moz-transition:all 0.4s ease;
transition:all 0.4s ease;
}
.bar_topd {
width: 900px;
margin: 0 auto;
}

Creio que não preciso explicar nada, já que o código é auto-explicativo.  Se alguém tiver alguma dúvida é só falar comigo que eu ajudo :)

12 comentários:

  1. Adorei o menu *-*

    Counting Feelings | counting-feelings.blogspot.com.br

    ResponderExcluir
  2. Ele é legal, porém eu não gosto no topo, prefiro abaixo do nome do blog.

    etcforme.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu gosto dos dois, mas confesso que já usei tanto abaixo do título que me enjoei haha'

      Excluir
  3. Já conhecia o menu, e isso no meu Blog de ilustras, é muito divo, demaiss *3*

    htmlandresources.blogspot.com

    ResponderExcluir
    Respostas
    1. Você tem um blog de ilustas? Preciso do link! haha'

      Excluir
  4. Eu tava procurando loucamente esse tutorial, mas nunca achava o que realmente era.
    Mas agora eu achei! Acho que no meu próximo layout eu vou usar.
    Xoxo,
    Gabi

    http://viagem-a-terra-do-nunca.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Que bom que serviu! Acho que adivinhei que alguém tava precisando hehe'

      Excluir
  5. Sempre fui louca com esse tutorial, moça! Haha
    Eu tento, sempre, olhar o cachê de uns tutoriais do KW porém não consigo. Graças aos deuses você postou isso. Vou usar em meu próximo lay! Hah. Beijoos

    www.paraisolouco.blogspot.com
    -mais blogs no perfil.

    ResponderExcluir
    Respostas
    1. Eu não consigo entrar mais também, acho que atualizou. Mas alguns tutos de lá eu usei em versões antigas do blog, e como guardo todas elas, estou postando. Esse menu eu uso nos meus blogs ali o/

      Excluir
  6. Esse menu é muito kawaii *-*
    candytendy.blogspot.com

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!