Menu horizontal no topo

Oi gente, tudo bom? Hoje o tutorial é de como colocar o menu horizontal e ele fica no topo do blog. Acho que todo mundo já sabe o menu padrão do blogger não é? E ele pra mim é muito simples (como todos os outros tipos de menus dos outros modelos que o blogger disponibiliza gratuitamente). Então pessoas maravilhosas descobriram como personalizar o html e nos ensinaram. E hoje venho ensinar a vocês, vamos lá...

Passo a Passo:

1♥ vá no modelo do blogger.

2♥ dê ctrl+f e busque 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_da_pagina</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome_da_pagina</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome_da_pagina</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome_da_pagina</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome_da_pagina</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome_da_pagina</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome_da_pagina</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome_da_pagina</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome_da_pagina</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome_da_pagina</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome_da_pagina</a></li>
<li><a href='LINK' title='Texto do tooltip'>Nome_da_pagina</a></li>
</ul></div></div>

3♥ Agora, busque por ]]></b:skin> e acima cole:

.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;
}

Espero que vocês tenham gostado do tuto. No código mesmo está tudo explicado, mas qualquer dúvida deixe seu comentário bjs *-*