Agregar imagen a página externa del Header

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.

Video tutorial Gadgets de Blogger (Páginas)

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):

Video Tutorial Nuevo diseño de la plantilla de Blogger

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 oHOME) 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 imagen' width='80px' height='80px' /></a></li>

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

               
                           

Imprimir artículo