Dando estilo ao menu de páginas do novo Blogger

Mais três modelos para você mudar o estilo de seu menu de páginas no novo Blogger


Vá até o Modelo de seu blog, clique em Editar modelo

  Não se esqueça de antes de começar salvar uma cópia de seu template, caso não dê certo, é só reinstalá-lo. Essa dica é para o template Simple, do novo Blogger, implementado em julho de 2011

Agora procure por todo este trecho abaixo:


/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

  font: $(tabs.font);
  color: $(tabs.text.color);

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}




Você deverá substituir o trecho acima pelo código do modelo que deseja instalar em seu blog.

MODELO HOVER PESTANA

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
background: transparent;
margin: 12px 0;
}

.tabs-inner .widget li  {
width: 120px;
text-shadow: 0.1em 0.1em 0.2em black; margin: 2px 2px;
padding: 14px 2px;
position:relative;
text-align: center;
text-decoration:none;
}
.tabs-inner .widget li a  {
display: block;
 border-top:6px solid #e6ab07;
color: #ccc; text-shadow: #000 0.1em 0.1em 0.2em;
font-size: 18px;
font-weight: bold;
padding: 3px 2px;
}

.tabs-inner .widget li.selected a {
color: #000;
 text-shadow: #ccc 0.1em 0.1em 0.2em;
 background-color:#e6ab07;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}
 .tabs-inner .widget li a:hover {
color:#fff;
    background-color:#e6ab07;
    -webkit-border-bottom-left-radius: 9px;
    -webkit-border-bottom-right-radius: 9px;
    -moz-border-radius-bottomleft: 9px;
    -moz-border-radius-bottomright: 9px;
}

MODELO NEON HOVER

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
background: #000;
border-bottom: 0px dashed #ccc;
}

.tabs-inner .widget li a  {
color: white; text-shadow: black 0.1em 0.1em 0.2em;
font-size: 18px;
font-weight: bold;
}
.tabs-inner .widget li  {
text-shadow: 0.1em 0.1em 0.2em black;color:#fff; padding:28px 23px; position:relative; text-decoration:none;
}

.tabs-inner .widget li.selected a {
color: #cc0000; text-shadow: #ccc 0.1em 0.1em 0.2em; padding: 20px 20px;
}
 .tabs-inner .widget li a:hover {
-moz-box-shadow: 0 0 10px 15px #cc0000, 5px -10px #cc0000, 10px 10px 10px#cc0000, 10px 10px #cc0000, 10px -10px 10px #cc0000;
-webkit-box-shadow: 0 0 10px 15px #cc0000, 5px -10px #cc0000, 10px 30px 50px #cc0000, 10px 10px #cc0000, 10px -10px 10px #cc0000;
box-shadow: 0 0 10px 15px #cc0000, 5px -10px #cc0000, 10px 10px 10px #cc0000, 10px 10px #cc0000, -10px -10px 10px #cc0000;
text-decoration: none;
padding: 20px 20px;
}
 .tabs-inner .widget li:hover {
text-align: center;
}

MODELO CLEAN

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
background: transparent;
border-bottom: 0px dashed #ccc;
}

.tabs-inner .widget li a  {
color: white; text-shadow: black 0.1em 0.1em 0.2em;
font-size: 18px;
font-weight: bold;
}
.tabs-inner .widget li  {
text-align: center;
background:transparent;
margin:3px 12px 3px 5px;
padding: 12px 12px;
}


.tabs-inner .widget li.selected a {
color: #cc0000; text-shadow: #ccc 0.1em 0.1em 0.2em;
}
 .tabs-inner .widget li a:hover {
color: #cc0000; text-shadow: #ccc 0.1em 0.1em 0.2em;
}
 .tabs-inner .widget li:hover {
text-align: center;
}