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.






Usei : 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 cole 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.)





Adicional: (opcional)


caso você queira dessa forma:







Com uma imagem e não cor no fundo. faça a imagem junto com o cabeçalho baseando-se na largura do blog e na posição do menu e apague toda a parte acima do background não só na primeira parte como na segunda. pronto seu menu estará por dentro do cabeçalho.






Créditos: http://ianapaulinhaaaa.blogspot.com/