El widget de páginas estáticas de Blogger es muy útil para usarse como menú, sin embargo, tiene un punto débil: no se pueden agregar enlaces de otro tipo desde el panel. Pero sí es posible agregar enlaces desde el código.
1. Ir al código de la plantilla (Escritorio → Diseño → Edición HTML) y expandir plantilla de artilugios.
2. Buscar el código del widget de páginas, que es más o menos como sigue:
<b:widget id='PageList1' locked='true' title='Pages' type='PageList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<b:if cond='data:link.isCurrentPage'>
<li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
<b:else/>
<li><a expr:href='data:link.href'><data:link.title/></a></li>
</b:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Para facilitar la búsqueda, pueden buscar con el navegador: id=’PageList
3. Una vez ubicado el código, hay dos lugares donde se pueden colocar nuevos enlaces:
- Antes de
<ul>
. El enlace aparece primero en el menú. - Después de
</ul>
. El enlace aparece último en el menú. Nótese la diagonal de cierre de la etiqueta.
Como se trata de una lista HTML, el enlace seguiría el siguiente formato:
<li><a href='http://misitio.com/mienlace/'>Mi enlace</a></li>
Se pueden agregar tantos enlaces como el diseño lo permita. Siempre teniendo cuidado de abrir y cerrar correctamente las etiquetas.
4. Guardar los cambios.
De este modo se pueden agregar enlaces a una etiqueta importante, un sitio externo, al url del feed o cualquier otro sitio.
Joel marzo 10, 2011 a las 12:10 pm
Hola Francisco!
En el codigo pareciera que te faltó cerrar el tag de enlace (para quienes vayan a copiar directamente el código):
Mi enlace
Saludos y felicidades por el blog!!
ResponderFrancisco marzo 10, 2011 a las 12:38 pm
@Joel: Gracias Joel, yo hablando de tener cuidado con cerrar las tags y soy el primero que falla 😛
Gracias! 😀
Responderoloman marzo 10, 2011 a las 1:11 pm
Muy buena idea. Y simple… 🙂
Responderdiseño marzo 10, 2011 a las 3:41 pm
por favor, podíais explicar más en profundidad para que se usa? poniendo algún ejemplo? es que los que empezamos lo tenemos más difícil! un saludo!
ResponderFrancisco marzo 10, 2011 a las 9:25 pm
@oloman: Es algo que preguntan mucho en BTemplates, ojalá le quite la duda a más de uno.
@diseño: Sirve solo si tienes un blog con menú de páginas y quieres agregar a dicho menú algo más que los enlaces a las páginas. Como mencionaba arriba, podría ser a una etiqueta o a otro de tus blogs, como no se puede hacer desde el panel, se hace modificando el widget.
ResponderLMGuillermo marzo 17, 2011 a las 6:19 pm
Muy útil, muchas gracias.
ResponderAlfredo junio 25, 2011 a las 3:50 pm
hola, voy a hacer un blog de programacion de microcontroladores y me preguntaba si podrias pasarme el script para poner codigo que tienes, en el que pones tus scripts, para adaptarlo al mio, muchisimas gracias
Respondermikelse julio 18, 2011 a las 7:34 pm
Hola, justo esto buscaba. gracias
Responderpero tengo un problema al darle click a una pagina estatica, desaparecen los enlaces que agrege solo se ven los enlaces de las paginas estaticas, hice algo mal? gracias por la ayuda
Efren agosto 9, 2011 a las 1:07 pm
Buenas!
Estoy aplicando este tutorial a un blog, todo ha ido bien hasta el momento que intento hacer desaparecer el list-style… en chrome funciona correctamente pero en firefox siguen los puntitos tipicos de las listas… ni aplicando la etiqueta span…
Gracias!
ResponderAlvaro Benavides septiembre 16, 2011 a las 11:57 am
Mi problema ahora es que hice esto y tengo una plantilla de las nuevas de blogger y cuando entro a una entrada entonces me sale un loop del menú, es deicr que los enlace que añado se repiten :S como lo resulevo? trate de mover los tags pero luego cuando entro a la entrada no salen son los enlace normales :S
ResponderAlvaro Benavides septiembre 16, 2011 a las 12:22 pm
¡OH!, tarde descubrí que hay que cerciorarse también de que los enlaces estén bajo de la etiqueta si se quieren de últimos. Editese también eso en el post para evitar errores. También esta mal eso de después de porque de ponerlo luego de esa etiqueta se crearía otra lista horizontal con los enlaces añadidos debajo del menú por defecto. Saludos.
ResponderLuis DoHaz noviembre 10, 2011 a las 3:26 pm
Amigo como hago para que los enlaces de ese menu se abran en la misma ventana, ya que tengo la opcio de que todos los enlaces (enlaces externos) se abran en otras ventanas, pero estos del menu quiero que se abran en la misma ventana, el codigo es el mismo que tienes arriba, que tengo que agregarle a ese codigo y en que parte, te lo agradeceria de corazon
ResponderAlvaro Benavides noviembre 11, 2011 a las 12:05 am
@Luis DoHaz: Hey Luis, coloca esto así a href=”http://www.example.com” target=”_self”, el target Self es lo que hace que se abra en la misma ventana, blank lo hace en una nueva (que es el por defecto).
Espero entiendas y te haya servido.
ResponderLuis DoHaz noviembre 11, 2011 a las 9:36 am
Gracias Alvaro, ya encontre otra solucion efectiva que es con el “target=”_parent”. De todas formas infinitas gracias
ResponderGèneve noviembre 11, 2011 a las 10:52 am
¡Hola! Antes de nada muchas gracias, solo que me ha surgido un problemilla …
Como puedes ver, al tener fondo negro no se ve a simple vista los enlaces.
¿Cómo puedo cambiar el color de la fuente?
Gracias (:
ResponderGèneve noviembre 11, 2011 a las 10:58 am
Ya está solucionado (:
ResponderPipo enero 16, 2013 a las 11:36 am
Gracias por el aporte.
ResponderMi problema era que la plantilla que estoy utilizando (Awesome) parece que no admite el winget “paginas” que es el que pensaba utilizar para crear un menu. Cuando intento colocarlo me indica que ya esta colocado pero no aparece. En la edición html de la plantilla con los artilugios expandidos tampoco aparece ese código que has puesto en el post.
He utilizado el código que has posteado para pegarlo en un winget html que aparecía en la cabecera, desde Edición de paginas.
Solucionado. Ya tengo menú y como quería, sin los puntitos delante.
Lo comento para el que no quiera trastear directamente con el código de la plantilla.
Un saludo y gracias.