Mais modelos de menu de páginas, ou guias

Mais alguns modelinhos de menu de páginas para quem uso o template Simples.

Clique para ampliar

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

Procure então por todo este trecho abaixo e substitua pelo modelo mais adequado a seu blog.


/* 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;
}

 
Modelo 1

Substitua então pelo código abaixo:

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
 margin: -20px 4px 0 4px;
}

.tabs-inner .section:first-child ul {
color: white; text-shadow: black 0.1em 0.1em 0.2em;
  margin-top: -$(header.border.size);
  border-top: $(header.border.horizontalsize) 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;
  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;
  margin: 0 1px 0 0;
  padding: 25px 19px 25px 21px;
  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;
}

Modelo 2

/* Tabs----------------------------------------------- */
.tabs-inner .section:first-child {
width: 100%;
}

.tabs-inner .section:first-child ul {
  border-top: 6px solid #cc0000;/*cor da borda grande*/
}

.tabs-inner .widget ul {
  background: transparent;
  _background-image: none;
}

.tabs-inner .widget li a {
    text-align: center;
    background: #ccc;/*cor de fundo*/
   width: 90px;
   -webkit-border-bottom-left-radius: 9px;
   -webkit-border-bottom-right-radius: 9px;
   -moz-border-radius-bottomleft: 9px;
   -moz-border-radius-bottomright: 9px;
  border-top:6px solid #e6ab07;
  text-shadow: 0.1em 0.1em 0.2em black; margin: 2px 2px;
  display: inline-block;
  padding: 6px 8px 6px 8px;
  font: $(tabs.font);
  color: $(tabs.text.color);
}

.tabs-inner .widget li:first-child a, .tabs-inner .widget li a  {
margin: 0 1px 0 1px;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
    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;
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

Agora...

conteudo.

Depois, querendo modificar cores, tipo de fonte e tamanho, basta ir até o editor e personalizar a vontade.

Outros modelos aqui ou aqui

»»Leia mais...