JMiur [E]

Las páginas estáticas son algo que tiene un uso que se va extendiendo a lo largo del tiempo, sobre todo, porque las nuevas plantillas incluyen el gadget por defecto y justamente, ese gadget es el que genera confusiones y preguntas respecto a su personalización ya que suele ser confundido con un "menú normal" que puede ser personalizado libremente pero no lo es.

Como todo gadget, posee un código rígido y una serie de reglas de estilo predefinidas por Blogger; si queremos modificar algo, deberíamos entender su estructura y sus limitaciones.

El primer problema a resolver es agregar enlaces que no sean páginas estáticas; eso es bastante simple y, aunque ya está explicado en alguna otra entrada, vuelvo a repetir la idea: hay que desplegar los artilugios de la plantilla y buscar el includable que lo contiene:
<b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>
allí, hay un loop con etiquetas UL y LI; si queremos incorporar algún enlace extra, debemos agregar las etiquetas justo después de </b:loop> y antes de </ul>
<ul>
  <b:loop values='data:links' var='link'>
    .......
  </b:loop>
  <li><a href='URL_1'>,vaga</a></li>
  <li><a href='URL_2'>twitter</a></li>
</ul>
Pero se puede cambiar más. Vamos a agregarle una imagen de fondo distinta a cada uno de esos enlaces; para eso, bastaría que los identificaremos mediante una clase o un ID pero, como son escritos de modo automático, debemos usar alguna variable para que cada uno sea distinto del otro.

Si los títulos de nuestras páginas, que es eso que vemos en el "menú", sólo tienen una palabra; podemos usar ese dato; si no es así, debemos recurrir a un script y como este sería el método más universal, vamos a verlo.

Lo que haré es modificar el loop completo de tal forma que quede así:
<ul id='listapaginas'>
  <b:loop values='data:links' var='link'>
    <b:if cond='data:link.isCurrentPage'>
      <li><a class='selected' expr:href='data:link.href' id=''><data:link.title/></a></li>
    <b:else/>
      <li><a expr:href='data:link.href' id=''><data:link.title/></a></li>
    </b:if>
  </b:loop>
  <li><a href='URL_sitio1' id=''> otro </a></li>
  <li><a href='URL_sitio2' id=''> otro más </a></li>
</ul>
<script type='text/javascript'>agregarIDs();</script>
y la función con el script la colocaré antes de </head>
<script type='text/javascript'>
//<![CDATA[
function agregarIDs() {
  var laclase;
  var obj = document.getElementById("listapaginas");
  var enlaces = obj.getElementsByTagName("a");
  for (var i=0; i<enlaces.length; i++) {
    enlaces[i].id="pagina" + String(i);
  }
}
//]]>
</script>
Lo que hará esa función es sencillo, sólo le colocará un atributo ID a cada enlace del gadget de tal modo que sean identificables individualmente; el primero se llamará pagina0, el segundo pagina1, el tercero pagina2 y así sucesivamente.

Como dije antes, si los títulos de las páginas sólo contienen una palabra, el script es innecesario y podemos usar ese texto como ID de los enlaces:
<li><a class='selected' expr:href='data:link.href' expr:id='data:link.title'><data:link.title/></a></li>

<li><a expr:href='data:link.href' expr:id='data:link.title'><data:link.title/></a></li>
Sea cual sea el esquema elegido, el resto es CSS que también ponemos antes de </head>
<style>

  /* una imagen de fondo distinta par cada enlace */
  #pagina0 {background:  transparent url(IMAGEN_0) no-repeat 0 0;}
  #pagina1 {background:  transparent url(IMAGEN_1) no-repeat 0 0;}
  #pagina2 {background:  transparent url(IMAGEN_2) no-repeat 0 0;}
  #pagina3 {background:  transparent url(IMAGEN_3) no-repeat 0 0;}
  #pagina4 {background:  transparent url(IMAGEN_4) no-repeat 0 0;}

  /* la etiqueta LI contenedora */
  .PageList li {
    /* sobrescribir las reglas de Blogger */
    margin: 40px 0 20px !important;
    padding: 0 !important;
    /* las animamos un poco */
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
  }

  /* los enlaces tienen una imagen de fondo y un texto */
  .PageList li a {
    color: #666;
    display: inline-block;
    font-family: Shadows Into Light Two,cursive;
    font-size: 28px;
    /* establecemos la dimensión */
    height: 60px;
    padding-bottom: 0;
    padding-top: 110px;
    width: 120px;
    /* los animamos un poco */
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
  }

  /* el efecto hover anima las cosas */
  .PageList li a:hover {
    color: #000;
    font-size: 34px;
    text-decoration: none;
    /* invertimos la posición para que la imagen "baje" */
    background-position: 0 bottom !important;
    /* invertimos los padding para que el texto "suba" */
    padding-top: 0;
    padding-bottom: 110px;
  }

  /* la página atula se muestra "torcida" */
  .PageList a.selected {
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
    -o-transform: rotate(-15deg);
    -ms-transform: rotate(-15deg);
    transform: rotate(-15deg);
  }
  /* y se endereza al poner el cursor encima */
  .PageList a.selected:hover {
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    -o-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
</style>
Y el resultado final es el que puede verse en este blog de pruebas.

51 comentarios:

Marian  

Genial, me guardo el post para personalizar mis páginas en cuanto tenga un poco de tiempo. Era algo que desde hace tiempo tengo pendiente en mi blog.
Saludos,
Marian

Responder
Beben Koben  

thanks for coding master :)

Responder
Emilio Cobos Álvarez  

Muy interesante, sobre todo el condicional data:link.isCurrentPage...
Es posible que cambie el menú para usar esa variable...

P.D.: Ya implementé los comentarios anidados de Felipe, con mis propias variaciones. Funcionan de maravilla, gracias por hacerlo llegar a tanta gente, si no hubiera tardado mucho en enterarme ;)

JMiur  

Entiendo que el condicional data:link.isCurrentPage sólo funciona en ese gadget, es una pena pero, no es un dato accesible en otro lado.

A Felipe hay que levantarle una estatua por haber desarrolado ese sistema de comentarios :-)

Emilio Cobos Álvarez  

A eso me refería, a cambiarlo por una lista de páginas ;)

Yo te apoyo en lo de la estatua

JMiur  

:D

Responder
Rosendo Ramírez Aquino  

Se ve muy tentador :P

Responder
ISO SignedPSP PSP PSX ISO CSO  

No sabía de la existencia de <b:if cond='data:link.isCurrentPage'> veré qué puedo hacer con él :P

Responder
Minipunk  

Que crack, tendré que probarlo, auque cada vez que toco...

Responder
Adrián J. Messina  

J. recién leo esto. Queda fabuloso. A jugar, un abrazo.

JMiur  

Una abrazo, Adrián :D

Responder
Mario  

Hola, me gustaría saber si habría alguna manera de igual que añadir una página más añadir una desplegable

JMiur  

No entiendo la pregunta.

Responder
Xabier Villanueva  

Hola, buenas tardes.

Llevo horas dándole vueltas a ver qué ha podido pasar con mis páginas estáticas porque han desaparecido de repente al ocultar una de ellas desde el menú "páginas" y sigo sin hallar con la solución.

En mi plantilla no tengo añadida la siguiente línea:

b:widget id='PageList1' locked='false' title='Páginas' type='PageList'>

En varios blogs he visto que sí está, y aunque la ponga después de

div class='span-21'
div class='menu-primary-wrap'
b:section class='pagelistmenusblog' id='pagelistmenusblog' showaddelement='no'/>

me sigue sin funcionar. He probado a volver a borrador todas las páginas, cambiar el showaddelement a yes y publicarlos de nuevo pero no consigo nada. ¿Qué pruebas me sugieres que haga?

El blog es éste: Cómo ser un kiwi

Muchas gracias de antemano.

pd: he tenido que quitar los símbolos de apertura y cierre de los div para que me dejara publicar el comentario.

JMiur  

¿Qué significa que han desaparecido las páginas estáticas? Siguen allí, por ejemplo:
http://www.comoserunkiwi.com/p/informacion-de-nueva-zelanda.html
http://www.comoserunkiwi.com/p/isla-sur-de-nueva-zelanda.html
son accesibles desde el menú superior

¿Estás hablando del gadget de páginas estáticas? ¿Estaba colocado en alguna parte y ya no está? En el código fuente parece hacerse referencia a un elemento PageList14, es decir, el ID no es PageList1 sino PageList14

Si ese gadget no ha sido eliminado, debe seguir allí.

showaddelement o locked sólo afectan a la forma en que se muestran los elementos en la ventana de Diseño de Blogger y no a la forma en que se ve el sitio.

Xabier Villanueva  

Perdona, igual me había expresado mal. Las páginas siguen funcionando, lo que ha pasado es que han desaparecido los enlaces de la cabecera, donde se encuentran los iconos de las redes sociales.

Si hago una búsqueda de "Pagelist" al expandir la plantilla de artilugios lo único que me encuentra es esta línea (y en ningún momento me hace referencia al Pagelink1 o al Pagelink14 que mencionas):

b:section class='pagelistmenusblog' id='pagelistmenusblog' showaddelement='no'/>

Debajo ya comienza el div que se abre para las redes sociales:

div class='span-3 last'>

Ahora no te sé decir qué había antes, pero al no haber modificado nada a través del html debería estar tal cual estaba anteriormente.

Un saludo y mil gracias por tu ayuda.

JMiur  

Ahora se entiende un poco más. Dice que ahí arriba, a la izquierda de los íconos de redes sociales, había "algo". Efectivamente, en el código fuente se ve un DIV vacío que, en la plantilla debería decir algo similar a esto:

<b:section class='pagelistmenusblog' id='pagelistmenusblog'>
........ y aca debería estar algún gadget
</b:section>

o bien esto:

<b:section class='pagelistmenusblog' id='pagelistmenusblog'/>

si es que no hay ningún gadget agregado que es lo que parece estar ocurriendo.

Cualquiera de ambas además, podría tener atributos tales como maxwidgets, showaddelement o locked que, como te decía, sólo afectan la forma en que se muestra (o no se muestra) en la ventana de diseño. Si tiene cualquiera de esos atributos, los quitas y listo.

Si la sección está vacía, si allí no hay un gadget y no encuentras ninguna otra referencia a PageList en la plantilla, es probable que algún error de Blogger la haya eliminado temporal o permanentemente porque, en el código fuente se ve que existe (o existía) un elemento PageList14 aunque ahora dice NULL.

Si en esa sección había un gadget de Páginas, simplemente agrega otro y todo debería verse como antes. Si el error es temporal, en algún momento verás dos (si Blogger se digna a devolver la otra) en cuyo caso, simplemente eliminas una de ellas. El diseño gráfico, no debería tener cambio alguno.

Xabier Villanueva  

Después de < b:section class='pagelistmenusblog' id='pagelistmenusblog'/> no tengo ningún widget y comienza, sin cerrar la sección, el div que abre paso a las redes sociales.

He probado a añadir el widget pero no lo consigo porque me da error. Lo he dejado así y me dice que El artilugio con el ID < b>PageList14< /b> no se encuentra dentro de una sección (el elemento matriz real es: < b>div< /b>.) Todos los artilugios deben estar en una sección:

< div class='span-21'>
< div class='menu-primary-wrap'>
< b:section class='pagelistmenusblog' id='pagelistmenusblog' showaddelement='no'/>
< b:widget id='PageList14' title='Páginas' type='PageList'>
< /b:widget>
< /div>
< /div>

< div class='span-3 last'>
< div class='social-profiles'>
.
.
.

En la sección páginas he jugado a "no mostrar" (que es como ha estado siempre), a dejarla en "Pestañas principales" (con lo que se siguen sin ver) y a ponerla en "Enlaces laterales" (con lo que consigo que aparezcan en un lateral pero al no poder moverlas de sitio se queda ahí.).

Me gustaría saber probar más cosas, pero html nunca ha sido mi fuerte.

Un saludo!

JMiur  

Tienes un error de sintaxis; los divs no importan; esto:

<b:section ......./>

equivale a esto:

<b:section .......></b:section >

la barra / del final es el cierre de la etiqueta así que apra insertar algo dentro, debe abrirse de este modo:

<b:section class='pagelistmenusblog' id='pagelistmenusblog' />
<b:widget id='PageList14' title='Páginas' type='PageList' /&ft;
</b:section>

Responder
Xabier Villanueva  

Al hacerlo como tú me dices me sigue dando error, en este caso porque me dice que el b:widget está mal cerrado. En vez de poner el /&ft; he probado a cerrarlo con /> pero en ese caso me dice que los div hay que cerrarlos con /div (y cierro el div que creo que sobra y me da otro error).

JMiur  

Sí, está mal escrito:

<b:section class='pagelistmenusblog' id='pagelistmenusblog'/>
<b:widget id='PageList14' title='Páginas' type='PageList'/>
</b:section>

a ver si ahora se publica bien.

Xabier Villanueva  

Hola JMiur,

Al ponerlo así me sigue dando error. Ya había probado a cerrarlo como habías dicho. El error que me da si lo pongo como dices es porque no he cerrado bien un elemento div. Estoy buscando a ver pero no lo encuentro.

Un saludo.

Xabier Villanueva  

Aquí estoy de nuevo. Nada, que no hay manera. No consigo que vuelvan a aparecer las páginas.

¿Qué podría hacer?

Un saludo.

JMiur  

Tendría que saber qué dice la plantilla con exactitud y cuál es el código que estás cambiando.

Xabier Villanueva  

¿Podría mandarte la plantilla por correo electrónico para que le echaras un vistazo? Ahí te intentaría explicar todos los pasos que he probado.

Un saludo.

JMiur  

Puedes epro no hay garantias que el error se pueda ver aplicando al plantilla a otro blog; en todo caso, explícame muy bien cuál es el problema y que has intentado cambiar.

Xabier Villanueva  

Correo enviado. La info la tienes adjunta en el archivo word. ¡Muchísimas gracias por tu ayuda!

JMiur  

Recibido y respondido.

Responder
V. T. Abdala (Emile)  

Hola JMiur! Estoy intentando usar las páginas en mi blog pero no pude. Las entradas con cierta etiqueta tienen un diseño distinto, lo que hace que las páginas, al no tener etiquetas, no se muestren. ¿Se te ocurre alguna manera de solucionarlo?
Muchos saludos.

JMiur  

No entiendo lo que quieres hacer ya que lo que muestra esta entrada es, simplemente, una forma de mostrar ese menú de páginas estáticas y ampliarlo.

V. T. Abdala (Emile)  

Sí, pude aplicar sin problemas lo explicado. La pregunta es si se pueden agregar etiquetas a las páginas, porque de otra forma en mi blog no se muestran, por ejemplo http://todaslasriberas.blogspot.com.ar/p/prueba.html
Perdón por hacer esta pregunta acá, es que el problema surgió al intentar utilizarlas y tal vez le pase a alguien más :P

JMiur  

Ahora no veo ese gadget agregado. No; las páginas estáticas no tienen etiquetas pero, no existen restricción alguna para que pueda ser mostrado en cualquier tipo de página.

No está nada claro lo que te ocurre ¿por qué dices que las páginas que no tienen etiquetas no se muestran? ¿Hay alguna condición o script en tu plantilla que maneja eso?

V. T. Abdala (Emile)  

Exacto, tengo una condición que hace que las páginas con la etiqueta "citas" se vean diferentes. Perdón por explicarme mal :(
Ahora saqué el gadget porque de cualquier manera no servía. Tendré que conformarme con usar entradas como páginas... Gracias!!!

Responder
Elya  

Hola!, tengo una pregunta, no encuentro la respuesta en ninguna parte...
Como puedo poner una imagen DEBAJO de las páginas independientes de blogger?

Ya he quitado la que venia predefinida y quiero poner esto:

http://4.bp.blogspot.com/_6pbSFKC8YH4/Scsr8l1MotI/AAAAAAAAAYE/m3nwOHLMvF0/s1600/navbar.png

Y que salgan encima las paginas estáticas... Es posible? Lo he visto en otros sitios pero no se como hacerlo... Gracias!!! Un saludo!!

JMiur  

Habría que ver en que blog quieres hacer eso; depende de la plantilla que uses. Puede hacerse de varias maneras distintas pero hay que ver el caso concreto.

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Hola no he podido hacerlo:head lo encontré sin problemas.
Pero los pasos anteriores no he podido hacerlos,ya que donde debo agregar el listado no me aparece ¿Qué estoy haciendo mal?Un saludo
N.T y al enviar el comentario me dice que mi HTML no es aceptable y la etiqueta tampoco,Entonces ¿Cómo te explico las cosas que puse?......

JMiur  

Los comentarios de los blogs jamás aceptan etiquetas HTML salvo algunas de formato. Sino, sería peligrosísimo.

Debes reemplazar los caracteres < y > por entities;
< = &lt;
> = &gt;

Si no ves el widget es posible que no lo tengas o que debas expandir los artilugios de la plantilla.

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Escurioso,expandí artilugios y en el buscador puse páginas literalmente,y si que me salió la frase que había que buscar; queria agregar después de loop y antes que ul
Las paginas estáticas como dices con el listado(numero y nombre) y encontre 13 loop
Y ul.
Que mas referencias debo buscar para saber donde añadirlo. Y como te dije el resto de antes de head no tengo problemas.Cuanta complicación!!!!!!!!
¿Te he trasmitido bien mis dudas? Gracias

JMiur  

El loop que debes buscar es el que está en el widget PageList1

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Hola de nuevo: Como no conseguí hacerlo;intenté con el menú dock y ese lo logré fácilmente. Es precioso, muchas gracias.

Responder
Eurohelper  

Hola amigo muchas gracias por esta útil información

Necesito hacer una pregunta muy tonta pero que me está volviendo loco: como quito el borde al gadget de páginas? veo que en tu enlace de pruebas no lo tienes enmarcado, y no encuentro el código para quitarle todos los bordes y líneas.

Podrías ayudarme? Gracias

JMiur  

Tendría que ver tu blog para responderte.

Eurohelper  

El blog es www.eurohelper.org

Mi idea es quitar algunos enlaces del gadget de páginas y colocarlos en otro sitio, para darle lugar a las imágenes de fondo. Como te dije antes, el problema es que no sé como quitar los bordes que tiene el gadget, y con las imágenes queda muy mal.

Gracias!

JMiur  

Allí veo dos tipos de bordes; el que separa cada item está en:
.tabs-inner .widget li a {}

El resto, está dividido; en esta regla hay una parte:
.tabs-inner .widget ul {}
y en esta hay otra:
.tabs-inner .section:first-child ul {}

En todos los casos, basta boorar la propiedad border cualquiera sea esta.

Eurohelper  

Muchas gracias amigo!

Responder
Daddy's Little Monsteer ϟ.  

Disculpa, pero tengo el mismo problema qe eurohelper & yo tampoco encuentro manera de arreglarlo u.u, me podrías ayudar?

JMiur  

No sé cuál es el blog al que te refieres.

Daddy's Little Monsteer ϟ.  

http://hentaixstreaming.blogspot.com.ar

Lo qe qiero, es quitar las líneas qe bordean al gadget de páginas, qe se encuentra debajo de la cabecera.

JMiur  

Elimina todos las propeidades border que veas e estas reglas de estilo:
.tabs-inner .section:first-child ul {}
.tabs-inner .widget ul {}
.tabs-inner .widget li a {}

Daddy's Little Monsteer ϟ.  

Disculpá, pero usando el buscador (control + f) no encuentro ninguna palabra qe diga "border", ni ninguna de las líneas qe mencionaste. :(

JMiur  

Despliega el CSS <b:skin> allí están todas las reglas de estilo:

/* Tabs
----------------------------------------------- */

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR