Home
Tutoriais
Efeitos
Ilustrações
Menus
Psds
Vagas
F.A.Q
Mapa
Layout free

Tutorial: Menu top do blog.


Olá galerinha do mau. 

Eu pensei em mudar o layout ontem, só que ai me bateu uma preguiça e falei que não ia trocar e ficou por isso mesmo, quando me der força de vontade eu venho e troco, ele já tá prontinho, e esse layout como free também já está prontinho, só me falta a vontade. E não é exagero, eu sou preguiçosa mesmo, a minha mãe até reclama por eu ser assim, mas não posso fazer nada, não fui eu que escolhi a preguiça, a preguiça que me escolheu. 

Bom, eu queria agradecer a minha irmã por ter apagado todos os meus imagines, o meu photoshop, enchido meu computador com foto antiga da One Direction, apagado as minhas fotos e os meus episódios de supernatural e os meus navegadores, esse é o motivo de eu não ter postado antes, eu juro que queria entrar em depressão quando cheguei domingo e abri meu computador dando de cara com um monte de escrotice e minhas coisas apagadas, mas sabe, eu soquei tanto a cara dele que não teve como eu ficar com depressão. Bom, me pediram pra ensinar como fazer o menu que tá no One Di Meu Tudo, e eu Camila Homs tenho um péssima noticia, eu não vou poder ensinar ele.

Mas não é porque eu não quero, eu juro, é que o blog que tinha o tutorial fechou, e eu lembro muito bem que ela não deixava reblogar os tutoriais dela, e como eu não sou uma quebra regras -ou seja lá o nome que pode ser dado a isso- eu não vou postar o tutorial sabendo que ela não gosta que reblogasse as coisas dela, muito menos só porque ela fechou, eu respeito a opinião dela e não vou fazer isso, porém eu procurei outro menu e achei um daqueles comuns para top de blog que tão usando muito, tem imagines directioners usando. Então vou ensinar ele, sinto muito por não poder ensinar o outro. E pra quem não sabe que menu é, bom, é mais ou menos esse: 


Primeiro passo: Vá em Modelo, editar HTML e procure por ]]></b:skin> e antes dele cole: 

.bar_top {
width: 990;
height: 31px;
background: #47a9d7;
Border-bottom: 10px none #90bedf;
}
.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 #267ca4;
}
.menu_barrax li a{
background: #47a9d7;
padding: 10px;
color: #acb5b5;
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: #4aaddc;
background: #1b93cd;
-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 #0d1c27;
}
.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;
}
Troque tudo que estiver em negrito, bom.

Passo dois: Sem sair do Editar Html procure por <body quando achar em cima dele cole:

<center>
<div class='bar_top'>
<div class='bar_topd'>
<ul class='menu_barrax'>
<li><a href='SEU LINK' title='Volte para a homepage'>Inicio</a></li>
<li><a href='SEU LINK' title='TITULO'>NOME</a></li>
<li><a href='SEU LINK' title='TITULO'>NOME</a></li>
<li><a href='SEU LINK' title='TITULO '>NOME</a></li>
<li><a href='SEU LINK' title='TITULO'>NOME</a></li>
<li><a href='SEU LINK' title='TITULO'>NOME-</a></li>
</ul></div></div></center>

EXPLICANDO
Em "SEULINK" você troca pela URL do blog, da página ou para onde quer que seja redirecionado. 
Em "TITULO" você toca pela explicação, tipo quando for passar o mouse e ver o que estiver escrito. Por exemplo ser for o nome Tags, coloque "Algumas perguntas".
Em "NOME" troque pelo nome, por exemplo se for sobre você, coloque "About me" 

Sem problemas não? Depois é só salvar e se tudo estiver certo, salve. Qualquer duvida pergunta na ask ou por comentário mesmo! Espero que tenha ajudado.

16 comentários:

  1. Awnnn obrigada :)
    Esta me ajudando muito, já procurei esse tutorial muitas vezes , mas nunca achei...
    Valeu mesmo :D

    ResponderExcluir
  2. como faz para colocar um tipo de um subtitulo... q nem vc fez no seu blog???

    ResponderExcluir
  3. Adorei esse tutu. Vou ver se coloco no meu próximo layout.

    Hein amor, deixa eu te enjoar mais uma vez: Posta um tutu de como baixar o photoshop CS6? Ou CS4 ou CS5, tanto faz. Eu estou precisando muito p fazer o meu próximo layout. Te agradeço! Por favor não me ignore. :( <3

    Beijão.

    ResponderExcluir
  4. Nyah :3 Que menu tão fofo :3 Eu utilizei ^^ Obrigada!

    yo o/ Nova seguidora e velha leitora aqui *u*

    ResponderExcluir
  5. tentei aplicar esse menu no lay free do One Dí Meu Tudo e não foi!! tem aclgum code??? pff me digaaa to implorando bjsss

    ResponderExcluir
    Respostas
    1. tem aglum codigo que n deixa eu colocar?? pff me ajude

      Excluir
  6. No meu dá erro!Fico um item abaixo do outro,por exemplo:
    . Home
    . Link

    O que eu faço?
    thelacherry.blogspot.com

    ResponderExcluir
  7. Este comentário foi removido pelo autor.

    ResponderExcluir
  8. Ahhhhh Fui eu que pedi o menu fixo! Mas vou te pedir mil desculpas porque eu apertei ctrl + u e pequei o código no seu html se quiser eu te passo para você pode postar o menu! Desculpas!

    ResponderExcluir
  9. Este comentário foi removido pelo autor.

    ResponderExcluir
  10. Tava procurando esse tutorial, muito obrigada >.<

    ResponderExcluir
  11. Amores, como faz pra deixar esse menu fixo?

    ResponderExcluir
  12. Deus comigo essas coisas nunca dão certo? \O/ TA EU SOU BURRA. Não consigo adicionar um menu no topo. Me ajuda?

    ResponderExcluir
  13. Me ajuda, como faço para centralizar o menu?

    ResponderExcluir