Tutorial exclusivo: Personalizando o menu horizontal, igual ao da qui do blog.

Olá pessoinhas!Tdb???pra vocês...aprenda a personalizar o seu "menu horizontal"! e deixa-lo com sua cara!

Atenção: Eu ainda não vi esse tutorial em blog algum, modifiquei os estilos, coloquei outros códigos, enfim CRIEI. se você quiser fazer o mesmo tutorial em seu blog, favor dar os créditos!
NÃO ESQUEÇA DE ADICIONAR O GADGET DE PÁGINAS ABAIXO DO CABEÇALHO PRIMEIRO EM? RSRS
Tutorial realizado no modelo Viagem/Travel
Tutorial: apesar de não parecer é bem facinho.
OBs: para copiar selecione e prescione ctrl +c

1-Vá em design > editar HTML > presciona Ctrl + f e procure por: .tabs-inner .widget ul {
Quando você achar esse código, abaixo dele vai ter: padding: 0px; eu acho rsr
e abaixo dessa tag vocÊ vai colar, assim do jeito que esta um em baixo do outro esse trecho: (se tiver mais alguma coisa depois de padding:0px; não tem problema cole o código no final, abaixo de tudo.)
margin-left: 420px;
margin-right: 20px;
- este trecho vai definir o tamanho das laterais do menu ou seja, se ele vai se estender por completo ou se vai ficar apenas numa parte, no caso do meu fica apenas em cima da área dos posts, como na imagem. vejam as setas estão indicando.
420px; do lado de cá <<< e 20px: do lado de lá >> ai você ve no seu blog como fica e vai modificando aumentando ou diminuindo esse numero de acordo com seu blog..

Fizeram? agora a parte 2.
2- agora procure por: .tabs-inner .widget li a { e vamos modificar o hover do menu ou seja como ele fica sem estar sendo clicando.
provavelmente o seu estará assim:
.tabs-inner .widget li a {
display: inline-block;
padding: 1em 1.5em;
color: $(tabs.text.color);
font: $(tabs.font);
background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
color: $(tabs.selected.text.color); apague essa parte toda do background. e cola no lugar:
border-radius: 20px 20px 0px 0px;
background: #4F4F4F;
margin-right: 3px;
border: dashed 1px #ff00ff;

Entendendo:

border-radius: 20px 20px 0px 0px; ( o que vai arredondar o menu)
background: #4F4F4F; (a cor) se quiser por uma imagem: (background: url (endereço da imagem); )
margin-right: 3px; (o espaço entre cada nome do menu, se quiser aumente ou diminua.)
border: dashed 1px #ff00ff; (a borda é opcional, altere a cor e a espessura se quiser.)


3- ultima parte: o menu selecionado. logo abaixo desse código todo ai em cima que você acabou de personalizar, você vai ver essa outra parte:
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
position: relative;
z-index: 1;
background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
color: $(tabs.selected.text.color);
(pra ficar mais facil) apague tudo! e cole no lugar:
.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
border-radius: 20px 20px 0px 0px;
margin-right: 3px;
position: relative;
z-index: 1;
background: #FF00FF;
color: $(tabs.selected.text.color);
border: dashed 1px #ff00ff;
Entendendo:
border-radius: 20px 20px 0px 0px; (o que vai arredondar, tem que estar igual ao de cima, mesmo que vc mude, deixe os 2 iguais.)
margin-right: 3px; (o espaço entre cada nome, deixe igual também se não vai ficar diferente e deformado)
background: #FF00FF; (a cor selecionada, mude se quiser a cor)
border: dashed 1px #ff00ff; (a borda é opcional, altere a cor e a espessura se quiser.)
previsualize e se deu tudo certo: salve.
----------------------------------------------------------------------------------------------------------
Bom! é isso.Espero que vcs gostem e curtem esse tutorial!Byeeeeeeeeeeeee!Byeeeeeeeeeeeeee!