Tutorial: Menu sem barra!

Oi, oi, oi galera...então, eu tava ali colocando um menu num layout que eu tô fazendo e não sei como mas eu consegui modificar o menu todo e fazer com que ele ficasse de uma forma totalmente diferente: 

O que tem de diferente nesse menu? A diferença dele é que não tem barra, ou seja, não tem fundo, é só os tópicos e pronto, e antes ele tinha barra e ícones para redes sociais...

Vamos começar  tutorial?

Já vou logo avisando: eu sou péssima com tutoriais então espero que vocês entendam e outra coisa que eu vejo sempre em tutoriais por aí é o aviso de que antes de começar o tuto faça o backup do teu blog. Okay? Okay.

1º passo: Vá em Modelo > Editar HTML 

2º passo: Aperte os botões CTRL+F e pesquise por </body> e logo abaixo dessa tag cole o seguinte código:

<div class="bar_top">
<div class="bar_topd">
  <ul class="menu_barrax">
    <li><a href="http://LINK_AQUI" title='início">início</a></li>
    <li><a href="http://LINK_AQUI" title='início">início</a></li>
</ul>
</div>
</div>

3º passo: Agora procure por ]]><b:skin> e logo acima cole o seguinte código:

.bar_top img {height: 22px;float: right;margin: 5px 7px 0 0;opacity:0.8;filter:alpha(opacity=80);}
.bar_top img:hover {opacity:1.0;filter:alpha(opacity=100);}
.menu_barrax {float: left;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;margin: 0 0 0 10px;padding: 10px 0 0 0;}
.menu_barrax li a{color: #dfdfdf;text-decoration: none;}
.menu_barrax li a:hover {text-decoration: none;color: #fff;}
.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 ;position:fixed; right: 0; top: 0; vertical-align:top;}

Agora é só salvar e pronto!

Entendendo os códigos:

- Onde tá marcado de roxo é o link pra onde vai direcionar o tópico;
- Onde tá marcado de laranja é onde vai colocar o nome do tópico;
Um detalhe é que se vocês quiserem adicionar mais tópicos é só ir adicionando esse código um atrás do outro:

<li><a href="http://LINK_AQUI" title='início">início</a></li>

- Onde tá marcado de azul é onde você pode trocar a fonte, no meu caso a fonte que eu vou usar no meu layout é a Amatic SC, se você quiser usar essa fonte também vai em Layout > Adicionar gadget > HTML/JavaScript e cole esse código:

<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Amatic+SC" />

Depois é só ir lá no código e ir onde tá marcando de azul e colocar Amatic SC e pronto!
- Onde tá marcado de vermelho é onde fica o código da cor da fonte em estado normal;
- E por último, onde tá marcado de verde é onde fica o código da cor da fonte em estado hover...
Aqui está a tabela de cores para vocês editarem as cores...

Pronto espero ter explicado direito huehue

O tutorial original é esse aqui

Espero que vocês tenham gostado,

Até o próximo post!