domingo, 11 de março de 2012

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  :*

11 comentários:

  1. Amei o tutorial flor, arrasou!
    www.viverserfeliz-renata.blogspot.com

    ResponderExcluir
  2. Ótimo tutorial! Acho lindo esse menu .
    novopost. Beijos <3
    http://diamontlilac-news.blogspot.com/

    ResponderExcluir
  3. Oi. Nossa, que tutu bacana, tudo bem explicadinho assim que eu gosto! hihi
    Parabéns. *-*

    www.vidaadegarotaa-vdg.blogspot.com

    ResponderExcluir
  4. Esse tutoril é bem útil para os iniciantes da bloguesfera, póis ainda não sabem mecher no HTML.
    Muiito bom!

    http://chic-adolescente.blogspot.com/

    ResponderExcluir
  5. Huum que bom, ficou legal!

    ====>WORLD GIRL<====
    http://ianapaulinhaaaa.blogspot.com/
    @ianapaulinhaaaa

    ResponderExcluir
  6. Que demais esse tutorial!
    Acho ótimo esse menu horizontal. Cloquei no meu há pouco tempo!


    ótima semana pra você!
    beijos

    http://www.divasdivat.com/

    ResponderExcluir
  7. Adorei o tutorial amr (:

    http://www.byjessicarodrigues.com

    beijos

    ResponderExcluir
  8. adorei o menu,eu já ia pedir o tutorial mesmo ahsuahsua

    *--*
    Beijos,
    http://theperfect-girls.blogspot.com

    ResponderExcluir
  9. Oi, meu nome é Luan e eu estou aqui para pedir que você seguise o meu blog!
    O meu antigo foi Hackeado.
    http://luan-ontheworld.blogspot.com/

    ResponderExcluir
  10. Oi, meu nome é Luan e eu estou aqui para pedir que você seguise o meu blog!
    O meu antigo foi Hackeado.
    http://luan-ontheworld.blogspot.com/

    ResponderExcluir
  11. fixe*
    http://poesia-de-uma-vida.blogspot.com/

    http://o-meu-ladooculto.blogspot.com/

    ResponderExcluir

Olá! Obrigada pela sua visita e comentário♥

Leia também:

Subir