Personaliza las Pag. Independientes de Blogger

Blogger añadió una nueva opción hace tiempo. Se trata de poder crear páginas independientes y escribir en ellas contenido especial.

Para crear páginas independientes bastará con iniciar sesión en Blogger in Draft y seguir los siguientes pasos:

1) Ve a Creación de entradas y haz clic en "Editar páginas"

2) Pulsa el botón "Página Nueva" y escribe el contenido de la entrada dinámica.

3) Selecciona el lugar en el que deseas colocar la lista de enlaces hacia las páginas independientes:

4) Pulsa "Guarda y publicar" para terminar.

Podrás crear hasta un total de 10 páginas independientes.

• La lista con la que se mostrarán las páginas no tiene estilo alguno, por lo que vamos a "decorarla" un poco y a transformarla en un menú:

Diseño>Edición de HTML>expandimos artilugios

Busca la etiqueta ]]> y encima añade estos bloques de CSS:

#PageList1 ul li {<br />background:#89912B none repeat scroll 0 0;<br />border:2px solid #CCCCCC;<br />padding:4px;<br />color: #0c0c0c;<br />text-align:center;<br />}<br />#PageList1 ul li:hover{<br />border: 2px solid #cccccc;<br />background: #2b6191 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcnk5S_HcSUWE9uvWaGVNGxFxjgDy3Sa184jsbzRl6ZGp7TcUqqYPcTfNcJWpS2raP1KB0RToSkSC-5TWMYNVfj4Vt7moOe6G2XxkbGE2PkDcRhbgyPuC7o7uk7x9L3meUmHyTAuAXar0/s1600-r/balcnti.png) no-repeat left;<br />color: #ffffff;<br />text-decoration: none;<br />padding: 4px;<br />}<br />#PageList1 ul li a:visited {<br />color: #ffffff;<br />text-align:center;<br />}<br />#PageList1 .selected{<br />background: #57912b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcnk5S_HcSUWE9uvWaGVNGxFxjgDy3Sa184jsbzRl6ZGp7TcUqqYPcTfNcJWpS2raP1KB0RToSkSC-5TWMYNVfj4Vt7moOe6G2XxkbGE2PkDcRhbgyPuC7o7uk7x9L3meUmHyTAuAXar0/s1600-r/balcnti.png) no-repeat left;<br />}

Guarda la plantilla para terminar:
Ahora tu lista de entradas independientes tendrá este aspecto:

- Al pasar el cursor el fondo cambiará a un color azul.
- Al hacer clic en un enlace y abrir la página estática, el título de ésta tendrá un color verde.

Notas:

El diseño de este menú ha sido pensado para las listas de páginas independientes colocadas en la sidebar (barra lateral). Si colocas el widget bajo la cabecera del blog, el diseño cambiará un poco.