Costumize o modelo de menu de páginas do novo Blogger

Que tal dar uma aspecto diferente ao menu de páginas de seu novo Blogger ? Claro que é preciso primeiro você ter o menu implementado em seu blog.



Abaixo 3 modelos diferente, em forma de botão, círculos e abas.

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:


/* 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 BOTÕES

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
margin: -10px -26px  -23px -26px;
padding: 6px 0;
background: #eee;
}

.tabs-inner .section:first-child ul {
}

.tabs-inner .widget ul {
margin: 2px auto;

}

.tabs-inner .widget li a {
 background: #808080;
 font-size: 18px;
 display: inline-block;
 margin: 1px 2px;
 border: 1px solid #ccc;
  padding: .6em 2em;
 color: white; text-shadow: black 0.1em 0.1em 0.2em
}

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

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: #000;
  background-color: #ccc;
  text-decoration: none;
}

MODELO ABAS

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
border-bottom: 10px solid #cc0000;
margin: -4px -26px  0 -26px;
padding: 0 0;
}
.tabs-inner .section:first-child ul {
}

.tabs-inner .widget ul {
margin: 0;
}

.tabs-inner .widget li a {
text-shadow: #fff 0.1em 0.1em 0.2em;
 font-size: 16px;
 display: inline-block;
 margin:  0 2px -2px 2px;
background: -webkit-linear-gradient(#cc0000, #fff);
background: -moz-linear-gradient(#cc0000, #fff);
background: -o-linear-gradient(#cc0000, #fff);
 border-right: 2px solid #cc0000;
border-top: 2px solid #cc0000;
border-left: 2px solid #cc0000;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
  padding: .8em 3em;
  color: #000;
}

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

.tabs-inner .widget li.selected a{
text-shadow: #fff 0.1em 0.1em 0.2em;
border-right: 2px solid #cc0000;
border-top: 2px solid #cc0000;
border-left: 2px solid #cc0000;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
}
.tabs-inner .widget li a:hover {
  color: #000;
  background-color: #ccc;
  text-decoration: none;
background: -webkit-linear-gradient(#fff, #cc0000);
background: -moz-linear-gradient(#fff, #cc0000);
background: -o-linear-gradient(#fff, #cc0000);
border-right: 2px solid #cc0000;
border-top: 2px solid #cc0000;
border-left: 2px solid #cc0000;
-moz-border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
}

MODELO CÍRCULOS

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

.tabs-inner .widget li a  {
color: white; text-shadow: black 0.1em 0.1em 0.2em;
font-size: 16px;
font-weight: bold;
}
.tabs-inner .widget li  {
text-align: center;
-moz-box-shadow: 0 0 4px 4px #888;
-webkit-box-shadow: 0 0 4px 4px #888;
box-shadow: 0 0 4px 4px #888;
background: #65667D;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
behavior: url(border-radius.htc);
width: 90px;
height: 60px;
margin:16px 12px 14px 16px;
padding: 27px 0 0 0;
}

.tabs-inner .widget li.selected {
background: #5C5FCA;
}

 .tabs-inner .widget li:hover {
text-align: center;
-moz-box-shadow: 0 0 8px 8px #4040FF;
-webkit-box-shadow: 0 0 8px 8px #4040FF;
box-shadow: 0 0 8px 8px #4040FF;
background: #83F9F8;
}
 .tabs-inner .widget li:hover {
text-align: center;
-moz-box-shadow: 0 0 5px 5px #ccc;
-webkit-box-shadow: 0 0 4px 4px #ccc;
box-shadow: 0 0 4px 4px #ccc;
background: #83F9F8;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
behavior: url(border-radius.htc);
width: 90px;
height: 60px;
margin:16px 12px 6px 12px;
padding: 27px 0 0 0;
}