Tutorial: menu horizontal igual ao do blog PH♥ (Modelo travel - Blogspot)

Oi gente!
A pedidos vou realizar esse tutorial. Antes agradecendo a Iana Paulinha foi com ela que aprendi *-* Bom, o tutorial é sobre o menu horizontal que tenho aqui no blog. Vi que algumas pessoas gostaram e até me pediram para fazer! Porém, o interessado terá que ter páginas (menu) em seu blog para poder funcionar. Lembrando que as páginas que estou falando são aquelas do blog mesmo e não a que você personalizou com imagens ou com algum outro tipo de tutorial.

Layout - editar Html - Ctrl+F ou F3 e procure por:

/* Tabs

----------------------------------------------- */

Poderá aparecer assim dependendo do seu templante:

/* Tabs
----------------------------------------------- */
.tabs-inner {
padding: 0;
}
.tabs-inner .section {
margin: 0;
}
.tabs-inner .widget ul {
padding: 0;
background: #ff4040 none repeat scroll top center;
}
.tabs-inner .widget li {
border: none;
}
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: #ffffff;
font: normal normal 13px Verdana, Geneva, sans-serif;
}
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: #8b1a1a none repeat scroll top center;
color: #ffffff;
}

então apague o código que selecionei acima e substitua-o pelo código abaixo: /* Tabs ----------------------------------------------- */ .tabs-inner { margin: 1em 0 0; padding: 0; margin-top: -35px; } .tabs-inner .section { margin: 0; } .tabs-inner .section { margin: 0; } .tabs-inner .widget ul { padding: 0; margin-left: 10px; background: transparent none repeat scroll top center; } .tabs-inner .widget li { border: none; } .tabs-inner .widget li a { display: inline-block; padding: .3em .4em; color: #000000; font: normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif; border-radius: 10px 10px 0px 0px; box-shadow: 1px 1px 1px 1px #ccc; /*---- sombra da caixa ----*/ background: #F08080; margin-right: 3px; } .tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover { border-radius: 10px 10px 0px 0px; box-shadow: 1px 1px 1px 1px #ccc; /*---- sombra da caixa ----*/ margin-right: 3px; position: relative; z-index: 1; background: #FA8072 none repeat scroll top center; color: #ffffff; } PS:. ss cores, tamanho e fonte estão iguais a do meu blog♥ alterne apenas as que marquei de: Vermelho: cores Verde: tamanho (mas não apague as letras px, caso ao contrário não funcionará) Cada alteração que você mexer no código visualize! Não salve antes de ver como irá ficar! Beijos  :*