Bettterland: Tutorial: Menu top do blog.

11/09/2013

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.