Agregar imagen a página externa del Header

Dificultad: Experta
Tiempo: 10 min


Para realizar esto necesitamos tener el gadget de páginas que por lo general ya viene predeterminadamente en el diseño de la plantilla con la Página principal o Home. Vamos a agregar las páginas externas directamente desde la plantilla con su imagen específica. Si quieres crear una página dentro de la página principal, no te recomiendo que lo hagas desde el Gadget de Páginas, ya que a esas páginas no se les puede agregar una imagen, es decir, sí se puede, pero: 1º si son más de dos páginas tendrán la misma imagen, y 2º en caso de que sea solo una página solo se visualizará bien la imagen en el Home; por eso te recomendaría crear la página con una entrada, es lo mismo, sencillamente la tendrías que ubicar o darle una fecha que la ubique cerca a las primeras entradas de tu Blog, por ejemplo la página de Menú que está en el header de Charkleons.com en realidad es una entrada, no se nota la diferencia, es lo mismo que haberla creado desde el gadget.

Este procedimiento es para plantillas de Blogger, ya que las plantillas prediseñadas en su mayoría están creadas con estilos (imágenes que forman el diseño).

Con el nuevo diseño de Blogger usando el Gadget Páginas (desde DISEÑO) verás la parte donde puedes agregar fácilmente una página con su URL por si no quieres agregar páginas con imágenes.


Para colocar una imagen para la nueva página vamos a Plantilla / Editar HTML / Plantilla de formato y buscamos el código del Gadget "Páginas" que es el siguiente (esto es lo demorado):


Les recomiendo usar el buscador general (para todos los navegadores) Control + F y buscar las palabras: pagelist o pagelist1 con la cual se nombra al Gadget.

En este código como ejemplo ya está creada otra página con el Gadget de Páginas (color azul) aparte de la que viene por defecto (Página Principal o HOME) y se ha agregado la línea de la página nueva externa.

Al final dejo una explicación sobre qué agregar al código de la nueva página para que se abra en otra ventana.
__________________________________

<b:widget id='PageList1' locked='false' title='Páginas' 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>


<li><a href='URL de la Página externa'><img border='0' src='URL de la imagen'/></a></li>

</ul>

<b:include name='quickedit'/>

</div>


</b:includable>
</b:widget>

Ahora solo deben agregar la línea de código que contiene los <li></li> en color verde y reemplazar lo que está en color rojo con sus links (URL) de la página externa y de la imagen (Botón o Logo) con la que quieran que se muestre. Recuerden dar un tamaño estandar para los logos o íconos, los que yo uso son de 80px X 80px.

Si quieres agregar otra página, sigue los pasos anteriores y ubícala de bajo de la primera que agregaste.


Para que la página se abra en otra ventana o pestaña (según la configuración del navegador) deben agregar  target='_blank'  al link, y les recomiendo para que los navegadores carguen más rápido las imágenes agregarles las etiquetas width='80px' height='80px' al link de la imagen (con sus medidas claro está), quedando de la siguiente manera, ejemplo:

<li><a href='URL de la Página externa'  target='_blank'><img border='0' src='URL de la imagenwidth='80px' height='80px' /></a></li>


Espero que esta información les sea de útil.

Gracias.


Cómo se agregan páginas exteranas al menú del header en blogger, agregar páginas exterans en blogger, colocarle una imagen a las páginas en el menú en blogger, poner páginas externas arriba en blogger, código para páginas externas en blogger, cómo se agregan páginas externas en la plantilla de blogger,